CSS calc()函数与单位vh 常见height:100vh[通俗易懂]

CSS calc()函数与单位vh 常见height:100vh[通俗易懂]calc()函数属于CSS3版本内容,用于动态计算长度值。例如:width:calc(100%-10px);需要注意的是,运算符前后都需要保留一个空格。calc()函数支持”+”,”-“,”*”,”/”运算;举例,给一个div动态设置宽度如下:#divBox{position:absolute;left:50px;width:calc(100%-100p…

大家好,又见面了,我是你们的朋友全栈君。

calc() 函数属于CSS3版本内容,用于动态计算长度值。例如:width: calc(100% - 10px);需要注意的是,运算符前后都需要保留一个空格。calc()函数支持 “+”, “-“, “*”, “/” 运算;

举例,给一个div动态设置宽度如下:

#divBox { position: absolute; left: 50px; width: calc(100% – 100px); border: 1px solid black; background-color: yellow; padding: 5px; text-align: center; }

 

vh,是指css中相对长度单位,表示相对视口高度(Viewport Height),1vh = 1% * 视口高度。

视口比例长度定义了相对于视口的长度大小,这是文档的可见部分。

通俗点讲,vh就是当前屏幕可见高度的1%,也就是说  height:100vh == height:100%;

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/135418.html原文链接:https://javaforall.net

(0)
上一篇 2022年6月5日 上午10:00
下一篇 2022年6月5日 上午10:16


相关推荐

  • idea取消coverage

    idea取消coverageidea 中误点了 debugger 运行旁边的 runwithcover 解决办法

    2026年3月18日
    4
  • webstorm永久激活码【中文破解版】

    (webstorm永久激活码)2021最新分享一个能用的的激活码出来,希望能帮到需要激活的朋友。目前这个是能用的,但是用的人多了之后也会失效,会不定时更新的,大家持续关注此网站~IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.net/100143.html…

    2022年3月28日
    77
  • Oracle恢复某个时间之前的数据「建议收藏」

    Oracle恢复某个时间之前的数据「建议收藏」如果数据进行的误删除,我们需要回到删除之前的数据,可以进行恢复操作。第一步:查询这个时间点的数据查询这个时间点的数据,看是否是自己需要的数据。select*fromtablenameasoftimestampto_timestamp(‘2018-05-0413:30:00′,’yyyy-MM-ddhh24:mi:ss’)第二步:核对数据库系统时间有可能因为系统时间和数据库时间不一致查不出数据所以先查询数据库的时间。selectto_char(sysdate,’yyyy-

    2022年7月17日
    21
  • 【iCore4 双核心板_ARM】例程二十二:LWIP_UDP实验——以太网数据传输

    【iCore4 双核心板_ARM】例程二十二:LWIP_UDP实验——以太网数据传输

    2022年3月7日
    84
  • 记一次SpringBootTest报错AbstractMethodError

    记一次SpringBootTest报错AbstractMethodError文章目录注解@SpringBootTest遇到的问题Pleasesetthe’defaultServletName’propertyexplicitly.JavaAbstractMethodError原因分析最终解决办法做开发,大多数的时间是在人云亦云,尤其是在遇到了问题之后——在百度、CSDN上没有方向地搜索。一旦遇到这样的情况,从基础的文档看起,往往屡试不爽。注解@SpringBootTest@SpringBootTest下的属性:property说明cla

    2022年5月25日
    62
  • 原码 反码 换算工具 补码_原码/反码/补码在线计算器

    原码 反码 换算工具 补码_原码/反码/补码在线计算器原码 反码 补码计算器 在线计算给定整数的原码 反码 补码 原码 反码和补码的概念对于一个数 计算机要使用一定的编码方式进行存储 原码 反码 补码是机器存储一个具体数字的编码方式 原码 原码就是早期用来表示数字的一种方式 一个正数 转换为二进制位就是这个正数的原码 负数的绝对值转换成二进制位然后在高位补 1 就是这个负数的原码 举例 int 类型的 3 的原码是 11B B 表示二进制位

    2026年3月26日
    2

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号