【CSS】绝对单位和相对单位【CSS】绝对单位和相对单位

文章图片
vh 【【CSS】绝对单位和相对单位】http://www.css88.com/book/css/values/length/vh.htm
vw http://www.css88.com/book/css/values/length/vw.htm
rem http://www.css88.com/book/css/values/length/rem.htm

进一步探讨单位 CSS 中的单位有很多，这里主要介绍目前常用的及未来必备的几个单位。
px px 是 pixels（像素）的缩写，是一种相对单位
http://www.css88.com/book/css/values/length/px.htm
下面我们使用 px 单位设置下元素的大小，如下：

.box{
width:200px;
font-size:16px;
}

% %（百分比）应该是我们最好理解的单位了，这里就不多解释了，主要有一点需要注意：
如果对 html 元素设置 font-size 为百分比值，则是以浏览器默认的字体大小16px为参照计算的（所有浏览器的默认字体大小都为 16px），如62.5%即等于10px（62.5% * 16px = 10px）。
em em 也是一种相对单位，既然是相对单位，那么肯定有一个参照值。不过其参照值并不是固定不变的，而是不同的属性有不同的参照值。
font-size 对于字体大小属性（font-size）来说，em 的计算方式是相对于父元素的字体大小，1em 等于父元素设置的字体大小。如果父元素没有设置字体大小，则继续往父级元素查找，直到有设置大小的，如果都没有设置大小，则使用浏览器默认的字体大小。
下面我们举几个简单的例子说明下：

.parent{
font-size:14px;
}.
child1{
font-size:1em; /* 1em = 1*14px*/
}
.child2{
font-size:1.5em; /* 1.5em = 1.5*14px */
}
/* 父级元素都没有设置大小的 */
.no-parent-font-size{
font-size:0.8em; /* 0.8em = 0.8*16px */
}

其他属性（border, width, height, padding, margin, line-height）在这些属性中，使用em单位的计算方式是参照该元素的 font-size，1em 等于该元素设置的字体大小。同理如果该元素没有设置，则一直向父级元素查找，直到找到，如果都没有设置大小，则使用浏览器默认的字体大小。
下面我们举几个简单的例子说明下：

p{
font-size:14px; width:20em; /* 20em = 20*14px */
padding:1.5em; /* 1.5em = 1.5*14px */
}
/* 元素本身没有设置字体大小且父级元素也没有设置 */
.no-font-size{width:40em; /* 40em = 40*16px */
margin-bottom:2em; /* 2em = 2*16px */
}

总之em的计算单位相对来说比较复杂，现在已经不建议使用，如果你要兼容的浏览器是现代浏览器的话，那么可以使用下面要介绍的 rem 单位。
rem 和 em 一样，rem 也是一种相对单位，不过不一样的是 rem 是相对于根元素 html 的 font-size 来计算的，所以其参照物是固定的。（rem的r就是表示root，虽然rem相对em进步了很多，但是由于是新技术，不支持IE8以下（包括IE8）,不过幸喜的是移动端可以放心使用）
由于 rem 是基于跟元素 html 的 font-size 来计算的，所以如果改变 html 的 font-size 值，那么所有使用的 rem 单位的大小都会随着改变，这对于移动端适应各种屏幕大小来说还是有点作用的。

html{
font-size:625%; /* 相当于100px = 625% * 16px */
}
div{
font-size:20px; width:2rem; /* 2rem = 2 * 100px(根元素的font-size) */
height:4rem; /* 4rem = 4 * 100px(根元素的font-size) */
padding:0.1rem; /* 0.1rem = 0.1 * 100px(根元素的font-size) */
}

如果我们改变了 html 的 font-size 值，如设置为 80px，则相应的我们的 div 的 width，height 和padding 大小也随着改变了。
相对于 em 来说，rem 只需要修改 html 的 font-size 值即可达到全部的修改，即所谓的牵一发而动全身。
vw, vh, vmin, vmax 最后要介绍的这四个单位属于 v 系单位，它们也是相对单位，是基于视窗大小（浏览器用来显示内容的区域大小）来计算的。
网页中我们很多时候都需要用到满屏，或者屏幕大小的一半等，尤其是移动端，屏幕大小各式各样，而这个时候我们现有的单位就显得有点捉襟见肘，于是就诞生了这四个单位。
vw：基于视窗的宽度计算，1vw 等于视窗宽度的百分之一
vh：基于视窗的高度计算，1vh 等于视窗高度的百分之一
vmin：基于vw和vh中的最小值来计算，1vmin 等于最小值的百分之一
vmax：基于vw和vh中的最大值来计算，1vmax 等于最大值的百分之一
下面我们实例说明实现一个宽度为视窗宽度的 25%，高度为视窗高度 50% 的一个盒子：