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


相关推荐

  • 【MYSQL】如何下载mysql驱动jar包

    【MYSQL】如何下载mysql驱动jar包进入官网https://www.mysql.com/点击DOWNLOADS然后拉到最下面,点击MySQLCommunity(GPL)Downloads然后选择Connector/J,这里的J是Java的意思这里如果是windows用户的话,选择PlatformIndependent,如果是其他用户就选其他版本点击Download…

    2022年5月21日
    1.5K
  • postman接口测试-参数化「建议收藏」

    postman接口测试-参数化「建议收藏」有一段时间没接触postman了,再次打开postman时,已经忘得差不多。。。在此,记录下postman的一些用法,方便以后需要一、参数化如:购物车接口,需要用到登录接口返回的token1.登录接口,在Tests里面设置usertoken环境变量,用来保存token值。2.获取购物车接口使用usertoken变量二、批量参数化如:搜索接口,需要搜索“测试”、“爱心”、“A”、“123”等关键字1…

    2022年6月26日
    30
  • Object-c @property的用法

    Object-c @property的用法

    2021年12月7日
    40
  • Idea2025.1.1.1激活码教程永久有效激活码绝对有效2025.1.1.1

    Idea2025.1.1.1激活码教程永久有效激活码绝对有效2025.1.1.1Idea 激活码教程永久有效 2025 1 1 1 激活码教程 Windows 版永久激活 持续更新 Idea 激活码 2025 1 1 1 成功激活

    2025年5月21日
    2
  • LAMP下HTTPS配置「建议收藏」

    LAMP下HTTPS配置「建议收藏」LAMP下HTTPS配置    LAMP下配置HTTPS非常简单,本文主要介绍ubuntu下apache配置https的具体步骤和流程,证书为服务器生成的本地证书,希望对大家有所帮助。证书:本地生成apache版本:Apache/2.4.7(Ubuntu)系统:Ubuntu14.04一、安装Apache$sudoapt-getinstallapache2使用此方式安装的APACHE,配置比…

    2022年6月5日
    28
  • 玩玩webgame开发(2):人物移动与战争迷雾实现

    玩玩webgame开发(2):人物移动与战争迷雾实现惯例,先上下效果图片:[img]/upload/attachment/47613/3b8e0d31-b9cc-3272-abbb-0941300a68ef.png[/img]在上一篇玩玩webgame开发(1)大概给出了jquery方式的地图实现,最近又做了一些改进,加进了更多元素。代码全部改成jquery插件的方式。有机会做专门的介绍。这次的主题主要是地图上面人物的移动以及战…

    2022年5月25日
    32

发表回复

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

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