CSS所有测量单位

小蓝 • 2024-12-16 13:35 • 编程

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

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

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/270116.html