box-sizing 属性

最新推荐文章于 2023-07-22 16:14:33 发布

芋圆不想圆

最新推荐文章于 2023-07-22 16:14:33 发布

阅读量338

点赞数 1

文章标签： html5 前端 css

本文链接：https://blog.csdn.net/m0_52900946/article/details/124209779

版权

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
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
box-sizing 属性

1.作用定义如何计算一个元素的总宽度和总高度，主要设置是否需要加上内边距（padding）和边框等2、属性值content-box 默认值，任何边框和内边框的宽度都会被增加到最后绘制出来的元素宽度中border-box设置的边框和内边距的值是包含在 width 内的3、实例 <body> <div class="container"></div> </body>
复制链接

扫一扫