首页 > 代码库 > 简要的谈一谈我对CSS中长度单位的理解

简要的谈一谈我对CSS中长度单位的理解

2024-08-17 02:58:36   217人阅读

CSS中的长度单位目前分为两种，分别是绝对长度和相对长度。绝对长度单位包括：
  • in：英寸
  • cm：厘米
  • mm：毫米
  • pt：磅（1磅等于1/72英寸）
  • pc：pica（1pica等于12磅）
以上五个就是CSS中定义的绝对长度单位，他们都是在我们实际生活中用的很多，但是在写CSS代码制作要在屏幕上显示的网页的时候，这种绝对长度单位用到的很少，我能想到的比较有用的地方只有给印刷品设置长度单位时可能会用到，虽然我没有接触过。
接下来就是相对长度单位，相对，顾名思义就是以某个长度作为参照，设置的相对长度的实际值就是相对长度值*参照值。
 
 
CSS中的相对单位包括：
  • em：与元素的字号挂钩（font-size）
  • ex：与元素字体中字母“x”的实际高度挂钩（因为不同字体中x的高度是不同的，感觉是个好随意的单位，为什么不是其他字母呢0.0）
  • rem：与根元素的字号挂钩（html元素是根元素）
  • px：css像素（假定显示设备的分辨率为96dpi）
  • %：另一属性值的百分比
因为相对长度单位用到的比较多，所以有必要加个演示什么的，直观感受一下：

1. em

em是参照元素的字号来设置自身值的一个相对长度单位，如下所示，我设置p元素的font-size属性值为14px，给p元素的height设置为4em，同时给line-height也设置为4em，这样可以让p元素的内容有一个上下居中的效果。

1 p{
2      background: gold;
3      color: #000000;
4      font-size: 14px;
5      height: 4em;
6      line-height: 4em;                
7 }
1 <p>这是随便写的一句话</p>

效果如下所示：

技术分享

2. rem（个人感觉这个值在响应式布局会很有用，目前用的不多，但将来应该会很热）

这个单位的实际值=html元素的值*这个单位的相对值
如下所示：
 1 html{
 2     font-size: 24px;
 3 }
 4 p{
 5     background: gold;
 6     color: #000000;
 7     font-size: 1rem;
 8     height: 4em;
 9     line-height: 4em;                
10 }
1 <p>这是随便写的一句话</p>

效果如下：

技术分享

3. px

像素，这个单位在实际的开发中用的，见得非常多。虽然CSS标准中定义的px是一个相对长度单位，但因为定义的很奇葩（似乎是和读者的臂长还有关系，我猜这应该也是相对的一种吧:)），所以很多浏览器都把1px的长度定义为1英寸的1/96，大约是这样，所以本质上，px还是一个绝对长度单位。因为很常见，所以就不演示了。

4. %

百分比单位的定义是：可以把一个度量单位表示为其他属性值的百分比。
我们从定义就可以发现一个问题，这个“其他属性值”具体是什么属性，例如：同一个元素的font-size和width都使用%作为单位，他们所参照的那个“其他属性值”是同一个么？现实给出的答案是：不是同一个！
使用百分比符号作为单位会有两个需要注意的地方：
    - 并非所有的属性都可以使用百分比作为单位。
    - 对于可以使用百分比作为单位的元素，他们所对应的那个“其他属性值”是各不相同的。例如之前说到的font-size，参照的该元素继承得到的font-size值，而对于width属性，参照的则包含这个元素的块的宽度。
 
以上就是我目前对于CSS中长度单位的一些简单理解。如果之后有新的感悟和理解，会持续更新。

简要的谈一谈我对CSS中长度单位的理解


联系
我们