CSS 单位是指在 CSS 中用来表示长度、宽度、高度、字体大小等的单位。常见的 CSS 单位有 px、em、rem、vh、vw 等。除了这些常见的单位，还有一些不太常见的单位，本攻略将分享 7 个你可能不认识的 CSS 单位，包括基本概念、实现方法、注意事项和示例说明。
1. ch
ch 是 CSS 中的一个相对单位，表示数字“0”的宽度。例如，如果字体大小为 16px，那么一个 ch 的宽度就是 16px。
实现方法
div {
font-size: 16px;
width: 10ch;
}
上述代码中，使用 ch 单位来设置 div 元素的宽度为 10 个数字“0”的宽度。
注意事项
ch单位的兼容性不太好，不建议在生产环境中使用。
示例说明
<div class="container">
<div class="box">1234567890</div>
<div class="box">12345678901234567890</div>
</div>
.container {
font-size: 16px;
}
.box {
width: 10ch;
height: 50px;
background-color: #ccc;
margin-bottom: 10px;
}
上述代码中，使用 ch 单位来设置 .box 元素的宽度为 10 个数字“0”的宽度，可以看到，第一个 .box 元素的宽度为 160px，第二个 .box 元素的宽度为 320px。
2. ex
ex 是 CSS 中的一个相对单位，表示小写字母“x”的高度。例如，如果字体大小为 16px，那么一个 ex 的高度就是 8px。
实现方法
div {
font-size: 16px;
height: 10ex;
}
上述代码中，使用 ex 单位来设置 div 元素的高度为 10 个小写字母“x”的高度。
注意事项
ex单位的兼容性不太好，不建议在生产环境中使用。
示例说明
<div class="container">
<div class="box">x</div>
<div class="box">xxxxxxxxxx</div>
</div>
.container {
font-size: 16px;
}
.box {
width: 50px;
height: 10ex;
background-color: #ccc;
margin-bottom: 10px;
}
上述代码中，使用 ex 单位来设置 .box 元素的高度为 10 个小写字母“x”的高度，可以看到，第一个 .box 元素的高度为 8px，第二个 .box 元素的高度为 80px。
3. fr
fr 是 CSS 中的一个相对单位，表示剩余空间的比例。例如，如果一个容器的宽度为 100px，其中一个子元素的宽度为 1fr，那么这个子元素的宽度就是剩余空间的 1/2。
实现方法
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
}
上述代码中，使用 fr 单位来设置 .container 容器的三个子元素的宽度比例为 1:2:1。
注意事项
fr单位的兼容性不太好，不建议在生产环境中使用。
示例说明
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
width: 100%;
height: 100px;
}
.box {
background-color: #ccc;
text-align: center;
line-height: 100px;
}
上述代码中，使用 fr 单位来设置 .container 容器的三个子元素的宽度比例为 1:2:1，可以看到，第一个和第三个 .box 元素的宽度为 25%，第二个 .box 元素的宽度为 50%。
4. vmin 和 vmax
vmin 和 vmax 是 CSS 中的相对单位，分别表示视口宽度和高度的最小值和最大值。例如，如果视口宽度为 800px，视口高度为 600px，那么 1vmin 的值为 6px，1vmax 的值为 8px。
实现方法
div {
width: 50vmin;
height: 50vmax;
}
上述代码中，使用 vmin 和 vmax 单位来设置 div 元素的宽度为视口宽度的 50%，高度为视口高度的 50%。
注意事项
vmin和vmax单位的兼容性较好，但在 IE9 及以下版本中不支持。
示例说明
<div class="container">
<div class="box"></div>
</div>
.container {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.box {
width: 50vmin;
height: 50vmax;
background-color: #ccc;
}
上述代码中，使用 vmin 和 vmax 单位来设置 .box 元素的宽度为视口宽度的 50%，高度为视口高度的 50%。
5. rem
rem 是 CSS 中的相对单位，表示相对于根元素（即 <html> 元素）的字体大小。例如，如果根元素的字体大小为 16px，那么 1rem 的值就是 16px。
实现方法
html {
font-size: 16px;
}
div {
font-size: 1.5rem;
}
上述代码中，使用 rem 单位来设置 div 元素的字体大小为根元素字体大小的 1.5 倍。
注意事项
rem单位的兼容性较好，但在 IE8 及以下版本中不支持。
示例说明
<div class="container">
<div class="box">Hello, world!</div>
</div>
html {
font-size: 16px;
}
.container {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.box {
font-size: 2rem;
}
上述代码中，使用 rem 单位来设置 .box 元素的字体大小为根元素字体大小的 2 倍。
6. vw 和 vh
vw 和 vh 是 CSS 中的相对单位，分别表示视口宽度和高度的百分比。例如，如果视口宽度为 800px，视口高度为 600px，那么 1vw 的值为 8px，1vh 的值为 6px。
实现方法
div {
width: 50vw;
height: 50vh;
}
上述代码中，使用 vw 和 vh 单位来设置 div 元素的宽度为视口宽度的 50%，高度为视口高度的 50%。
注意事项
vw和vh单位的兼容性较好，但在 IE8 及以下版本中不支持。
示例说明
<div class="container">
<div class="box"></div>
</div>
.container {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.box {
width: 50vw;
height: 50vh;
background-color: #ccc;
}
上述代码中，使用 vw 和 vh 单位来设置 .box 元素的宽度为视口宽度的 50%，高度为视口高度的 50%。
7. vmin 和 vmax
vmin 和 vmax 是 CSS 中的相对单位，分别表示视口宽度和高度的最小值和最大值。例如，如果视口宽度为 800px，视口高度为 600px，那么 1vmin 的值为 6px，1vmax 的值为 8px。
实现方法
div {
width: 50vmin;
height: 50vmax;
}
上述代码中，使用 vmin 和 vmax 单位来设置 div 元素的宽度为视口宽度的 50%，高度为视口高度的 50%。
注意事项
vmin和vmax单位的兼容性较好，但在 IE9 及以下版本中不支持。
示例说明
<div class="container">
<div class="box"></div>
</div>
.container {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.box {
width: 50vmin;
height: 50vmax;
background-color: #ccc;
}
上述代码中，使用 vmin 和 vmax 单位来设置 .box 元素的宽度为视口宽度的 50%，高度为视口高度的 50%。
总结
CSS 中有很多种单位，除了常见的 px、em、rem、vh、vw 等，还有一些不太常见的单位，例如 ch、ex、fr、vmin 和 vmax 等。在使用这些不太常见的单位时，需要注意它们的兼容性和使用场景。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：分享7个你可能不认识的CSS单位 - Python技术站
微信扫一扫 
支付宝扫一扫 