您的位置:

CSS所有测量单位

一、绝对长度单位

绝对长度单位是指在不同设备和浏览器下都能保持一定的尺寸精度,不会因为设备或者显示器的分辨率不同而产生变化。

以下是CSS中的几个绝对长度单位:px、pt、in、cm、mm,其中最常见的是px。


/* 示例 */
div{
  width: 200px;
  height: 50px;
  font-size: 14px;
  padding-left: 10pt;
  margin-left: 0.5in;
}

二、相对长度单位

相对长度单位是相对于其他元素的尺寸进行设置,因此在不同设备和浏览器下可能会发生变化。

以下是CSS中的几个相对长度单位:em、rem、vh、vw、vmin、vmax,其中em和rem最为常见。

1. em单位

em是相对于元素的字体大小进行设置的单位。


/* 示例 */
div{
  font-size: 16px;
  width: 10em;
  line-height: 1.5em;
}

2. rem单位

rem是相对于根元素(即html元素)的字体大小进行设置的单位。使用rem可避免在多个嵌套层级的情况下,字体大小不断地累计导致布局混乱。


/* 示例 */
html{
  font-size: 16px;
}

div{
  width: 10rem;
  font-size: 1.25rem;
}

三、百分比单位

百分比单位是相对于其他元素的尺寸进行设置的单位,同样会因为设备的分辨率不同而产生变化。

在实现响应式布局时,经常使用百分比单位来设置宽度、高度等样式。


/* 示例 */
.container{
  width: 90%;
  margin: 0 auto;
}

img{
  width: 50%;
  height: auto;
}

四、视口相关单位

视口相关单位是相对于设备的屏幕尺寸进行设置的单位,与页面布局的响应式设计密切相关。

以下是CSS中的几个视口相关单位:vw、vh、vmin、vmax,其中vw和vh最为常见。

1. vw单位

vw是相对于视口的宽度进行设置的单位,1vw等于视口宽度的1%。


/* 示例 */
div{
  width: 50vw;
}

2. vh单位

vh是相对于视口的高度进行设置的单位,1vh等于视口高度的1%。


/* 示例 */
div{
  height: 50vh;
}

五、计算值

CSS除了以上提到的单位外,还支持基于简单计算的元素尺寸设置,可以使用“+”、“-”、“*”、“/”等运算符,以及括号进行计算。


/* 示例 */
div{
  width: calc(50% - 20px);
  height: calc(100vh / 3);
}

六、总结

CSS提供各种不同的测量单位,开发者应根据具体情况和需求选择合适的单位进行样式设置。绝对长度单位适用于不需要考虑设备分辨率的情况,相对长度单位适用于响应式布局,百分比单位和视口相关单位适用于响应式设计,计算值可使布局更加灵活。