css单位计算方法,CSS中的calc()计算和vw/vh长度单位

calc()

CSS中除了使用具体的值，还可以使用calc()方法来执行一些计算。

语法

/* property: calc(expression) */

width: calc(100% - 60px);

calc()函数用一个表达式作为参数，用表达式的结果作为值。

表达式的运算对象可以使用任意长度值，并且可以混用(px/em)，也可以通过小括号()来调整计算顺序。

表达式中可以使用+|-|*|/操作符来操作运算对象来得到结果。

请注意，+和-运算符的两边必须要有空白字符，否则为无效值，虽然*和/运算符不要求，但是为了统一，最好也加上空格。

calc()支持变量嵌套，语法如下:

.var {

--var1: 80px;

--var2: calc(var(--var1) / 2);

--var3: calc(var(--var2) / 2);

width: var(--var3); /* 80px/2/2 = 20px */

}

用途

主要用于计算不确定值，比如要定义一个父元素size不确定的，margin为2em宽度为100%的子元素。如果用以下方式定义，则会发生溢出的情况

.block{

width: 100%;

margin: 2em;

}

通过calc()就可以很方便的定义出来

.block{

width: calc(100% - 4em);

margin: 2em;

}

vw/vh长度单位

vm/vh是CSS的相对长度单位。

与百分比%很类似都是相对长度单位，两者的主要区别是，vw/vh是相对于浏览器可视窗口viewport的，而%是相对于父元素大小的，如果父元素大小不固定，设置%是没有意义的，但是浏览器可视窗口大小是一直可用的。

什么是viewport

视口(viewport)代表当前可见的计算机图形区域。在Web浏览器术语中，通常与浏览器窗口相同，但不包括浏览器的 UI，菜单栏等——即指你正在浏览的文档的那一部分。

值得注意的是页面中的一些导航菜单也包括在其中。Viewport外的区域，可能需要滚动到其所在的区域才会出现在屏幕上。

概括地说，viewport基本上是当前文档的可见部分/浏览器可视区域。

相对窗口Size的长度单位

有4个相对于窗口Size的长度单位:

单位

相对于

视窗宽度的1%

视窗高度的1%

vmin

视窗较小尺寸的1%(vw/vh较小的值)

vmax

视图大尺寸的1%(vw/vh较大的值)

结合使用

之所以把calc和vw/vh放在一起介绍，主要原因就是两者经常结合起来一起使用。

比如要定义一个左测宽度固定的横向两列布局，就可以用以下代码实现(当然这个需求有n多实现方式，比如float/flex等)

body {

margin: 0;

padding: 3px;

overflow: hidden;

}

.left {

width: 200px;

height: calc(100vh - 6px);

display: inline-block;

}

.right {

width: calc(100vw - 206px);

height: calc(100vh - 6px);

display: inline-block;

}

css单位计算方法,CSS中的calc()计算和vw/vh长度单位相关推荐

css单位计算方法,CSS中的单位和百分比计算
CSS中的单位和百分比计算发布时间:2020-05-23 15:53:59 来源:亿速云阅读:217 作者:鸽子 CSS中的单位绝对单位 in-英寸: cm; mm; pt-磅相对单位 em- ...
css3中使用calc()计算宽高
calc()是什么? 是CSS3中新增的一个函数,calculate(计算)的缩写.用于动态计算宽/高,你可以使用calc()给元素的各个属性设置值[margin.border.padding.fon ...
CSS 单位及其需要注意的地方
CSS 单位及其需要注意的地方 px(Pixel):绝对长度单位,绝对像素值,它取决于显示器的分辨率.一旦分辨率确定,设置为 px 的尺寸就成为固定尺寸,不会自动缩放.(1px = 1/96 英寸) ...
移动端适配方案(rem和vw vh适配)(css预处理器-less)
适配方案: 目前移动端适配方案有两种: 1.flex+rem单位当前市面上用的比较多相对主流(比如小米和淘宝移动端) 2.flex+viewport width/viewport height(v ...
css3的vw单位,vh单位的讲解，以及vw vh的兼容性
vw vh的介绍 vw,vh是css3中给我们提供的新的单位,他们是相对于viewport视窗的宽高进行计算的单位.说白了,就是相对于浏览器的窗口的大小. vw单位 vw是相对于视窗宽度的单位, 1v ...
vw 前端_css3的vw单位,vh单位的讲解，以及vw vh的兼容性
vw vh的介绍 vw,vh是css3中给我们提供的新的单位,他们是相对于viewport视窗的宽高进行计算的单位.说白了,就是相对于浏览器的窗口的大小. vw单位 vw是相对于视窗宽度的单位, 1v ...
CSS中的常见单位（px,%,em,rem,vw,vh,vmax,vmin,calc)
像素(px)&百分比(%) 像素(Pixel) 长度单位,相对于显示器屏幕分辨率而言,通常在不定义显示缩放比例的情况下,1px对应显示器屏幕上的一个像素点. 早年的pc端展示的页面基本都用这个 ...
前端css单位小结：vh、vw、百分比、rem、px、计算属性calc
写在前面: 本文作为本人学习总结之用,同时分享给大家~ 个人前端博客网站:zhangqiang.hk.cn 欢迎加入博主的前端学习qq交流群::706947563,专注前端开发,共同学习进步! 前端c ...
rem css calc,关于使用rem单位、css函数calc()进行自适应布局
一.关于css中的单位大家都知道在css中的单位,一般都包括有px,%,em等单位,另外css3新增加一个单位rem. 其中px,%等单位平时在传统布局当中使用的比较频繁,大家也比较熟悉,不过px单 ...

css单位计算方法,CSS中的calc()计算和vw/vh长度单位

css单位计算方法,CSS中的calc()计算和vw/vh长度单位相关推荐

最新文章

热门文章