「本文已参与好文召集令活动，点击查看：后端、大前端双赛道投稿，2万元奖池等你挑战！」

盒模型考察

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

标准模型的宽度就是content IE模型的宽度是content+padding+border

2：标准和IE的区别

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

默认是标准模型，就是第一种打对勾的那个

4：js如何获取盒模型对应的宽高

第一种有缺陷：外联样式娶不到的哦

第二种缺陷：兼容性问题。但是他能娶到所有的宽高，因为他娶得宽高是浏览器渲染后的宽高

第三种：原理上和第二种相似。且兼容性好

第四种：经常被用来计算绝对位置。根据左上角的顶点。

5：实例：根据盒模型解释边距重叠

深色盒子父盒子，浅色子盒子，如图请求出父盒子高度

            * {
                margin: 0;
                padding: 0;
            }

            #sec {
                background-color: pink;
                /* 不加overflow: hidden，父盒子就是100.加了overflow: hidden，父盒子就是110 */
                overflow: hidden; 
            }

            .son {
                height: 100px;
                margin-top: 10px;
                background-color: blueviolet;
            }
        </style>
        <section id="sec">
            <article class="son"></article>
        </section>

解释原理：加了overflow：hidden 就会形成bfc。以前写过bfc，所以在这里简单说下

6：BFC（边距重叠解决方案）

BFC原理：

1：bfc元素的垂直方向的边距会发生重叠

2：bfc的区域不会和浮动元素的box重合

3：bfc在页面中是个独立的容器，外面的元素和里面元素互不影响

4：计算bfc高度时候，浮动元素也会参与计算

如何创建bfc

1：float值不为none，因为float值默认为nine。或者说只要浮动，当前元素就创建了bfc

2：position的值不是 relative或sticky。当前元素就创建了bfc

3：display属性为table或与table相关的，当前元素就创建了bfc

4：overflow值为hidden时候

BFC使用场景

1：bfc不与float重叠

不创建bfc时候，右侧总是欺负左侧。左侧如同受了委屈的小媳妇，敢怒不敢言

       <style>
            * {
                margin: 0;
                padding: 0;
            }

            #margin {

                background-color: pink;
            }

            .left {
                float: left;
                width: 100px;
                height: 100px;
                background-color: blueviolet;
            }

            .right {
                height: 110px;
                background-color: green;
            }
        </style>
        <!-- BFC防 -->
        <section id="margin">
            <div class="left"></div>
            <div class="right"></div>
        </section>

创建bfc后，bfc不与float重叠，加了这句话，创建了bfc，右边盒子就不会眼馋左边盒子的地盘了

        <style>
            * {
                margin: 0;
                padding: 0;
            }

            #margin {

                background-color: pink;
            }

            .left {
                float: left;
                width: 100px;
                height: 100px;
                background-color: blueviolet;
            }

            .right {
                height: 110px;
                background-color: green;
                overflow: auto;
               
                
            }
        </style>
      
        <section id="margin">
            <div class="left"></div>
            <div class="right"></div>
        </section>

2：清除浮动原理

没bfc时，父盒子高度为零

  <style>
            * {
                margin: 0;
                padding: 0;
            }

            #margin {
                background-color: pink;
            }

            .sb {
                float: left;
                /* width: 100px;
                height: 100px; */
                font-size: 30px;
                background-color: blueviolet;
            }
        </style>
        <!-- BFC垂直方向边距重叠 -->
        <section id="margin">
            <div class="sb">俺是浮动的</div>
        </section>

加了bfc状态后，父盒子高度有了浮动元素参与有了变化

bfc子元素即使是float，也会参与高度计算

        <style>
            * {
                margin: 0;
                padding: 0;
            }

            #margin {
                overflow: hidden;
                background-color: pink;
            }

            .sb {
                float: left;
                font-size: 30px;
                background-color: blueviolet;
            }
        </style>
        <section id="margin">
            <div class="sb">俺是浮动的</div>
        </section>

盒模型就讲到这，需要的可以拿去面试，不需要面试的可以查漏补缺

前端基础6/2-盒模型