box-sizing 属性

1.作用

定义如何计算一个元素的总宽度和总高度，主要设置是否需要加上内边距（padding）和边框等

2、属性值

content-box

默认值，任何边框和内边框的宽度都会被增加到最后绘制出来的元素宽度中

border-box

设置的边框和内边距的值是包含在 width 内的

3、实例

     <body>
        <div class="container"></div>
     </body>

        * {
    
    
            margin: 0;
            padding: 0;
        }

        body {
    
    
            border: 1px solid rgb(192, 192, 235);
            margin: 10px;
        }

        .container {
    
    
            width: 100px;
            height: 100px;
            background: pink;
            margin: 10px;
            padding: 10px;
            border: 1px solid black;
        }

content-box

      * {
    
    
            box-sizing: content-box;
        }

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XwuhHy4x-1650077940119)(image-20220416105318659.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MXUa2xC6-1650077940121)(image-20220416105457842.png)]

此时盒子内容区的宽度为设置的width，实际宽度为：width+padding*2+border*2+margin*2

border-box

      * {
    
    
            box-sizing: border-box;
        }
       /* 此时的盒子比上面的盒子要小 */

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yKhqp7mZ-1650077940121)(image-20220416104952115.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ci0ifSdy-1650077940122)(image-20220416105126344.png)]

由上图可知 content + padding + border + margin =width，即盒子的实际宽度为设置的width

1.作用

2、属性值

3、实例

猜你喜欢