css 纵向合并_CSS inline-block、BFC以及外边距合并

盒模型是CSS中很重要的一个概念。只有真正的理解好盒模型，才能正确的使用盒模型进行页面布局。在这篇文章中，我们将深入地探讨CSS盒模型的原理和机制。

盒模型基本概念

所有HTML元素，在页面的呈现过程中，都遵循CSS制定的盒模型。盒模型的几个要素是border、margin、padding、content，如下图，

盒模型

content：真正包含元素内容的区域

padding(内边距)：内容和边框之间的一段间距，属于标签内部

border(边框)：包含边框的区域，扩展了内边距区域。它位于边框边界内部。大小为border-box宽和border-box高

margin(外边距)：该标签和其他标签之间的间距，设置此内容，不会影响标签的大小

当一个元素既有margin,又有padding,还有边框时，在普通流中所占的空间就是这些值的总和。即横向空间为：marginLeft + borderLeftWidth + paddingLeft + width + paddingRight + borderRightWidth + marginRight，纵向的同理。

盒模型的分类及不同盒模型之间的区别

盒模型分为IE盒模型和W3C标准的盒模型。它们之间的区别在于IE盒模型和W3C标准盒模型计算高度和宽度的方式不同。具体不同表现在以下方面：

W3C标准盒模型(高度的计算类似)：

一个元素的宽度=content

盒子的总宽度=margin-left+border-left+padding-left+width+padding-right+border-right+margin-right

W3C标准模型

IE怪异盒模型(高度的计算类似)：

一个元素的宽度=content+padding+border

盒子的总宽度=margin-left+width+margin-right

IE盒子模型

如何通过CSS设置IE盒模型和W3C标准盒模型

//W3C标准盒模型(浏览器默认)

box-sizing:content-box;

//IE怪异盒模型

box-sizing:border-box;

box-sizing是CSS3的新属性，为了避免在不同的浏览器中表现不同的情况产生，我们可以这样使用

Element {

-moz-box-sizing: border-box;

-webkit-box-sizing: border-box;

-o-box-sizing: border-box;

-ms-box-sizing: border-box;

box-sizing: border-box;

}

JS如何设置盒模型的对应的宽和高

如果样式写在行内，可以通过document.style.width/height获取盒模型的宽或高

#content{

height:200px;

border:2px solid blue;

padding:20px;

margin:20px;

}

var ele=document.getElementById('content');

console.log('content的宽度：'+ele.style.width); //100px

行内样式和外联样式都能取到，只有IE支持

#content{

width:100px;

height:200px;

border:2px solid blue;

padding:20px;

margin:20px;

}

var ele=document.getElementById('content');

console.log('content的宽度：'+ele.currentStyle.width); //100px

行内样式和外联样式都能取到，主流浏览器几乎都支持

#content{

width:100px;

height:200px;

border:2px solid blue;

padding:20px;

margin:20px;

}

var ele=document.getElementById('content');

console.log('content的宽度：'+window.getComputedStyle(ele).width); //100px

行内样式和外联样式都能取到，主浏览器几乎都支持

#content{

width:100px;

height:200px;

border:2px solid blue;

padding:20px;

margin:20px;

}

var ele=document.getElementById('content');

console.log('content的宽度：'+ele.getBoundingClientRect().width); //100px

用盒模型解释边距重叠

边距重叠也称为外边距合并，指的是块的顶部外边距和底部外边距有时被组合(折叠)为单个外边距，其大小时组合到其中的最大的外边距。

发生边距重叠的基本情况有三种：

相邻的兄弟姐妹元素：毗邻的两个兄弟元素之间的外边距会塌陷(除非后者兄弟姐妹需要清除过去的浮动)。示例：

兄弟元素外边距合并

#box1{

width:200px;

height:200px;

border:1px solid red;

margin-bottom:10px;

}

#box2{

width:100px;

height:100px;

border:1px solid blue;

margin-top:30px;

}

可以发现两个盒子中间的距离不是“上面盒子的下边距”与“下面盒子的上边距”的和，而是两者中的较大值

块级元素与其第一个或最后一个子元素

父子元素外边距合并

#box{

width:330px;

height:335px;

background:pink;

}

#box1{

width:200px;

height:200px;

border:1px solid red;

margin:10px;

}

#box2{

width:100px;

height:100px;

border:1px solid blue;

margin-top:30px;

}

可以发现父容器的顶部和上面子容器的顶部合并，父容器的底部和下面子容器的底部合并

空块元素

如果存在一个空的块级元素，其border、padding、inline content、height、min-height都不存再，此时它的上下外边距将会合并

参考: