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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 找到占用CPU最高的Java线程[通俗易懂]

    找到占用CPU最高的Java线程

    2022年3月13日
    44
  • idea2021.1.3激活码永久_在线激活

    (idea2021.1.3激活码永久)最近有小伙伴私信我,问我这边有没有免费的intellijIdea的激活码,然后我将全栈君台教程分享给他了。激活成功之后他一直表示感谢,哈哈~IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.net/100143.html…

    2022年3月27日
    1.1K
  • HQL的左连接_左连接与右连接的区别

    HQL的左连接_左连接与右连接的区别最近做一个查询实现把一个表的记录全部显示出来并且显示关联的另外一个表的记录,这当然谁都知道要用到外连接查询,然而过程并不愉快。在Hibernate的映射文件中配置好关联关系之后,查询的时候可以直接使用比如selectnewmap(student.studentIDasstudentID,student.studentAccountasstudentAccount,student.stu

    2025年11月26日
    5
  • html中超链接使用_html中的a标签,超链接代码的详细介绍「建议收藏」

    html中超链接使用_html中的a标签,超链接代码的详细介绍「建议收藏」欢迎关注支持,谢谢!今天为大家介绍的是超链接代码a标签的用法,大家有兴趣的话可以看看哟!随着互联网的发展,网站的兴起,超链接随处可见。我们使用电脑或手机上网,能够穿梭在各个网页之间,都是通过超链接实现的。超链接就像通向另一个“世界”的桥梁,我们可以通过它到达另一个“世界”。接下来我们就来学习一下网页中的超链接到底是什么东西。连接一、什么是超链接超链接属于网页的一部分,它是让网页和网页连接的元素。…

    2022年7月13日
    16
  • 弗洛伊德算法怎么理解_弗洛伊德算法思想

    弗洛伊德算法怎么理解_弗洛伊德算法思想这个方法中,其中每一个顶点到另一个顶点最多就是两步。所以就是找到两个顶点的最近距离packagea;importjava.lang.reflect.Array;importjava.util.Arrays;publicclassFloydDemo{publicstaticvoidmain(String[]args){char[]di…

    2025年8月12日
    3
  • oracle的游标 sql语句,sql游标

    oracle的游标 sql语句,sql游标sql游标游标的类型:1、静态游标(不检测数据行的变化)2、动态游标(反映所有数据行的改变)3、仅向前游标(不支持滚动)4、键集游标(能反映修改,但不能准确反映插入、删除)游标使用顺序:1、定义游标2、打开游标3、使用游标4、关闭游标5、释放游标Transact-SQL:declare游标名cursor[LOCAL|GLOBAL][FORWARD_ONLY|SCROLL][STATI…

    2022年7月27日
    5

发表回复

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

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