css3新增的单位有哪些

CSS3是最新的CSS规范版本，它在样式表语言方面进行了大量的扩展和改进，其中最显著的改进之一就是新增了一些新的单位，下面我们来逐一了解吧。

p {
    font-size: 30px;
}

1. rem

rem是root em（根em）的缩写，它是基于html根元素字体大小计算的单位。它解决了em多层嵌套时字体大小叠加的问题，它的计算公式为：

p {
    font-size: 2rem;
 /*如果html根元素字体大小为16px，则2rem=32px*/}

2. vw和vh

vw和vh是viewport width和viewport height的缩写，它们是基于视口宽度和高度计算的单位。它们的计算公式为：

p {
    font-size: 5vw;
 /*视口宽度为1000px时，5vw=50px*/}
p {
    font-size: 10vh;
 /*视口高度为800px时，10vh=80px*/}

3. vmin和vmax

vmin和vmax是基于视口宽度和高度中较小值和较大值来计算的单位，它们的计算公式为：

p {
    font-size: 3vmin;
 /*视口宽度为1000px、视口高度为800px时，3vmin=24px*/}
p {
    font-size: 2vmax;
 /*视口宽度为1000px、视口高度为800px时，2vmax=16px*/}

4. ex和ch

ex和ch都是相对于字体尺寸的单位，它们的计算公式为：

p {
    font-size: 20px;
    line-height: 3ex;
 /*3ex=60px*/}
p {
    font-size: 16px;
    width: 20ch;
 /*20ch表示能够容纳20个“0”的宽度*/}
    

以上就是CSS3新增的一些单位，它们通过不同的计算方式，可以实现更加灵活、自适应的布局效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！