常用的布局单位包括像素（px），相对父元素

(1)像素(px)是页面布局的基础。 像素代表终端（电脑、手机、平板等）屏幕上可以显示的最小区域。 像素分为两种：CSS像素和物理像素：

1.CSS像素：作为CSS中使用的抽象单位提供给Web开发人员；

2.物理像素：仅与设备的硬件密度有关。 任何设备的物理像素都是固定的。

(2) 百分比（%）。 当浏览器的宽度或高度发生变化时，可以利用百分比单位，使浏览器中的组件的宽度和高度随着浏览器的变化而变化，从而达到响应式的效果。 一般认为子元素的百分比是相对于直接父元素而言的。

(3)em和rem比px更灵活。 它们都是相对长度单位。 它们的区别是：em是相对于父元素，rem是相对于根元素。

1.em：相对文本长度单位。 相对于当前对象内文本的字体大小。 如果当前内联文本的字体大小没有手动设置，它将相对于浏览器的默认字体大小（默认16px）。 （相对于父元素的字体大小的倍数）。

2.rem：rem是CSS3中新的相对单位，它是根元素（html元素）font-size的倍数。 功能：使用rem实现简单的响应式布局。 可以利用html元素中字体大小与屏幕的比例来设置font-size值，这样元素就会随着屏幕分辨率的变化而变化。

(4)vw/vh是与视图窗口相关的单位。 vw表示相对于视图窗口的宽度，vh表示相对于视图窗口的高度。 除了vw和vh之外，还有两个相关的单位：vmin和vmax。

1.vw：相对于窗口的宽度，窗口的宽度为100vw；

2.vh：相对于窗口的高度，窗口的高度为100vh；

3.vmin：vw和vh中较小的值；

4.vmax：vw和vh中的较大值；

vw/vh 与百分比非常相似。 两者的区别在于：

1、百分比（%）：多是相对于祖先元素，也有相对于自身的，如（-等）

2.vw/vm：相对于窗口大小