题目：谈谈你对 CSS 盒模型的认识涉及知识点(层层递进):基本概念：标准模型+ IE模型(区别)CSS如何设置这两种模型JS如何设置获取盒子模型对应的宽和高实例题(根据盒模型解释边距重叠)BFC(边距重叠解决方案)CSS盒模型1. 基本概念：标准模型+ IE模型从上图可以看到标准 W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。从上图可以看到 IE 盒子模型的范围也包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 pading。2. CSS如何设置这两种模型box-sizing:conent-box;box-sizing:border-box;3.JS如何设置获取盒子模型对应的宽和高dom.style.width/heightdom.currentStyle.width/height (ie支持)window.getComputedStyle(dom).width/height;dom.getBoundingClientRect().width/height;4. 实例题(根据盒模型解释边距重叠)如上图:有两个元素其中子元素高度为100px,子元素与父元素的上边距为 10px,求父元素的实际高度？答案:说100px 对，说110 也对，为什么捏？这个要看父元素的盒模型要怎么设置的，上代码演示咯，注意看噢： <style> html,*{ padding: 0;margin: 0; } #sec{ background: #f00; } .child{ height: 100px; margin-top: 10px; background: yellow; } </style></head><body> <section id="sec"> <article class="child"> </article> </section></body>运行效果：上图证明 100px 是对的。接着我们给元素加个 overflow:hidden,然后在看效果：你会发现这时高度为 110px, 这时大家可能会疑问,为什么给父级元素设置一个 overflow:hidden以后，它的高度就成 110 呢，这块的基本原理是啥呢，咋就这样呢？说这个之前，先引用一个知识点：上面代码是父子元素边距重叠，那么还有两种情况边距重叠就是，一种是兄弟元素，就是两个 div 挨着，每个都上边距或者下边距，那么重叠的原则就是取最大值。来回答上面问题：给父级加了 overflow:hidden,其实就是给父级元素创建一个BFC(块级格式化上下文)，那什么是BFC，请看下一个话。5. BFC(边距重叠解决方案)BFC 的基本概念BFC 的原理如何创建 BFCBFC使用场景BFC 的基本概念Block Formatting Context, 块级格式化上下文，一个独立的块级渲染区域，该区域拥有一套渲染规格来约束块级盒子的布局，且与区域外部无关。BFC 的原理BFC 这个元素的垂直的边距会发生重叠BFC 的区域不会与浮动元素的 float 重叠独立的容器，内外元素互不影响计算 BFC 高度，浮动元素也参与计算如何创建 BFCfloat 不为none的时候position 不为 static 或者 relative 的时候display 与 table 相关的时候overflow 为auto, hidden 的时候BFC使用场景场景一 <style> html,*{ padding: 0;margin: 0; } #margin{ background: pink; overflow: hidden; } #margin>p{ margin: 5px auto 25px; background: red; } </style></head><body> <section id="margin"> <p>1</p> <p>2</p> <p>3</p> </section></body>]如上图，我们给每个p 设置上边距5， 下25 结果从第二个起来它的上边距，下边距都是25 而不是 30，这个就是边距重叠问题，那如何消除这个问题呢？解:就是给子元素加个一个父级元素，让你能元素创建一个 BFC，如下：运行效果如图:场景二 <style> html,*{ padding: 0;margin: 0; } #layout{ background: red; } .left { width: 100px; height: 100px; background: pink; float:left; } .right{ height: 110px; background: #ccc; } </style></head><body> <section id="layout"> <div class="left"></div> <div class="right"></div> </section></body>运行效果：从运行效果可以发现，当右侧增高的时候会侵入左侧的占位，这个是float的特性，显示这个不符合我们左右布局的目的，那怎么办呢？其实很简单，就是给右侧的元素创建一个 BFC,如下：运行效果：场景三（清除浮动的原理） <style> html,*{ padding: 0;margin: 0; } #float{ background: red; } .float{ float: left; font-size: 30px; } </style></head><body> <section id="float"> <div class="float">我的浮动的小智</div> </section></body>运行效果：可以看出父级元素的高度为0，这是为什么呀？这是因为 float 导致了元素的坍塌，所以父级元素的高度为0，这时我们给父级元素创建一个 BFC，就能解决问题。运行效果：以上就是 BFC的清除浮动原理。愿你成为终身学习者
