CSS单位知多少

jnfy

于 2024-09-15 08:30:00 发布

阅读量267

点赞数 11

分类专栏： CSS 文章标签： css 前端 px、em、rem 长度单位

本文链接：https://blog.csdn.net/cui137610/article/details/142171231

版权

CSS 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

在CSS,很多属性都依赖于长度度量来合适的显示各种页面元素，因此CSS中也有很多长度单位也不足为奇。

那么问题来了：说说你知道CSS长度单位？px、em、rem……

下面我们就来看看CSS长度单位

px: 像素

in: 英寸

mm: 毫米

q: 1/4毫米

cm: 厘米

pt: 磅

pc: 派卡

%: 百分比

em: 根据文档字体计算尺寸

rem: root em根据根文档字体计算尺寸

ex: 文档字符”的高度

ch: 文档数字0的的宽度

vh: 视口高度的 1/100

vw: 视口宽度的 1/100

vmin: 视口高度和宽度之间的最小值的 1/100

vmax: 视口高度和宽度之间的最大值的 1/100

绝对长度单位

px 与显示设备相关。对于屏幕显示，通常是一个设备像素（点）的显示。

p {

   font-size: 10px;

}

in英寸（2.54厘米，96px） 1in 总是等于96px

p {

   font-size: 1in; // 96px

}

mm 毫米 25.4mm 总是等于96px

p {

   font-size: 25.4mm; //96px

}

q 1q = 1/4mm

p {

   font-size: 101.6q; //96px

}

cm 厘米（10毫米）1cm == 37.8px

p {

   font-size: 1cm; // 96/25.410 px

}

pt磅印刷单位（1/72 英寸）3pt 总是等于4px

p {

   font-size: 3pt; // 4px

}

pc 印刷单位 1pc = 12pt

p {

   font-size: 1pt; // 12/34px

}

来看看绝对单位间的相互转换：

1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px

相对长度单位

% 百分比相对于父元素

<div class="parent">

   <div class="children"></div>

</div>

<style>

.parent {

   width: 960px;

}

.children {

   width: 10%; //96px

}

</style>

em 和 rem (root em)

两者都是基于字体尺寸的，区别在于 em 是相对于当前父元素的字体大小为标准，而 rem 是相对于 html 元素的字体大小为标准。

<body>

 <div class="em">

   Test <!-- 10 * 1.2 = 12px -->

   <div class="em">

     Test <!-- 12 * 1.2 = 14.4px -->

     <div class="em">

       Test <!-- 14.4 * 1.2 = 17.28px -->

     </div>

   </div>

 </div>

 <div  class="rem">

   Test <!-- 10 * 1.2 = 12px -->

   <div  class="rem">

     Test <!-- 10 * 1.2 = 12px -->

     <div  class="rem">

       Test <!-- 10 * 1.2 = 12px -->

     </div>

   </div>

 </div>

</body>



<style>

 html,body {

   font-size: 10px;

 }

 div.em {

   font-size: 1.2em;

 }

 div.rem {

   font-size: 1.2rem;

 }

</style>

ex 这个单位表示元素font的 x-height ，即字符“x”的高度。对于很多字体， 1ex ≈ 0.5em

ch 指当前字体环境中数字 0 的宽度。