一文读懂 CSS 单位

原副标题：该文看清楚 CSS 基层单位

高度关注

“JAVA爱家

”，与一百万开发人员在一同

公司出品 | 后端电池宝（ID：FE-Charge)

倘若转发请联络原社会公众号

讲起 CSS 基层单位，他们最常见的可能将是画素基层单位（px），它是一个当然基层单位，也是说两个10px的文本，放到这儿都是那样大的。基层单位能负面影响色调、距、体积等一连串的特性。CSS中基层单位的方式有很多种不同，上面就来自学呵呵 CSS 中基层单位！

1. 相较基层单位

相较基层单位是相较于另两个宽度的宽度。CSS中的相较基层单位主要就分成两类：

手写体相较基层单位，她们都是依照font-size来展开排序的。常见的手写体相较基层单位有：em、rem、ex、ch；

桌面相较基层单位，她们都是依照桌面大小不一来下定决心的。常见的桌面相较基层单位有vw、vh、vmax、vmin。

上面就来看一看那些常见的CSS基层单位。

（1）em 和 rem

em是最常见的相较宽度基层单位，适合基于特定的字号展开排版。依照CSS的规定，1em 等于元素的font-size特性的值。

em 是相较于父元素的手写体大小不一展开排序的。如果当前对行内文本的手写体体积未展开显示设置，则相较于浏览器的默认手写体体积。当DOM元素嵌套加深时，并且同时给很多层级显式的设置了font-size的值的基层单位是em，那么就需要层层排序，复杂度会很高。

当然，上面的这个说法是不严谨 的。来看两个例子：

<! DOCTYPEhtml>

< htmllang=” en“>

< head>

< metacharset=” UTF-8“>

< title> Document</ title>

< style>

.parent{

width: 300px;

height: 300px;

font-size: 20px;

}

.child{

border: 1emsolid ;

}

</ style>

</ head>

< body>

< divclass=” parent“>

< divclass=” child“>

子元素

</ div>

</ div>

</ body>

</html>

这里给父元素设置了手写体大小不一为20px，然后给子元素的border宽度设置为1em，这时，子元素的border值为20px，确实是相较于父元素的手写体大小不一设置的：

那如果他们给子元素的手写体设置为30px：

.child{

font-size: 30px;

border: 1emsolid ;

}

这时能看到，子元素的边框宽度是30px，它是相较自己大小不一展开排序的：

所以，能得出结论： 如果自身元素是没有设置手写体大小不一的，那么就会依照其父元素的手写体大小不一作为参照去排序，如果元素本身已经设置了手写体，那么就会基于自身的手写体大小不一展开排序。

em基层单位除了能作用于 font-size之外，还能运用于其他使用宽度的特性，比如border-width、width、height、margin、padding、text-shadow等。

所以，em的使用还是比较复杂的，它可能将会继承任意一级父元素的手写体大小不一。需要谨慎使用。

rem相较于em就简单了很多，它是依照页面的根元素（根元素）的手写体大小不一来排序的。来对上面的例子展开修改：

.child{

font-size: 30px;

border: 1remsolid ;

}

html{

font-size: 25px;

}

效果如下，能看到，边框的宽度变成了25px，它是依照根元素html的手写体大小不一排序的：

如果没有对根元素设定字号的话，font-size: 1rem的作用与font-size: initial相同。

使用 em 和 rem 能让他们灵活的够控制元素整体的放大和缩小，而不是固定大小不一。那何时应使用 em，何时应使用 rem 呢？能依照两者的差异来展开选择：

两者在客户端中计算出来的样式都会以px的方式显示；

rem是相较于根元素html的font-size排序，em 相较于元素的font-size排序；

当需要依照浏览器的font-size设置缩放时，应该使用 rem；

使用 em 应该依照组件的font-size来定，而不是根元素的font-size来定；

rem 能从浏览器手写体设置中继承 font-size 值， em 可能将受任何继承过来的父元素 font-size 的负面影响。

ex 和 ch 都是排版用的基层单位，它们的大小不一取决于元素的font-size 和 font-family特性。

ex 指的是所用手写体中小写字母 x 的高度。因此，如果两个手写体不那样，那么 ex 的值是不那样的。因为每种手写体的小写 x 的高度是不那样的。

ch 和 ex 类似，不过它是基于数字 0 的宽度排序的。会随着手写体的变化而变化。而0 的宽度通常是对手写体的平均字符宽度，它是两个估计值。由于 ch 是两个近似等宽的单元，所以在设置容器的宽度时很有用，比如两个容器想要显示指定个数的字符串时，就能使用这个基层单位。

这四个基层单位都是桌面基层单位，所谓的桌面，在web端指的是可视区域，移动端的桌面指的是布局桌面。如果桌面大小不一发生了变化，那么那些值都会随之变化。这四个基层单位指的是：

vw：桌面宽度的百分比；

vh：桌面高度的百分比；

