CSS长度描述

多久没有好好整理css知识了，这篇css3作为css的开山大篇，我希望这是一个好的开始…

cals()

概述

cals()是作为长度单位的属性值来使用的。主要用来在css中计算长度属性。

示例

/*用100%减去左右两个20px的padding和2px的border*/
width：calc(100% - (20px + 2px) * 2);

要点总结

• 兼容性：在IE9+、FF4.0+、Chrome19+、Safari6+支持较好，移动端支持不理想；
• 表达式支持加、减、乘、除运算，同时也支持单位的混合使用（%、px、em等）;
• 表达式中有“+”，“-”运算符的，前后必须要有空格。

长度单位

em

说明

相对长度单位。相对于当前对象内文本的字体尺寸（建议全部都用rem来代替）。

使用场景

• 整体页面尺寸随着字体尺寸的变化而变化。
• 给页面设置整体的左右边距，个人感觉比用百分比要好些。

ex

说明

相对长度单位。相对于字符“x”的高度。通常为字体高度的一半。

使用场景

• 当我们需要设置一段文字，超过两行就省略后面的字符，这时候用ex限制容器元素的高度。

rem

说明

相对长度单位。相对于根元素(即html元素)font-size计算值的倍数（与em的差别只在它们的参照尺寸不一样）。

使用场景

建议用rem来代替em。

vm

说明

相对于视口的宽度。视口被均分为100单位的vw。

区别百分比

两者相对的对象不一样。百分比相对窗口（不含滚动条），vm相对视口（含滚动条）。

使用场景

按需加载，滚动条由无变有时会有页面的跳动问题，解决方案如下：

.wrap-outer {
margin-left: calc(100vw - 100%);
}
/* 或者 */
.wrap-outer {
padding-left: calc(100vw - 100%);
}