盒在对文档进行布局时，浏览器渲染引擎会按照标准将页面上的所有元素表示为一个矩形框。CSS确定这些框的大小、位置和属性。每个框由四部分组成，即：content、padding、border、margin。属性解释：content内容区域，内容区域可以定义内容区域和border边框内容区域之间的width和heightpadding空间以及padding周围边框的粗细和样式。元素外边缘的边距和间距块级框和行内框在CSS中，我们广泛使用两种“框”——块级框和行内框。两种类型的框在页面布局中具有以下特点：块级框框将包裹并显示width和height属性可以发挥作用InnermarginpaddingOutermarginmarginBorder边框会将其他元素推离当前框周围默认框宽度将与父行内框的宽度相同框不会换行width和height属性没有影响将应用垂直填充、边距和边框，但不会将其他行内框推开。应用水平填充、边距和边框并将其他内联框推开。我们通过设置盒子的display属性来控制盒子的对外显示类型。盒模型类型全CSS盒模型适用于块级盒，内联盒只使用盒模型中定义的部分内容。盒模型有两种类型，标准盒模型和IE盒模型。标准框模型在标准框模型中，如果给框设置了宽高，实际上设置的是内容区域的宽和高。innermarginpadding和border边框加上设置的宽高共同决定了盒子的大小。IE盒子模型在IE盒子模型中，如果给盒子设置了宽高，那么盒子的大小就是设置的宽高值。如果盒子设置了padding和border，content的大小其实就是盒子的大小减去padding和border的大小后的值。差异比较假设我们定义如下box.box{width:100px;高度：100px；边距：25px；填充：20px；border:15pxsolid#000;}标准框模型框图标：框宽度=宽度+padding-left+padding-right+border-left+border-right(100+20+20+15+15=170)contentwidth=width(100)IE盒子模型图示：boxwidth=width(100)contentWidth=width-padding-left-padding-right-border-left-border-right(100-20-20-15-15=30)In标准的盒子模型，我们用CSS来定义盒子的宽高，并不是盒子所占空间的大小。在IE盒子模型中，使用CSS来定义盒子的宽高，也就是盒子的大小。盒模型切换在现代浏览器中，几乎所有的浏览器，默认的盒模型都是标准盒模型。如果要使用IE盒子模型，可以通过设置属性box-sizing:border-box来设置。在IE浏览器天下的早期，如果HTML文档缺少DOCTYPE文档定义标签，在IE6、IE7、IE8下默认使用IE盒子模型。箱型没有好坏之分，我们根据情况的不同选择不同的箱型。折叠边距（重叠边距）折叠边距（重叠边距）不是错误；之前我们讲过BFC，下面是W3C关于BFC的相关说明原文：Inablockformattingcontext,boxesarelayoutanafterother,vertically,beginningfromthetopofacontainingblock.两个同级框之间的垂直距离由“边距”属性确定。块格式化上下文中相邻块级框之间的垂直边距折叠。翻译过来就是：“在BFC中，盒子在垂直方向上一个接一个地堆叠，两个盒子在垂直方向上的距离由margin属性决定。块级盒子之间的边距在BFC的垂直方向会塌陷。”W3ConCSS中的FeaturesChapter8.3.1详细解释了collapsingmargin的特性。这里我简单总结一些（不全）。点击查看详细内容。折叠边距只会发生在垂直方向，水平边距不会折叠。根元素框的边距不折叠如果一个有间隙的元素有相邻的顶部和底部边距，它的边距会与后续兄弟元素的相邻边距一起折叠，但产生的边距不会与父块的底部折叠边距发生冲突。当折叠两个或更多边距时，生成的边距宽度是折叠边距宽度的最大值。在负边距的情况下，从正相邻边距的最大值??中减去负相邻边距的绝对值的最大值。如果没有正边距，则从零减去相邻边距绝对值的最大值。collapsing发生在同一层的相邻元素之间，相邻元素的边距重叠父子元素边距重叠空块级元素重叠解决方法知道了margincollapse的原因，解决方法自然是小菜一碟了。改变文档流，使用float或position触发元素的BFC（创建BFC的元素及其子元素不会折叠）。只有块级框才会折叠。将元素框类型更改为行内框。回答一个完整的面试框模型由四部分组成，分别是内容区域、内边距padding、border边框、外边距margin；边距不参与箱子尺寸的计算；盒模型有IE盒模型和标准盒模型两种；有时IE盒子模型也被称为怪异盒子模型；在现代浏览器中，盒子模型是默认的，我们可以通过CSS的box-sizing:border-box将盒子模型修改为IE盒子模型；在IE盒子模型中，盒子的宽度就是我们定义的width值，而在标准盒子模型中，盒子的宽度就是content的宽度值加上left和rightpadding加上leftand的值正确的边界。延伸阅读讲解CSS盒模型（boxmodel）和CSS3新盒模型计算方法box-sizingCollapsingmarginsBFC前端面试系列其他文章前端面试CSS系列--BFC前端面试CSS系列--DIV垂直水平居中前端面试CSS系列——移动端1PX像素问题
