box-sizing属性是什么作用？

阳光穿透心脏的1/2处 2023-01-19 08:26 10阅读 0赞

### 文章目录 ###

*   *  1、场景说明
     *  2、未用box-sizing属性之前
     *  3、box-sizing属性的作用

## 1、场景说明 ##

> 要实现界面主区域块100%显示

## 2、未用box-sizing属性之前 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>box-sizing属性是什么作用？</title>
        <style>
            html,body{ 
                height: 100%;
                width: 100%;
                margin: 0;
                padding: 0;
                background: darkseagreen;
            }
            .main{ 
                background: #ff5a1e;
                height: 100%;
                padding: 1rem;
            }
        </style>
    </head>
    <body>
        <div class="main">
        </div>
    </body>
    </html>

效果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hvdXBlaWJpbjIwMTI_size_16_color_FFFFFF_t_70_pic_center]  
效果图中，右下角出现滚动条，说明div块高度超过100%显示了。这是为什么呢？向下看……

## 3、box-sizing属性的作用 ##

语法：box-sizing: content-box|border-box|inherit;

> content-box：在宽度和高度之外绘制元素的内边距和边框。
> 
> border-box：为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
> 
> inherit： 规定应从父元素继承 box-sizing 属性的值。

`概括一点就是：box-sizing属性默认值是 content-box，div的高度虽然设置为100%，但是显示区域加上了padding的高度，因此就大于100%了。 因此只要把box-sizing的值设置为 border-box值就可以了。`

增加后的代码如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>box-sizing属性是什么作用？</title>
        <style>
            html,body{ 
                height: 100%;
                width: 100%;
                margin: 0;
                padding: 0;
                background: darkseagreen;
            }
            .main{ 
                background: #ff5a1e;
                height: 100%;
                padding: 1rem;
                box-sizing: border-box;
            }
        </style>
    </head>
    <body>
        <div class="main">
        </div>
    </body>
    </html>

效果图如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hvdXBlaWJpbjIwMTI_size_16_color_FFFFFF_t_70]  
显示正常了！！！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hvdXBlaWJpbjIwMTI_size_16_color_FFFFFF_t_70_pic_center]: /images/20221021/0e3507c58eeb4172a024a1504ad6d870.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hvdXBlaWJpbjIwMTI_size_16_color_FFFFFF_t_70]: /images/20221021/2a34d95b3ef54e2da89f8ad158c2a4cc.png