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

最新推荐文章于 2024-04-19 18:55:03 发布

抢我糖还想跑

最新推荐文章于 2024-04-19 18:55:03 发布

阅读量1.3k

点赞数

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

本文链接：https://blog.csdn.net/qq_41749451/article/details/126243161

版权

HTML 同时被 2 个专栏收录

13 篇文章 3 订阅

订阅专栏

前端

10 篇文章 0 订阅

订阅专栏

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>