css盒模型

题目：谈谈对css盒模型的基本认识

• 基本概念：标准模型+IE模型
• 标准模型和IE模型的区别
  （计算宽度和高度的不同）
• css如何设置这两种模型
• js如何设置获取盒模型对应的宽和高
• 实例题（根据盒模型解释边距重叠）

• BFC（边距重叠解决方案）

  
  
  
  

css如何设置这两种模型？

box-sizing：content-box（标准模型，也是浏览器默认模型）
box-sizing：border-box（ie模型）

js如何设置获取盒模型对应的宽和高？

dom.style.width/height（只能获取内联属性的值）
内联样式：直接在标签内写样式style=""
dom.currentStyle,width/height (只要是浏览器渲染出来的dom都能获取到，但是只有ie支持）
window.getComputedStyle(dom).width/height(兼容性更好，通用）

一个div中嵌套了一个div，子元素高为100px，子元素与父元素上边距为10px，问父元素高为多少，是110px还是100px？
答案：100px或者110px都对，要看父元素的盒模型怎么设置。
父元素设置了overflow：hidden时，高度为110px，没有设置的时候为100px。

补充知识（边距重叠）

边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容、补白、边框)重合在一起而形成一个单一边界。
两个或多个块级盒子的垂直相邻边界会重合，它们的边界宽度是相邻边界宽度中的最大值。注意水平边界是不会重合的。

①父子元素的边界重叠

• 上面例子中一开始时父元素的高度不是110px，而是100px，在这里发生了高度坍塌。原因是如果块元素的 margin-top 与它的第一个子元素的margin-top 之间没有 border、padding、inline content、 clearance 来分隔，或者块元素的 margin-bottom 与它的最后一个子元素的margin-bottom 之间没有 border、padding、inline content、height、min-height、 max-height 分隔，那么外边距会塌陷。子元素多余的外边距会被父元素的外边距截断。也就是说，子元素的外边距变成了父元素的外边距，父元素在进行高度计算时不会对子元素的边距进行计算。

②兄弟元素的边界重叠

    
        

            
1
            
2
            
3
        

可以看到1和2,2和3之间的间距不是50px，发生了边距重叠是取了它们之间的最大值30px。

③空元素的边界重叠

假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并：

bfc（边距重叠解决方案）

• 基本概念（块级格式上下文）
• 原理（渲染规则）
  ① bfc里的元素垂直方向上的边距会发生边距重叠
  ②bfc区域不会与浮动元素发生重叠
  ③ bfc在页面上是一个独立的容器，外面的元素不会影响里面的元素，里面的元素不会影响外面的元素
  ④ 计算bfc高度的时候，浮动元素也会参与计算
• 如何创建bfc
  ①float值不为none
  ②position的值不为static/relative
  ③display为inline-box/table/table-cell
  ④overflow：auto/hidden
• bfc的使用场景
  ①清除浮动（解决父元素高度坍塌，使父元素计算高度时也将浮动元素高度计算进去）
  ②BFC垂直方向边距重叠
  解决方法：给其中一个元素再添加一个父元素，给父元素触发bfc
  ③布局，左边固定，右边自适应（bfc元素不与浮动元素重叠）