常见的css布局单位_css 布局单位

在css单位中，可以分为相对长度单位、绝对长度单位，如下表所示：

这里我们主要讲述px、em、rem、vh、vw

1.px(像素)

 绝对长度单位，像素（px）是页面布局的基础，一个像素表示终端（电脑、手机、平板等）屏幕所能显示的最小的区域，不会随浏览器页面大小的变化而变化。

2.%(百分比)

相对长度单位，子元素占直接父元素的百分比。会随着父元素的宽度或者高度发生变化而变化。

3.em

相对长度单位，相对于当前对象内文本的字体尺寸，会继承父级元素的字体大小。如果当前行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸(默认16px)。(相对父元素的字体大小倍数)。

4.rem

相对长度单位，rem是CSS3新增的一个相对单位，相对于根元素（html元素）的font-size的倍数。

场景应用：利用rem可以实现简单的响应式布局，可以利用html元素中字体的大小与屏幕间的比值来设置font-size的值，以此实现当屏幕分辨率变化时让元素也随之变化。

扩展：在项目中使用可以引入其他库来转化rem与px

vue2移动端商城开发环境的搭建

5.vh/vw

相对长度单位

vw：表示视口的宽度，我们把视口分成100份，1vw就表示当前视口宽度的百分之一；

vh：表示视口的高度，1vh就表示当前视口高度的百分之一；

应用场景：主要用于页面视口大小布局，在页面布局上更加方便简单。