写在前面:
- 本文作为本人学习总结之用,同时分享给大家~
- 个人前端博客网站: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');
这就是计算属性咯。可以计算出当前的值,然后再赋值。