【知识梳理】3.2CSS盒模型

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

1.基本概念

标准模型+IE模型，margin、border、padding、content

2.标准模型和IE模型的区别

计算宽度、高度的不同，如何计算？
标准模型的宽度和高度=content的宽度和高度；
IE模型的宽度和高度=content+padding+border的宽度和高度。

3.CSS如何设置这两种模型

使用css3属性box-sizing设置
标准模型box-sizing:content-box；(浏览器默认)
IE模型box-sizing:border-box。

4.JS如何设置、获取盒模型对应的宽和高

dom.style.width/height；只能取出内联样式的宽高。
dom.currentStyle.width/height；浏览器渲染后的宽高，仅IE支持。
window.getComputedStyle(dom).width/height；兼容Firefox，Chrome。
dom.getBoundingClientRect().width/height；计算一个元素的绝对位置，根据视窗viewpoint可获取到width，height，top，left。getBoundingClientRect()

5.实例题

一个题目：块级元素嵌一个子块级元素，子元素的高度为100px,子元素与父元素的上边距是10px,求父元素的高度？答案100px,110px都对。（根据盒模型解释边距重叠，拔高题）

考察点：边距重叠

• 1.父子元素。
• 2.兄弟元素：取margin-top和margin-bottom的最大值作为边距。
• 3.空元素：空元素的margin-top和margin-bottom取一个最大值作为边距。

        
        
overflow: hidden;给父元素sec创建的一个BFC。父元素上不加此句话，父元素高度100px,加上此句话，父元素高度110px
    

6.BFC(边距重叠解决方案)/IFC

BFC基本概念：

• BFC:block formatting context，块级格式化上下文；
• IFC:inline formatting context，内联元素格式化上下文。

BFC的原理（渲染规则）：

• 1.在BFC元素垂直方向的边距会发生重叠；
• 2.BFC的区域不会与浮动元素的box重叠，可用来清除浮动和布局的；
• 3.BFC在页面上是一个独立的容器，外面的元素不会影响里面的元素，反之，里面的元素不会影响外面的元素；
• 4.计算BFC高度的时候，浮动元素也会参加计算。

如何创建BFC？

• 1.float的值不为none；
• 2.position的值不为static或者relative；
• 3.display属性值为inline-block, table-cell, 和 table-caption，table;
• 4.overflow的值不为visiable，即overflow:auto;/overflow:hidden都可创建BFC

BFC的使用场景?

• 1.BFC垂直方向边距重叠

    

        
        
BFC垂直方向边距重叠，margin: 5px auto 25px;
        
1
        
2
        
3
        
        
清除重叠，给子元素增加一个父元素f，给他f创建一个BFC
        
1
        

            
2
        
        
        
3
    

• 2.BFC元素不会与浮动元素重叠

    

        
        
左侧固定宽度，右侧自适应；左浮动，且右侧高度高于左侧
        
float: left;height: 100px;
        
height: 110px;
        
        
BFC不与float重叠
        
float: left;height: 100px;
        
height: 110px;用overflow: auto;创建BFC，就不会再与左侧部分发生重叠
    

• 3.BFC子元素即使是float也会参与计（正常情况下，子元素是float元素时，不参与计算）

    
    
子元素是float元素时，不参与计算，父元素红色背景不显示
    

                
        
我是浮动元素,子元素是浮动元素的时候，高度计算没有包含进来，此时父级元素高度为0
    

    
BFC子元素即使是float也会参与计算，父元素为BFC，背景为红色
    

                
        
我是浮动元素,BFC子元素是浮动元素的时候，参与计算，此时父级元素高度是21px;