Css之使用calc()计算宽高（vw/vh）

一、calc()的用途

主要用于计算不确定值

二、vw和vh的定义

vw、vh、vmin、vmax是一种视窗单位，也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗（Viewport）大小来决定的，单位 1，代表类似于 1%。视窗(Viewport)是你的浏览器实际显示内容的区域，换句话说是你的不包括工具栏和按钮的网页浏览器。

具体描述如下：

vw：视窗宽度的百分比（1vw 代表视窗的宽度为 1%）
vh：视窗高度的百分比
vmin：取当前vw和vh中较小的那一个值
vmax：取当前vw和vh中较大的那一个值

三、vw、vh 与 % 百分比的区别

（1）% 是相对于父元素的大小设定的比率，vw、vh 是视窗大小决定的。

（2）vw、vh 优势在于能够直接获取高度，而用 % 在没有设置 body 高度的情况下，是无法正确获得可视区域的高度的，所以这是挺不错的优势。

四、vw、vh用法示例

width: -moz-calc(100vw - (2 * 10)px);
width: -webkit-calc(100vw -(2 * 10)px);
width: calc(100vw - (2 * 10)px);

height: -moz-calc(100vh - (2 * 10)px);
height: -webkit-calc(100vh - (2 * 10)px);
height: calc(100vh - (2 * 10)px);

Css之使用calc()计算宽高（vw/vh）相关推荐

css3中使用calc()计算宽高
calc()是什么? 是CSS3中新增的一个函数,calculate(计算)的缩写.用于动态计算宽/高,你可以使用calc()给元素的各个属性设置值[margin.border.padding.fon ...
移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 )
序言:应朋友要求随手写了一下移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 ) ,以备后用 LESS代码: .adaptive-circle {margin: 50px auto 0;w ...
使用css的calc() 函数计算宽高
茫茫人海中我还是只看到了你. 什么是calc()? calc() 函数用于动态计算长度值. 需要注意的是,运算符前后都需要保留一个空格,例如:width: calc(100% - 10px): 任何长 ...
css单位计算方法,CSS中的calc()计算和vw/vh长度单位
calc() CSS中除了使用具体的值,还可以使用calc()方法来执行一些计算. 语法 /* property: calc(expression) */ width: calc(100% - 60p ...
css实现九宫格，不定宽高百分比（使用padding实现Div高度根据自适应宽度（百分比）调整）
css实现九宫格,但不一定有9个,可能有8个.7个,每两个格子间距是10px,一行放置3个格子,格子宽高比为1:2(最右的面试题) <div class="box">& ...
编写css让一个已知宽高的div元素水平居中？垂直居中
让一个已知宽高的div元素水平居中 <style> #div1{ width:200px; height:200px; background:#F00; margin:0 auto; } ...
css background-image 背景图片自适应宽高
背景图片与标签宽高保持一致: div {background-image: url('路径'); background-repeat:no-repeat;background-size:100% 10 ...
css单位介绍em ex ch rem vw vh vm cm mm in pt pc px
长度单位主要有以下几种em ex ch rem vw vh vm cm mm in pt pc px %,大概可以分为几种"绝对单位"和"相对单位"和" ...
css 行内元素设置宽高
有2中实现方法: 1.设置display:block inline-block,使其width属性生效 2.如果设置float:left | right, 使其width属性生效. (浮动)使得指 ...