vmax：较大的 vh 和 vw；

vmin：较小的 vh 和 vw。

假如两个浏览器的高度是800px，那么1vh的值是8px。vh和vw的大小不一总是和桌面的高度和宽度有关。

vmin 和 vmax 与桌面宽度和高度的最大值和最小值有关。假如两个浏览器高度为500px，宽度为1200px，那么1vmin是5px，1vmax是12px。

那些基层单位都是宽度基层单位，所以能在任何允许使用宽度基层单位的地方使用。那些基层单位比较适合用于创建全视区界面，例如移动设备的界面，因为元素是依照视区的体积而变化的，与文档树中的任何元素都没有关系。

2. 当然基层单位

在 CSS 中，当然基层单位包括：px 、pt 、pc、 cm 、 mm 、in 等。当然基层单位是两个固定的值，它反应了两个真实的物理体积。它不会受屏幕大小不一或者手写体的负面影响。它们的大小不一取决于值以及屏幕的分辨率（DPI，每英寸的点数）。px是他们最常见的当然基层单位之一。那些当然基层单位的换算关系如下：

1 in= 25 .4mm= 2 .54cm= 6 pc= 72 pt=96 px

（1）px

px 全称为 Pixels，表示画素，它并不严格等于显示器的画素，尤其在高清屏下。尽管CSS基层单位会依照浏览器、操作系统或者硬件适当缩放，在某些设备或者用户的分辨率设置下也会发生变化，但是96px通常等于两个物理英寸的大小不一。

CSS 将光栅图像(如照片等)的显示方式定义为默认每两个图像大小不一为1px。两个“600×400”解析度的照片的长宽分别为“600px”和“400px”，所以照片本身的画素并不会与显示装置画素一致，而是与 px 基层单位一致。如此就能将图像完整的与网页的其它元素排列起来。

很多时候， px 也常被称为 CSS 画素。它是两个当然基层单位，但也能被视为相较基层单位，因为画素基层单位相较的是设备画素。在同两个设备上，每 1 个 CSS 画素所代表的物理画素是能变化的；在不同的设备之间，每 1 个 CSS 画素所代表的物理画素是能变化的。

.box{

width: 100px;

height: 100px;

}

（2）pt

pt 全称为 Point，表示点。常见于软件设计和排版印刷行业（笔者做的后端系统，最终的产物是两个需要拿去印刷的PDF，所以会经常见到这个基层单位）。当使用这个基层单位时，无论显示器的分辨率是多少，打印在纸上的结果都是那样的。

如果单纯为了网页的显示，建议就使用px画素基层单位，如果需要输出印刷产品，就能考虑使用pt。

（3）pc

pc 全程为 Picas，表示派卡。相当于我国新四号铅字的体积。派卡也是印刷的术语，1派卡等于12点。它和 px 的换算关系如下：

1 pc= 16 px

（4）cm

cm 全称为 Centimeters，表示厘米。它和 px 的换算关系如下：

1 cm= 37 .8px

（5）mm

mm 全称为 Millimeters，表示毫米。它和 px 的换算关系如下：

1 mm= 3 .78px

（6）in

in 全称为 Inches，表示英寸。它和 px 的换算关系如下：

1 in= 96 px

3. 频率基层单位

CSS中的频率基层单位有两个：赫兹（Hz）和千赫兹（kHz）。它们的换算关系如下：

1 kHz= 1000Hz

通常情况下，频率基层单位使用在听或说级联样式表中。频率能被用来改变两个语音阅读文本的音调。低频率是低音，高频率是高音。

.low{

pitch: 105Hz;

}

.squeal{

pitch: 135Hz;

}

需要注意，当数值为0时，基层单位对值没有负面影响，但是基层单位是不能省略的。也是说0、0Hz、0kHz是不那样的。所以，在使用频率基层单位时，不要直接写0。另外，这两个基层单位是不区分大小不一写的。

4. 时间基层单位

CSS中的时间基层单位有两个：秒（s）和毫秒（ms）。这两个时间基层单位都是CSS新增的基层单位。这两个基层单位的换算关系如下：

1 s= 1000 ms

时间基层单位主要就用于 过度和动画中，用于定义持续时间或延迟时间。上面两种定义是等效的：

a[href]{

transition-duration: 2.5s;

}

a[href]{

transition-duration: 2500s;

}

5. 分辨率基层单位

CSS中的分辨率基层单位有三个：dpi、dpcm、dppx。这三个基层单位都是CSS3中华新增的基层单位。她们都是正值，不允许为负值。这三个基层单位的换算关系如下：

1 dppx= 96 dpi

1 dpi≈ 0 .39dpcm

1 dpcm≈ 2 .54dpi

分辨率基层单位主要就用于媒体查询等操作。

（1）dpi

dpi 全称为 dots per inch，表示每英寸包含的点的数量。普通屏幕通常包含 72或96个点，大于 192dpi 的屏幕被称为高分屏。

