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


相关推荐

  • python if else语句_python if else用法

    python if else语句_python if else用法本文介绍了常见的if语句的各种用法

    2022年9月25日
  • 【Redis】集群

    【Redis】集群【Redis】集群

    2022年4月25日
  • java 函数式编程(java自定义函数)

    以前写过一篇java8的流操作,人们都说流操作是函数式编程,但函数式编程是什么呢?什么是函数式编程什么是函数式编程?它是一种编程范式,即一切都是数学函数。函数式编程语言里也可以有对象,但通常这些对象都是恒定不变的——要么是函数参数,要什么是函数返回值。函数式编程语言里没有for/next循环,因为这些逻辑意味着有状态的改变。相替代的是,这种循环逻辑在函数式编程语言里是通过递归、把函…

    2022年4月18日
  • ES6基础:箭头函数

    ES6基础:箭头函数ES6基础系列(三)箭头函数简要分析一个为什么会有箭头函数,它的意义是什么?

    2022年6月15日
  • javaint转化为string_java jsonobject转string

    javaint转化为string_java jsonobject转string1、String转化为JsonObject格式的数据。主要代码如下:JsonReaderjsonReader=Json.createReader(newStringReader(str));JsonObjectz =jsonReader.readObject();  //或者 this.jobj=jsonReader.readObject();  例如:有一

    2022年8月23日
  • SSM整合Activiti工作流[通俗易懂]

    SSM整合Activiti工作流[通俗易懂]学完Activiti所有的知识点了,现在可以用一个小项目实战一下。本来自己想写一个简单点的流程,但是发现项目太小有些知识点用不上,所有就写了一个流程比较长、复杂点。把我前面博客中写的知识点多用上了,也巩固一下前面所掌握的。通过首先介绍一下项目的流程:1.员工发起请假申请——>项目组长进行初步审批——>就进入并行网关未通过就直接结束流程2.并行网关:…

    2022年5月3日

发表回复

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

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