彻底搞懂盒子模型

2024-04-09 17:30:14 阅读数 596

一、简述

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

下面的图片说明了盒子模型(Box Model)：

盒子模型.png

二、思考

下面我们来看下这个例子，给出下面的HTML代码，将他放到Chrome浏览器中运行，问：三个box的蓝色区域的宽分别是多少px?

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="UTF-8"/>
        <style type="text/css">
            div{
                width: 100px;
                height: 100px;
                padding: 10px;
                margin: 10px;
                border: 10px solid red;
                background-color: blue;
            }
            #box2{
                box-sizing: border-box;
            }
            #box3{
                box-sizing: content-box;
            }
        </style>
    </head>
    <body>
        <div id="box1">
        </div>
        <div id="box2">
        </div>
        <div id="box3">
        </div>
    </body>
</html>

三、结果分析

box1.png

box2.png

从上面的结果可以看出第一个和第三个盒子的蓝色区域的宽是120px，第二个盒子的蓝色区域的宽是80px，很明显content-box是标准盒子模型，而border-box是怪异盒子模型。

四、总结

给标准盒子模型设置width和height属性时，它只是包含了Content实际内容部分，增加的其他部分是另外计算的，而给怪异盒子模型设置width和height属性时，它是包含了Border + Padding + Content三个部分。
不管是标准盒子模型还是怪异盒子模型，background-color样式总是对Padding + Content两个部分生效的。

更多个人文章