@mediascreenand( min-resolution:96dpi) { … }

@mediaprint and( min-resolution:300dpi) { … }

（2）dpcm

dpcm 全称为 dots per centimeter，表示每厘米包含的点的数量。

@mediascreen and( min-resolution:28dpcm) { … }

@mediaprint and( min-resolution:118dpcm) { … }

（3）dppx

dppx 全称为 dots per pixel，表示每画素（px）包含点的数量。由于CSS px的固定比率为1:96，因此1dppx相当于96dpi。它对应于由图像分辨率定义的CSS中显示的图像的默认分辨率。

@mediascreen and( min-resolution:2dppx) { … }

@mediascreen and( min-resolution:1dppx) and( max-resolution:1.9dppx) { … }

6. 角度基层单位

CSS中的角度基层单位有四个：deg、grad、rad、turn。那些角度基层单位都是CSS3中新增的基层单位。它们的换算关系如下：

90 deg= 100 grad= 0 .25turn≈ 1 .570796326794897rad

一般那些角度基层单位用于元素的 旋转操作，包括2D旋转、3D旋转等。

当旋转值为正值时，元素会顺时针旋转；

当旋转值为负值时，元素会逆时针旋转。

通常情况下，两个完整的旋转是360度。所以，所有的角度都在0-360度之间。但是，超出这个范围的值也是允许的，只不过都会归到0-360度之间。比如，顺时针旋转420度（450deg）、逆时针旋转270度（-270deg）、顺时针旋转90度（90deg）都是那样的效果，都会归为90deg。但是当使用动画时，那些角度值就非常重要了。

CSS的旋转主要依赖于 transform 特性中的 rotate 、rotate3d、 skew 等方法。只需给它们传递旋转的角度即可。

除了旋转会使用角度之外，线性渐变也会经常使用角度值：

background: linear-gradient(45 deg, #000, #fff);

（1）deg

deg 全称为 Degress，表示度，两个圆总共360度。

transform: rotate(2 deg);

（2）grad

grad 全称为 Gradians，表示梯度，两个圆总共400梯度。

transform: rotate(2 grad);

（4）rad

rad 全称为 Radians，表示弧度，两个圆总共2π弧度。

transform: rotate(2 rad);

（4）turn

turn 全称为 Turns，表示圈（转），两个圆总共一圈（转）。

transform:rotate(.5turn);

7. 百分比基层单位

百分比（%）也是他们比较常见的基层单位之一，所有接受宽度值的特性都能使用百分比基层单位。但是不同特性使用该基层单位的效果可能将并不那样。但是都需要有两个参照值，也是说百分比值是两个相较的值。

上面来看一看常见场景中的百分比基层单位的使用。

（1）盒模型中的百分比

在CSS中的盒模型包含的特性有：width、max-width、min-width、height、max-height、min-height、padding、margin等。那些属性在使用百分比时，参照物不尽相同：

width、max-width、min-width：值为百分比时，其相较于包含块的 width 展开排序；

height、max-height、min-height：值为百分比时，其相较于包含块的 height 展开排序；

padding、margin：值为百分比时，如果是水平的值，是相较于包含块的 width 展开排序；如果是垂直的值，是相较于包含块的 height 展开排序。

在CSS中文本控制的特性有font-size、line-height 、vertical-align、 text-indent等。那些特性在使用百分比时，参照物不尽相同：

font-size：依照父元素的font-size 展开排序；

line-height：依照font-size展开排序；

vertical-align：依照line-height展开排序；

text-indent：如果是水平的，则依照width展开排序，如果是垂直的，则依照 height 展开排序。

在CSS中用控制 position 位置的top、right、bottom、left都能使用百分比作为基层单位。其参照物是包含块的同方向的width和height。不同定位的包含块不尽相同：

如果元素为静态（ static ）或相较定位（ relative ），包含块一般是其父容器；

如果元素为当然定位（ absolute ），包含块应该是离它最近的 position 为 absolute 、 relative 或 fixed 的祖先元素；

如果元素为固定定位（ fixed ），包含块是桌面（ viewport ）。

CSS 中的 transform 特性中的 translate 和 transform-origin 值也能设置百分比。

translateX 依照容器的 width 排序

translateY 依照容器的 height 排序

transform-origin 中横坐标（ x ）相较于容器的 width 排序；纵坐标（ y ）相较于容器的 height 排序

注意，在 translate 还有两个 z 轴的函数 translateZ 。它是不接受百分比为基层单位的值。

<END>

程序员专属卫衣

商品直购链接

👇👇

专属定制，程序员秒懂的极客卫衣！

程序员积累的编程知识十年后有多少变得没用？

高阶 CSS 技巧在复杂动效中的应用

动画合成小技巧！CSS 实现动感的倒计时效果

现代 CSS 解决方案：数学函数之 min、max、clamp

Office 2019/2021专业增强版，正版终身授权！