面试视频知识点整理1-4（css盒模型）

css盒模型：

      基本概念：

1. 标准模型和IE模型区别
2. css如何设置这两种模型（box-sizing:content-box;标准模型，box-sizing:border-box;IE模型）
3. js如何设置获取盒模型对应的宽和高

   dom.style.width/height //只能取到内联的宽高
   dom.currentStyle.width/height //获取当前渲染好的宽高，只有ie支持
   window.getComputedStyle(dom).width/height //获取当前渲染好的宽高，兼容性比较好ie9及以上支持，edge12及以上
   dom.getBoundingClientRect().width/height //获取真实的宽高，一般用于确定位置  

    

4. 实例题（根据盒模型解释边距重叠）父元素里包着一个子元素，子元素高100px,margin-top：10px;问父元素高是多少？给兄弟盒子设置一个是margin-top,一个是margin-bottom时会出现重叠，取较大的那个margin值
5. BFC（边距重叠解决方案）IFC，BFC的基本概念，BFC的基本原理如何创建BFC ？BFC使用场景？  1）基本概念：块级格式化上下文。             2)BFC原理：渲染规则，a、垂直方向的边距会重叠。b、BFC区域不会与浮动的box重叠。c、BFC是一个独立的容器，BFC区域不会影响外面的元素外面的元素也不会影响里边的元素。d、计算BFC高度的时候浮动元素也会参与计算               3）创建BFC：a、overflow:hidden。 b、float:none。c、设置position：absolute。d、insplement属性。             4）使用场景：a、边距重叠。b、浮动元素重叠。c、清楚浮动。

         

转载于:https://www.cnblogs.com/llcMite/p/10787272.html