CSS Box模式

一生二，二生三，三生万物。所有的HTML元素都可以看做是一个承载内容的盒子。而CSS中的所谓的“Box模式（Box Modal）”则是在本元层面上设置HTML元素的设计与布局。

如下所示，如果用Box的视角去看一个HTML元素，则包括四部分，margins（外边距）、borders（边框）、padding（内边距）和content（实际内容）。

对上述不同的部分的详解：

• Content - 内容部分，也就是内容、图片的显示的区域
• Padding - 内边距也就是内容部分周围的一圈空白间距（该区域透明）
• Border - 边框部分在内容部分、内边距部分之外
• Margin - 边框周围透明空白部分（该区域透明）

案例如下所示：

div {
    background-color: #eef8f8;
    width: 300px;
    border: 25px solid #46acb6;
    padding: 25px;
    margin: 25px;
}

运行一下

HTML元素的宽度和高度

HTML元素的宽度和高度特指该元素content内容部分、padding内边距部分和border边框部分合在一起的宽度和高度，不包括元素的外边距部分。

重要提示：默认情况下在CSS中设置的width和height属性都只是设置了内容部分的宽度和高度，所以要计算元素的整体尺寸，则要再继续加上padding内边距、border边框粗细。如果想直接在CSS中设置元素的整体宽度和高度，把box-sizing属性设置为border-box即可。

div {
    width: 320px;
    padding: 10px;
    border: 5px solid #46acb6;
    margin: 1px;
}

运行一下

计算方式如下所示：

320px（width）
+ 20px（left + right padding）
+ 10px (left + right border)
= 350px

如上例所示，box的总宽度的计算方式则如下：
元素总宽度 = 左边框宽度 + 左内边距宽度 + width（内容部分宽度）+ 右内边距宽度 + 右边框宽度

总高度的计算方式如下：
元素总高度 = 上边框宽度 + 上内边距宽度 + height（内容部分高度）+ 下内边距宽度 + 下边框宽度

---

很多教程中计算元素高度和宽度时把外边距也算在内，那是错误的而不是争论；不过不论这个问题是对错还是争论，不必深究，当这个问题影响实际操作时，自己动手试试就ok啦！