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


相关推荐

  • Java零基础好学吗?Java该怎么学?

    Java零基础好学吗?Java该怎么学?Java零基础好学吗?Java该怎么学?在IT行业中,Java开发工程师是一个很吃香的职业,薪资水平也是几乎过万,许多人想转行Java开发,但又担心零基础能不能学会,学起来有多难,如果是零基础自学Java的话是比较困难的,学Java难不难取决于学习方法的选择和努力程度。今天就来讲讲Java零基础好学吗?Java该怎么学?Java学习路线:第一阶段:Java基础语法内容:运行环境、关键字、数据类型、运算符、方法、条件结构、循环结构、方法重载、数组。第二阶段:面向对象和封装内容:面向对象、thi

    2022年7月7日
    25
  • 最小二乘法原理和推导过程「建议收藏」

    最小二乘法原理和推导过程「建议收藏」对于有误差的统计值,我们一般都是采用均值作为使用值。但是这种使用均值代替的方式是不是合理?为什么不用中位数、几何平均数什么的?这需要一个解释。1.什么是二乘?对于一列数字,比如10.1、…

    2022年5月17日
    58
  • redhat7.4配置本地yum源_centos7yum源的配置

    redhat7.4配置本地yum源_centos7yum源的配置1.定位到yum的配置文件[root@linuxprobe~]#cd/etc/yum.repos.d/2.查看是否有配置文件[root@linuxprobeyum.repos.d]#ls3.检查yum是否安装,以及安装了哪些依赖源并删除yum包[root@linuxprobeyum.repos.d]#rpm-qa|grepyum显示如下(根据各自情况,有可能不…

    2022年8月13日
    3
  • JDK1.8下载安装(Windows版)

    JDK1.8下载安装(Windows版)官网下载JDK在oracle上的下载地址:https://www.oracle.com/technetwork/java/javase/downloads/index.html,根据自己的需要,我这儿选择的是“JavaSE8u201/JavaSE8u202”,点击【JDK-DOWNLOAD】,打开第二张截图,如图选择接受,然后下载“JavaSEDevelopmentKit…

    2022年7月16日
    19
  • VM虚拟机安装教程_ghost手动安装教程

    VM虚拟机安装教程_ghost手动安装教程VMware最新官方下载与安装目录一、VMware官方下载二、虚拟机安装一、VMware官方下载首先我们访问官网地址https://www.vmware.com/cn.html注意:没有账号必须先注册才能下载。注册页面https://my.vmware.com/cn/web/vmware/registration注册完账号后进行以下步骤:如图,选择下载专…

    2022年10月1日
    4
  • SSRF漏洞总结

    SSRF漏洞总结0x00什么是SSRF?服务端请求伪造(SSRF)是指攻击者能够从易受攻击的web应用程序发送精心设计的请求,对其他网站进行攻击(利用一个可发起网络请求的服务当做跳板来攻击其他服务)例如:我在http://localhost:8888/pentest/ssrf/index.php有这样一个存在SSRF漏洞的index.php。即我得到了一个使用curl发起网络请求然后返回客户端并且我可以…

    2022年6月25日
    30

发表回复

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

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