前端css单位小结：vh、vw、百分比、rem、px、计算属性calc

写在前面：

• 本文作为本人学习总结之用，同时分享给大家~
• 个人前端博客网站：zhangqiang.hk.cn
• 欢迎加入博主的前端学习qq交流群：：706947563，专注前端开发，共同学习进步！

前端css单位小结：vh、vw、百分比、rem、px、计算属性calc

1 vh

视口的高度，也就是眼睛可以看到屏幕的高度，如果你的屏幕分辩率为1920*1080，那么视口的高度就是1080px，vh可用于写自适应。一般给css div 的 height赋值用。

2 vw

与vh相对的，视口的宽度，同理，如果你的屏幕分辩率为1920*1080，那么视口的宽度就是1080px，vw可用于写自适应。一般给css div的width赋值用。

3 百分比

这里需要注意的是，百分比是继承的是父级元素的高与宽，如果父级元素没高宽，那么百分比就是无效的。百分比也可以用于自适应布局。

4 rem

根据根元素来变化大小，如果在根元素设置10px，那么1rem=10px。亦可用于自适应布局。

5 px

固定的像素点，虽然这个没办法自适应，但是，天下武功，为快不破，px可以很精确，是自适应比不了的，当我在做一些很精确的页面时，必然得用px来控制。有时候在自适应的布局下，边框线通常用px来设定，比如1px啥的。

6 计算属性calc

height: calc(~'100% - 7.4rem - 10px');

这就是计算属性咯。可以计算出当前的值，然后再赋值。