面试常见问题之css盒模型

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

基本概念：标准模型+IE模型

相关问题及答案：

1）标准模型和IE模型的区别：

CSS盒模型的标准模型和IE的盒模型的区别在于宽度不同。css的宽度是指content的宽度，而IE盒模型则是content+padding+border

1.png

2.png

2) CSS如何设置这两种模型

​ 利用 box-sizing：content-box和box-sizing：border-box来区别两种盒模型。浏览器默认的是content-box。

3） JS如何设置获取盒模型对应的宽和高

​ dom.style.width/height(只能取到内联式的宽和高)

​ dom.currentStyle.width/height(能及时拿到渲染后的宽和高，但是只有IE支持)

​ window.getComputedStyle(dom).width/height(支持所有浏览器)

​ dom.getBoundingClientRect().width/height(计算绝对位置)

4）实例题（根据盒模型解释边距重叠）

1583124314684.png

块级元素套了一个块元素，已知子元素的高度为100px.子元素与父元素的上边距距离高度是10px.那么父盒子的高度是多少？

答案：100px或110px
代码如下：

代码添加完 打开浏览器后如下图所示:

1583147859227.png

发现父盒子的高度为100px。
然而这时候我们并没有看见父盒子的颜色，所以尝试添加overflow-hidden尝试发现红色区域露了出来

1583147584523.png

高度也发生了变化 为110px

1583147679226.png

5）BFC(边距重叠解决方案)

问题：

一、BFC的基本概念：块级格式化上下文 （引申：IFC内联元素上下文）

二、BFC的原理（BFC的渲染规则）：
1.BFC的边距会发生重叠

2. BFC的区域不会与浮动元素的BOX重叠
3. BFC在独立页面上是一个容器 外面的元素不会影响他里面的元素 里面的元素也不会影响它外面的元素
4. 计算BFC高度的时候，浮动元素的高度也会计算

三、如何创建BFC？

1）根元素
2）float属性不为none(CSS属性的默认值为none，只要你设置了浮动，当前元素就创建了BFC)
3）position不为static和relative（position的默认值是static）
4）overflow不为visible （可以为hidden等）
5）display为inline-block, table-cell, table-caption, flex, inline-flex

四、BFC的使用场景有哪些？

示例代码：

首先设定BFC发生边距重叠的情况

    
    
    
    


    

        
        

    



    
    
1
    
2
    
3

打开发现 2的下边距和3的上边距发生重叠

1583150061936.png

如何消除这种重叠呢？

只需要给子元素创建一个父元素 而父元素创建一个BFC即可 如下图所示：

1583150205775.png

打开浏览器

1583150452762.png

再次利用float创建双栏布局 左侧固定 右侧自适应

让浮动元素的BOX重叠

    
    
    
    



    

        
        

    
    

    

        
        
1
        

            
2
        

        
3
    

    

        
        
        

            

            


        

    

打开浏览器 如下图所示:

1583151249790.png

给右侧盒子加一个overflow：auto；让其成为BFC 如下图所示 发现已经解决.

1583151516110.png

设定：计算高度的时候，浮动元素的高度没有计算

    
    
    
    



    

        
        

    
    

    

        
        
1
        

            
2
        

        
3
    



    
    

        
        
        

            

            


        

    

    



    
我是浮动元素

打开浏览器

1583152286550.png

让父元素变成BFC

1583152523929.png

打开浏览器可以看见

1583152547165.png

最终代码

    
    
    
    



    

        
        

    
    

    

        
        
1
        

            
2
        

        
3
    



    
    

        
        
        

            

            


        

    



    
    

        

        
我是浮动元素