HTML 盒子模型（ box-sizing: border-box）

抢我糖还想跑

于 2022-08-09 10:49:05 发布

阅读量1.4k

点赞数

分类专栏：前端 # HTML 文章标签： html css 前端

本文链接：https://blog.youkuaiyun.com/qq_41749451/article/details/126243161

版权

HTML 同时被 2 个专栏收录

13 篇文章

订阅专栏

前端

10 篇文章

订阅专栏

本文详细介绍了CSS中的盒模型概念，并通过实例演示了如何使用box-sizing属性来确保元素的尺寸不受padding和border的影响，从而实现精确布局。

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

box-sizing: border-box

盒子模型，就是指，按百分比固定div的宽度、高度之后，不会被padding、border等扩充而破坏了初始化的百分比。

    <html>
        <head>
            <style>
                body{
                    margin:0px;
                }
                .box1{
                    border:1px solid black;
                    width: 47%;
                    box-sizing: border-box;
                    padding: 30px;
                    height: 200px;
                    float: left;
                    margin-left: 2%;
                    margin-bottom: 5%;
                }
            </style>
        </head>
        <body>
                <div class="box1">
                  
                </div>
                <div class="box1">
                 
                </div>
                <div class="box1">

                </div>
                <div class="box1">

                </div>

        </body>
    </html>