CSS学习（1）CSS单位

前言

• px和em的区别

CSS 中有哪些单位

单位分为两类，绝对长度单位和相对长度单位。

绝对长度单位

• cm：厘米
• mm：毫米
• in：英寸
• px：像素（在屏幕上显示的最小单位）
• pt：点（常用于打印媒体）
• pc：皮片（12点活字）

相对长度单位

• %：百分比
• em：当前元素的字体大小。如果用于font-size，则是父元素的大小。
• rem：根元素的字体大小。
• ex：当前字体中小写字母"x"的高度。
• ch：数字0的宽度。
• vw：视口宽度的百分比。
• vh：视口高度的百分比。
• vmin：视口宽度和高度中较小的那个百分比。
• vmax：视口宽度和高度中较大的那个百分比。

/* 绝对长度单位 */
p {
    width: 150px;
    height: 200mm;
}

/* 相对长度单位 */
h1 {
    font-size: 1.5em; /* 父元素的字体大小的1.5倍 */
}

/* 百分比单位 */
div {
    width: 80%;
    height: 50%;
}

/* 视口宽度的百分比 */
section {
    width: 50vw;
    height: 30vw;
}

总结

• px和em的区别

px即pixel像素，是相对于屏幕分辨率而言的，是一个绝对单位，但是具有一定的相对性。因为在同一设备 上每个设备像素所代表的物理长度是固定不变的(绝对性)，但在不同设备间每个设备像素所代表的物理长 度是可以变化的(相对性)。

em是相对长度单位，当前元素的字体大小。如果用于font-size，则是父元素的大小。