常见的CSS布局单位

html-css053

常见的CSS布局单位,第1张

常用的布局单位包括像素（ px ），百分比（ % ）， em ， rem ， vw/vh 。

（1）像素 （ px ）是页面布局的基础，一个像素表示终端（电脑、手机、平板等）屏幕所能显示的最小的区域，像素分为两种类型：CSS像素和物理像素：

（2）百分比 （ % ），当浏览器的宽度或者高度发生变化时，通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果。一般认为子元素的百分比相对于直接父元素。

（3）em和rem 相对于px更具灵活性，它们都是相对长度单位，它们之间的区别： em相对于父元素，rem相对于根元素。

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

vw/vh 和百分比很类似，两者的区别：

作为一个小前端，最基本的布局应该已经是手到擒来的事情，但是在布局过程中，你是不是经常就使用px、%或者rem？其他的呢？你是否又熟悉？

下面就为同学们说一下css中可能会遇到的单位。

首先就从熟悉的开始：

第一种：px

px（像素）是CSS中最为常用的一种单位，传统上一个像素对应计算机屏幕上的一个点，对于高清屏则对应更多。

第二种：%

百分比也较为常用。其中对font-size设置百分比值时，是以浏览器默认字体大小16px为参照计算的。

第三种：em

em是一种计算方式为相对于父元素的字体大小的单位，1em等于父元素设置的字体大小，如果父元素没有设置字体大小，则继续往父元素查找，直到有设置大小的，若都没有设置大小，则使用浏览器默认大小。