CSS的一些单位
你确定,EM是相对于父元素的大小?
在我们写样式修饰的时候,长度单位像PX、EM、REM是我们常用的。那么它们有什么不同的地方呢?
1、PX
像素。相对长度单位,相对于显示器的屏幕分辨率的大小
- IE无法调整那些使用px作为单位的字体大小
- 国外大部分的网站能够调整的原因在于其使用了em或者rem作为字体大小
2、em
em相对长度单位 相对于当前对象内的文本字体大小尺寸
- 参考物是父元素的font-size
- 当前父元素没有设置字体尺寸 ,相对于浏览器的默认字体大小
- em的值不是固定的
- em会继承父级元素的字体大小
3、rem
rem是css3新增的一个相对单位,rem是相对于HTML根元素的字体大小的长度单位
- 优点 只需要设置根目录的大小就可以把整个页面的的比例调好
- 兼容性 ie8 更早的版本
4、vw、vh
vw、vh、vmax、vmin 这四个单位基于视口
vw是相对视口的宽度而定的 长度等于视口宽度的1/100
vh是相对视口(viewport)的高度而定的,长度等于视口高度的1/100
5、%(百分比)
一般来说就是相对于父元素
1、对于普通定位元素就是我们理解的父元素
2、对于position: absolute;的元素是相对于已定位的父元素
3、对于position: fixed;的元素是相对于ViewPort(可视窗口)
6、vm
css3新单位,相对于视口的宽度或高度中较小的那个
其中最小的那个被均分为100单位的vm
比如:浏览器高度900px,宽度1200px,取最小的浏览器高度,1 vm = 900px/100 = 9 px
缺点:兼容性差
相关推荐
Ladyseven 2020-09-11
芯果科技蔡彦 2020-04-30
zhanghao 2019-12-21
LiybSunshine 2019-11-08
淡风wisdon大大 2019-11-04
sxaudq0 2019-10-27
Dmagic 2019-10-26
TemplarAssassin 2017-09-16
lqadam 2018-06-12
bistukey 2019-07-01
覆雪蓝枫 2019-07-01
tianzyc 2019-07-01
淡风wisdon大大 2019-06-30
Waittingforyou 2018-06-12
CoreyJia 2017-03-14
wcssdu 2019-06-27
Miryou 2019-06-27
Irelia 2019-06-26
lzxy 2019-06-25