CSS盒模型全面介绍了

*{margin:0;填充：0；}#sec{背景：#f00；}.child{高度：100px；margin-top:10px;背景：黄色；}盒模型的基本概念：标准模型+IE模型。包括margin,border,padding,content标准模型和IE模型的区别如何设置css获取两种模型的宽高如何在js中设置和获取box模型对应的宽高解决方案，和IFC）解决marginoverlap1.基本概念：标准模型+IE模型什么是盒模型：盒模型又叫盒子模型（BoxModel），它包括元素内容（content），内边距（padding）)、边框(border)、外边距(margin)几个元素。如图：由于IE盒子模型的怪异模式，导致IE模型和标准模型的内容计算方式不同。2.标准模型和IE模型的区别IE模型和标准模型唯一的区别是content的计算方式，如下图：IE模型元素宽度width=content+padding，height的计算方式是同标准模型元素widthwidth=content，高度计算相同。3、如何设置CSS获取这两个模型的宽高。通过CSS3的新属性box-sizing：content-box|border-box，设置框模型为标准模型（content-box）和IE模型（border-box）。.content-box{box-sizing:content-box;宽度：100px；高度：50px；填充：10px；边框：5px纯红色；margin:15px;}.content-box设置为标准模式，其元素宽度width=100px。.border-box{box-sizing:border-box;宽度：100px；高度：50px；填充：10px；边框：5px纯红色；margin:15px;}.border-box设置为IE模型，其元素宽度width=content+2padding+2border=70px+210px+25px=100px。4、如何设置javascript获取相应的盒模型宽高。dom.currentStyle.width/height获取最终渲染的宽高，只有IE支持该属性。window.getComputedStyle(dom).width/height与(2)相同，但支持多种浏览器，包括IE9及以上。dom.getBoundingClientRect().width/height也是渲染后的宽高，大部分浏览器都支持。IE9及以上版本支持，另外还可以获取相对于窗口的上下左右距离。以上API已经在浏览器中进行测试。如果您有兴趣，可以全部尝试。5.边距重叠当两个垂直边距相遇时，它们将形成一个边距，其组合边距高度等于两个组合边距高度中的较大者。注意：margincollapsing仅发生在正常流中块框的垂直边距，而不发生在内联框、浮动框或绝对定位之间。考虑以下示例：*{margin:0;填充：0；}#sec{背景：#f00；}.child{高度：100px；margin-top:10px;背景：黄色；}这里父元素section的高度是多少，100px，但是我们给section设置overflow:hidden后高度变成了110px，为什么就是，其实这里我们为父元素创建了一个BFC，什么是BFC，请看下面的介绍。6.BFCBFC（BlockFormattingContext）：块级格式化上下文。BFC决定元素如何定位其内容，以及它如何与其他元素关联和交互。在设计视觉布局时，BFC提供了一个环境，HTML元素可以在其中按照一定的规则进行布局。一个环境中的元素不会影响其他环境中的布局。BFC的原理（渲染规则）BFC元素的垂直外边距会重叠。属于不同BFC的边距不重叠BFC的区域不与浮动元素的布局重叠。BFC元素是一个独立的容器，外面的元素不会影响里面的元素。里面的元素也不会影响外面的元素。BFC计算高度时，浮动元素也会参与计算（clearfloating）。如何创建BFCoverflow是不可见的；float的值不是无；position的值不是静态的或相对的；display属性为inline-blocks,table,table-cell,table-caption,flex,inline-flex；说了这么多规则，我们再放几个真实的类出来看看。

1