CSS布局 0x1 盒模型和box-sizing

最新推荐文章于 2025-02-26 23:03:28 发布

原创最新推荐文章于 2025-02-26 23:03:28 发布 · 167 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#盒模型 #box-sizing #BoxModel

前端基础同时被 2 个专栏收录

167 篇文章

订阅专栏

CSS

29 篇文章

订阅专栏

本文深入讲解了CSS盒模型的概念，包括边距、边框、填充和内容如何共同构成元素的盒子。通过具体实例展示了传统盒模型与box-sizing:border-box属性的区别，帮助读者理解并掌握盒模型在网页布局设计中的应用。

盒模型

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

CSS box-model

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>margin</title>
        <style>
            .simple {
                width: 500px;
                margin: 20px auto;
                background-color: aqua
            }

            .fancy {
                width: 500px;
                margin: 20px auto;
                padding: 50px;
                border-width: 10px;
                background-color: blueviolet
            }
        </style>
    </head>
    <body>
        <div class="simple">simple</div>
        <div class="fancy">fancy</div>
    </body>
</html>

box-sizing

人们慢慢的意识到传统的盒子模型不直接，所以他们新增了一个叫做 box-sizing 的CSS属性。当你设置一个元素为 box-sizing: border-box; 时，此元素的内边距和边框不再会增加它的宽度。这里有一个与前一页相同的例子，唯一的区别是两个元素都设置了 box-sizing: border-box; ：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>margin</title>
        <style>
            .simple {
                width: 500px;
                margin: 20px auto;
                background-color: aqua;
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                     box-sizing: border-box;
            }

            .fancy {
                width: 500px;
                margin: 20px auto;
                padding: 50px;
                border:solid blueviolet 10px;
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                     box-sizing: border-box;
            }
        </style>
    </head>
    <body>
        <div class="simple">simple</div>
        <div class="fancy">fancy</div>
    </body>
</html>