CSS盒模型

盒模型概念

在 CSS 中，所有的元素都被一个个的“盒子（box）”包围。每一个盒子包括内容(content)、内边距(padding)、边框(border)、外边距(margin)，这些元素共同组成盒模型。

盒模型两种类型

盒模型由box-sizing属性指定，也就是说box-sizing指定盒模型的宽(width)与长(height)是以什么方式进行计算，box-sizing属性的值包括：content-box和border-box两种：

1. content-box 内容盒：content即为盒子的边界，content-box的width=内容宽度
2. border-box 边框盒：border作为盒子的边界，border-box的width=内容宽度+padding2+border2

两种盒模型实例

<div class="content-box">content box</div>
<div class="border-box">border box</div>

.content-box {
    margin: 25px;
    border: 5px solid red;
    padding: 15px;
    box-sizing: content-box;
    width: 100px;
    height: 100px;
}
.border-box {
    margin: 25px;
    border: 5px solid red;
    padding: 15px;
    box-sizing: border-box;
    width: 100px;
    height: 100px;
}

实例运行结果

上图为content-box内容盒图示(width/height为content的长度)，下图为border-box边框盒图示(width/height为content+padding*2+border*2的长度)

margin合并

1. 并列元素：两个相邻子元素的相邻上下margin会合并，合并后的margin为两元素较大的margin值；或者为并列元素添加float属性
2. 嵌套元素：第一个和最后一个子元素会和父元素的上下margin合并

阻止margin合并的方法

1. 针对并列元素嵌套：将块级元素设置为行内元素，即display: inline-block; 同时将元宽度改为100%，即width: 100%
2. 针对嵌套元素嵌套：在父元素中添加更多样式设置，例如设置边框(border)、内边距(padding)或设置溢出隐藏，即overflow: hidden;