从盒模型到BFC的深入理解

小咪咪 2022-05-21 13:42 171阅读 0赞

### 盒模型的基本概念 ###

盒模型是描述DOM元素位置的一种模型，它由内容(content)、内边距(padding)、边框(border)、外边距(margin)组成， CSS盒子模式都具备这些属性。

### 标准模型与IE盒模型的区别 ###

#### 1、宽高计算方式的差别 ####

标准盒模型的宽度、高度只包括内容的宽度高度。

![标准盒模型][70]

IE盒模型的宽度、高度，包括content + height + border

![怪异盒模型][70 1]

#### 2、当内容区（content）域超过width时的区别 ####

当内容区超过width的范围时：

标准盒模型的内容区会扩大，始终与width保持一致。

![这里写图片描述][70 2]

怪异盒模型，会根据原有宽度（原来的width），优先保证border、padding，然后把剩下的区域分给content。并不会因为content变大，而width变大。

![这里写图片描述][70 3]

[参考链接][Link 1]

### 通过CSS如何设置这两种盒模型 ###

/*标准盒模型*/
    box-sizing: content-box;
    
    /*怪异盒模型*/
    box-sizing: border-box;

### JS如何获取或者设置盒模型对应的宽和高 ###

let dom = document.getElementById("test")
    
    
    方法一：
    
    dom.style.width
    
    结果为：
    
    ""
    
    方法二：
    
    dom.getBoundingClientRect(dom)
    
    
    DOMRect {
       x: 200, y: 310, width: 946, height: 300, top: 310, …}
    bottom:610
    height:300
    left:200
    right:1146
    top:310
    width:946
    x:200
    y:310
    __proto__:DOMRect
    
    
    
    方法三：
    window.getComputedStyle(dom).width
    window.getComputedStyle(dom).height
    
    方法四：
    
    currentStyle:该属性只兼容IE,不兼容火狐和谷歌
    
    但是currentStyle.width在IE浏览器下拿到的值是auto,因为css中没有声明宽度。如果声明了宽度，那么currentStyle.width得到的值是一个确定的值。

### BFC的解决方案 ###

BFC(边距重叠解决方法)

BFC的基本概念

块级格式化上下文，内联格式化上下文（IFC）

从样式上看，具有 BFC的元素与普通的容器没有什么区别，  
从功能上看，BFC相当于构建了一个密闭的盒子模型，

在BFC中的元素不受外部元素的影响；

#### BFC的原理（BFC的渲染规则） ####

1、BFC在这个元素，垂直方向会发生重叠

2、BFC的区域，不会与浮动元素的Box重叠

3、BFC在页面上是一个独立的容器，

4、计算BFC高度时，浮动元素也会参与计算

#### 如何创建一个BFC ####

*  float:left ,right (非none属性)
 *  position:absolute,fixed （非static属性）
 *  display:inline-block,table-cell,table-caption;(行内块元素与表格元素)
 *  overflow：hidden，auto，scroll （非 visible属性）
 *  display: flow-root
 *  column-span: all

#### BFC的使用场景 ####

##### 1.bfc垂直方向边距重叠 #####

<section class="margin">
    
            <style> .margin{ width: 100%; height: 300px; } p{ margin-top: 10px; margin-bottom: 20px; background-color: rebeccapurple; } .overflow{ overflow: hidden; } </style>
            <p>1</p>
            <div class="overflow">
                <p>2</p>
            </div>
            <p>3</p>
        </section>

![这里写图片描述][70 4]

##### 2、BFC不与float重叠 #####

<section class="layout">
            <style> .layout{ background-color: aqua; width: 100%; height: 300px; } .layout .left{ float: left; width: 200px; height: 200px; background-color: rebeccapurple; } .layout .right{ height: 100%; overflow: auto; background-color: green; } </style>
            <div class="left">
                我是浮动
            </div>
            <div class="right" id="test">
                我是右侧
            </div>
        </section>

![这里写图片描述][70 5]

##### 3、BFC子元素，即使是float，也会参与计算。一种清除浮动的方式 #####

<section class="float">
            <style> .float{ overflow: auto; /*display: inline-block;*/ } .floatItem{ float: left; font-size: 30px; background-color: rebeccapurple; } </style>
            <div class="floatItem">
                我是浮动元素
            </div>
        </section>

![这里写图片描述][70 6]

[70]: /images/20220521/7c0d9de4593e494d96296fda86255ad7.png
[70 1]: /images/20220521/07c9adb11d7a4d738de8608180c58228.png
[70 2]: /images/20220521/4320f7503452469fb17c040ec073dc83.png
[70 3]: /images/20220521/f58a9723759c4ac89a934aa28be110d1.png
[Link 1]: https://blog.csdn.net/y491887095/article/details/52554151
[70 4]: /images/20220521/7665131381c740bfa8ba8ec5825653ca.png
[70 5]: /images/20220521/dbdb1c50e8934593a1d10261d8a8709d.png
[70 6]: /images/20220521/c1dd4a9ed8b8468b8defcd5597d464ba.png