一、绝对长度单位
绝对长度单位是指在不同设备和浏览器下都能保持一定的尺寸精度,不会因为设备或者显示器的分辨率不同而产生变化。
以下是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提供各种不同的测量单位,开发者应根据具体情况和需求选择合适的单位进行样式设置。绝对长度单位适用于不需要考虑设备分辨率的情况,相对长度单位适用于响应式布局,百分比单位和视口相关单位适用于响应式设计,计算值可使布局更加灵活。