位置: IT常识 - 正文

CSS 获取当前可视屏幕高度--使用calc()方法动态计算宽度或者高度(css获取id)

编辑:rootadmin
CSS 获取当前可视屏幕高度--使用calc()方法动态计算宽度或者高度

推荐整理分享CSS 获取当前可视屏幕高度--使用calc()方法动态计算宽度或者高度(css获取id),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:css获取元素,在css中获取项目名称,css获取属性值,获取css样式,获取css属性,css获取属性值,css获取class,css获取class,内容如对您有帮助,希望把文章链接给更多的朋友!

先了解一下CSS3的相对长度单位和绝对长度单位(参考详细教程) :

相对长度单位CSS 获取当前可视屏幕高度--使用calc()方法动态计算宽度或者高度(css获取id)

相对长度单位指定了一个长度相对于另一个长度的属性。对于不同的设备相对长度更适用。

单位描述em它是描述相对于应用在当前元素的字体尺寸,所以它也是相对长度单位。一般浏览器字体大小默认为16px,则2em == 32px;ex依赖于英文字母小 x 的高度;ch数字 0 的宽度;remrem 是根 em(root em)的缩写,rem作用于非根元素时,相对于根元素字体大小;rem作用于根元素字体大小时,相对于其出初始字体大小;vwviewpoint width,视窗宽度,1vw=视窗宽度的1% ;vhviewpoint height,视窗高度,1vh=视窗高度的1% ;vminvw和vh中较小的那个;vmaxvw和vh中较大的那个。绝对长度单位

绝对长度单位是一个固定的值,它反应一个真实的物理尺寸。绝对长度单位视输出介质而定,不依赖于环境(显示器、分辨率、操作系统等)。

px像素 (1px = 1/96th of 1in)in英寸 (1in = 96px = 2.54cm)cm厘米mm毫米

我们通过vh / vw 可以获得当前屏幕的视窗高度/宽度,所以在css中,通过计算这个高度即可使得div的高度自动撑开到屏幕高度。而计算这个高度可以使用css3的calc()函数(参考详细教程):

calc() 函数的定义与用法:

calc() 函数用于动态计算长度值,需要注意的是:

运算符前后都需要保留一个空格,例如:width: calc(100% - 10px);任何长度值都可以使用calc()函数进行计算;calc()函数支持 “+”, “-”, “*”, “/” 运算;calc()函数使用标准的数学运算优先级规则;运用实列:1. 设置div的高度满屏、宽度满屏:方法一:height:100vh; width: 100vw;<div class="div">一些文本...</div><style> .div {height:100vh; width: 100vw; position: absolute; left: 50px; border: 1px solid black; background-color: yellow; padding: 5px; text-align: center; }</style>方法二:width: calc(100%);height:calc(100%);<div class="div">一些文本...</div><style> .div {width: calc(100%);height:calc(100%); position: absolute; left: 50px; border: 1px solid black; background-color: yellow; padding: 5px; text-align: center; }</style>2. 自定义div的高度、宽度:calc(expression)

expression:必须是一个数学表达式,结果将采用运算后的返回值。

<div class="div">一些文本...</div><style> .div { //width: calc(50%*2);//height:calc(40%+50px);width: calc(100%/6);height:calc(100%-50px); position: absolute; left: 50px; border: 1px solid black; background-color: yellow; padding: 5px; text-align: center; }</style>
本文链接地址:https://www.jiuchutong.com/zhishi/297531.html 转载请保留说明!

上一篇:深度学习|论文中常用的注意力模块合集(下)

下一篇:基于 transformers 的 generate() 方法实现多样化文本生成:参数含义和算法原理解读(基于transformers的nlp入门 pdf)

  • 已在境外缴纳的企业所得税税额 分国不分项
  • 小规模纳税人刚成立公司如何记账
  • 流转税具体的账务处理,可以怎样考虑?
  • 实收资本印花税是营业账簿吗
  • 个人劳务报酬所得税率表
  • 房地产企业实收资本要求
  • 合伙企业分配利润如何纳税
  • 其他资本公积可以是负数吗
  • 黑色金属冶炼压延品税收编码
  • 商业企业销售化妆品
  • 多交附加税怎么做会计分录
  • 4s店收取的金融服务费用
  • 固定资产如何抵扣企业所得税
  • 老板投入资金入什么科目
  • 盈余公积可用于集体福利吗
  • 电子税务局一般纳税人申请流程
  • 小规模纳税人税率有几种
  • 小规模纳税人的税率是多少
  • 个人申请补交个税怎么写
  • 个人所得税合并扣税
  • 取得土地无形资产的条件
  • 发票校验码后六位图解
  • 个体工商户税种认定的税目可以改吗
  • 银行端现金缴税凭证
  • 软件行业的收入怎么样
  • 小企业存货有哪些
  • linux deepin怎么样
  • php中strcmp函数
  • php安装教程详解
  • 销售补差是怎么算的
  • 期末坏账准备的计算
  • php数组函数输出《咏雪》里有多少"片"字
  • 000.exe病毒
  • PHP:pg_send_query()的用法_PostgreSQL函数
  • 撤销银行账户
  • linux子网掩码自动变成24
  • js技术干货分享
  • echart设置legend
  • 编译和链接的区别是什么
  • 母公司将子公司的资产负债和当期损益
  • 个税申报结果查询
  • 如何登记现金明细账
  • kppw源码
  • 个体工商户税收起征点是多少?
  • db2profile
  • 物业代收代缴是什么意思
  • 同一控制下合并冲减资本公积
  • 定期定额户用财务制度备案吗
  • 个体工商户还没开业也要报税吗
  • 可以公账户给私人转账吗
  • 销项100万进项80万交多少税
  • 房地产企业进项税抵扣的时间
  • 白条入账的新会计政策
  • 税收优惠退回的税金怎么入账
  • 新成立的公司怎样建账
  • 报销冲抵什么意思
  • 年度纳税总额包括个税吗
  • 企业管理费的计算基础
  • 土地使用权使用年限怎么算
  • mysql索引作用的简单理解
  • 粘贴板有问题不能粘贴怎么处理
  • linux的rz sz命令
  • 深度u盘装xp系统教程
  • linux 配置中文
  • sistray.exe - sistray是什么进程 有什么用
  • win7文件和打印机共享
  • 从零基础到入门
  • js中正则表达式语法
  • vue怎么实现多页面
  • 在javascript中关于alert confirm
  • nodejs处理excel
  • js实现跨域访问的几种方式
  • 湖南省电子国税
  • 周报要素
  • 怎么在国税网站取消已申报的财务报表
  • 交完车船税后地税局都给什么
  • 银行存款利息收入现金流量表计入哪
  • 新加坡国税局的电话号码
  • 公司小规模怎么纳税
  • 航天金税怎么导入发票
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设