CSS单位

橘猫吃不胖～

已于 2022-05-15 12:02:13 修改

阅读量382

点赞数

分类专栏： CSS 文章标签： css

于 2021-10-24 14:37:30 首次发布

本文链接：https://blog.youkuaiyun.com/m0_46612221/article/details/120933781

版权

CSS 专栏收录该内容

25 篇文章

订阅专栏

本文详细介绍了CSS中的各种尺寸单位，包括%、px、em、rem、vw、vh等，重点讨论了它们之间的区别。em单位相对于字体大小，rem单位相对于根元素字体大小，%则相对于父元素。同时，文章还探讨了vw和vh单位，它们基于视口宽度和高度，提供了更灵活的布局方式。理解这些单位的差异对于创建响应式网页设计至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1 基本单位介绍

1、%：百分比单位，相对于父元素（宽度和高度）的百分比。

2、px：像素单位，表示屏幕上的一个点。

3、in：英寸单位，一般买电脑就说XX英寸，它不是指长多少宽多少，而是说对角线的长度。英寸与像素的转化与分辨率有关，比如分辨率是96，就表示一英寸包含96个像素点。

4、cm：厘米单位，1in≈2.54cm，1cm约包含37.78个像素点。

5、mm：毫米单位，1cm=10mm。

6、pt：磅单位，1pt=1/72in，1pt包含1.33个像素点。

7、em：相对于字体的大小，当为盒子设置了em单位宽度或者高度时，盒子内字体越大，盒子越宽/高。默认浏览器的相对字体高度为16em。

例如，没有设置盒子内字体大小，为盒子设置宽度10em，可以看到盒子最终的宽度是160px，因为这时1em=16px。

    <div class="box"></div>
    <style>
        .box {
            width: 10em;
            height: 30px;
            background-color: pink;
        }
    </style>

在这里插入图片描述
如果这时将字体设置为20px，那么盒子的宽度会变为200px，因为这是1em=20px：

    <div class="box"></div>
    <style>
        .box {
            width: 10em;
            height: 30px;
            background-color: pink;
            font-size: 20px;
        }
    </style>

在这里插入图片描述
8、rem：相对于根元素字体的大小，盒子的宽度与父元素和自身元素字体大小没关系，与根元素字体大小（默认是16px）有关。

例如，给盒子设置宽度10rem，然后设置字体大小20px，然后我们发现屏幕上显示的宽度还是160px。

    <div class="box"></div>
    <style>
        .box {
            width: 10rem;
            height: 30px;
            background-color: pink;
            font-size: 20px;
        }
    </style>

在这里插入图片描述
那么如果将根元素字体大小，也就是<html>标签上的字体大小改为20px，我们会发现盒子宽度变为了200px，因为这时1rem=20px。

    <div class="box"></div>
    <style>
        html {
            font-size: 20px;
        }
        .box {
            width: 10rem;
            height: 30px;
            background-color: pink;
        }
    </style>