GX博客

分享个人 Full-Stack JavaScript 项目开发经验

CSS的长度单位介绍

CSS的长度/尺寸单位是前端布局和排版的基础,所以很有必要理解和熟练掌握它们。本文将介绍这些长度单位及其注意问题等。


一般地,我们可以将长度单位分为两大类,一类是绝对单位,另一位为相对单位。绝对单位即无论其它相关设置怎么变化,它指定的值是不会变化的。而相对单位,则会根据父容器或视口的尺寸、字体的大小而变化。

绝对单位

  • px(像素)

    最常用的基于屏幕分辨率的绝对单位。

  • mm(毫米)、cm(厘米)、in(英寸)

    日常物理长度单位,浏览器会根据 DPI(每英寸内的像素点数)进行渲染。

  • pt(点)、pc(十二点活字)

    pt 的中文译音是“磅”,在打印中常见。一磅相当于 1/72 英寸。一个十二点活字即 12 磅。


相对单位

  • em

    相对于当前元素的字体大小。需要注意字体大小的继承问题。与 rem 一样,常用于可缩放布局(在跨设备兼容上还有另一个概念为响应式布局)。

  • rem(root em)

    相对于根元素的字体大小。该单位只支持 IE9+,且在 IE9/10中,不能使用 font 的缩略写法,不能在伪类元素上使用。了解详细的兼容性说明,请点击这里

  • ex、ch

    分别是当前元素中小写 x 的高度和数字 0 的宽度。这两单位不常用,浏览器支持性也一般。

  • vw、vh

    分别是视口 1% 宽度和 1% 高度。

  • vmin、vmax

    分别是视口中较短一边的 1% 和较长一边的 1% 的长度。


百分比与流体布局

流体布局是相对于固定宽度布局而言的,它跟随浏览器视口大小的变化。将元素宽度设置为百分比可以使它宽度总是相对于父元素的指定百分比,而这个父元素可以是body、html。


了解 W3C 的 CSS 单位及浏览器兼容说明,请点击这里

版权声明:

本文为博主原创文章,若需转载,须注明出处,添加原文链接。

https://leeguangxing.cn/blog_post_50.html