长度单位
- 像素
不同屏幕的像素大小是不同的，像素越小屏幕显示的效果越清晰
所以同样的200px在不同的设备下显示的效果不一样 - 百分比：
百分比可以设置属性相对于其父元素属性的百分比
<style>
.one{
width:200px;
height:200px;
background-color:black;
}
p{
width:50%;
height:50%;
background-color:aqua;
}
</style>
<body>
<div class="one">
<p>Surymy</p>
</div>
</body>
- em
是相对于元素的字体大小来计算的
1 em = 1 font-size(16px)
em会根据字体大小的改变而改变：1em = 10*字体大小
<style>
.two{
font-size:20px;
width:10em;
height:10em;
background-color:blueviolet;
}
</style>
<body>
<div class="two"></div>
</body>
计算过程：
因为1em = 1font-size，所以10 em就相当于10font-size，而这里的font-size = 20px
所以最终大小10em = 10*20px = 200px就生成了和上边200px相同的大小的方框：
- rem
也是相对于元素的字体大小来计算的
不同的是rem是根据根元素html的改变而改变的
<style>
.two{
font-size:20px;
width:10rem;
height:10rem;
background-color:blueviolet;
}
html{
font-size:40px;
}
</style>
</head>
<div class="two"></div>
</body>
这里的计算和上边一样。唯一不同的地方是字体的大小换成了html的字体大小40px
所以最终的方框会变大一倍
