length
length 数据类型表示长度值。
绝对单位
px- 像素cm- 厘米mm- 毫米in- 英寸pt- 磅pc- 派卡
相对单位
em- 相对于字体大小rem- 相对于根元素字体大小ex- 相对于 x-heightch- 相对于数字 0 的宽度vw- 视口宽度的百分比vh- 视口高度的百分比vmin- 视口较小维度的百分比vmax- 视口较大维度的百分比
示例
css
/* 像素 */
.element {
width: 200px;
height: 100px;
}
/* em */
.element {
font-size: 1.5em;
padding: 2em;
}
/* rem */
.element {
font-size: 1.2rem;
margin: 1rem;
}
/* 百分比 */
.element {
width: 50%;
height: 80%;
}
/* 视口单位 */
.element {
width: 100vw;
height: 100vh;
}
/* calc() 计算 */
.element {
width: calc(100% - 50px);
}