元素大小边界设置_使元素大小刚好为数字大小-CSDN博客

本文链接：https://blog.csdn.net/comegoing_xin_lv/article/details/125786482

一、常见单位设置

1、像素单位

（1）格式：“number+px”（number为数字大小，中间加号请忽略）

（2）例子

.box1{
    width: 400px;
    height: 400px;
    background-color: red;
}

2、百分比单位

（1）格式：“number+%”（number为数字大小，中间加号请忽略）

（2）注意，此单位多用于父子继承关系之间

（3）例子（此类中类box2是类box1的儿子，所以50%等同于100px）

.box2{
    width: 50%;
    height: 50%;
    background-color: blue;
}

3、em

（1）格式：“number+em”（number为数字大小，中间加号请忽略）

（2）单位换算 1 em = 1 font-size，此font-size为当前元素字符大小，通常为16px

（3）例子

.box4{
    /* em以自身font-size为参照物 1em = 1font-size */
    font-size: 10px;
    width: 10em;
    height: 10em;
    background-color: yellow;
}

4、rem

（1）格式：“number+rem”（number为数字大小，中间加号请忽略）

（2）单位换算 1 rem = 1 font-size，此font-size为html元素字符大小，通常为16px

（3）例子

html{
    font-size: 5px;
}
.box3{
    /* rem以html的的font-size为参照物 */
    width: 10rem;
    height: 10rem;
    background-color: skyblue;
}

二、代码实例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>长度单位</title>
        <style>
            html{
                font-size: 5px;
            }
            .box1{
                width: 400px;
                height: 400px;
                background-color: red;
            }
            .box2{
                width: 50%;
                height: 50%;
                background-color: blue;
            }
            .box3{
                /* rem以html的的font-size为参照物 */
                width: 10rem;
                height: 10rem;
                background-color: skyblue;
            }
            .box4{
                /* em以自身font-size为参照物 1em = 1font-size */
                font-size: 10px;
                width: 10em;
                height: 10em;
                background-color: yellow;
            }
        </style>
    </head>
    <body>
        <div class="box1">
            <div class="box2">
            </div>
        </div>
        <div class="box3"></div>
        <div class="box4"></div>
    </body>
</html>