谈谈你对css盒模型的理解

一、基本概念

标准模型 和 IE盒模型

内容：border + content+ margin+padding

两种盒模型的区别

计算高度和宽度的方式不同

1.png

标准盒模型的计算方式 是content 的高度和宽度

1.png

IE盒模型的计算方式是 content+padding+border

二、css如何设置这两种模型

 box-sizing: border-box; // ```IE```盒模型
  box-sizing: content-box;  //标准盒模型

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

 <div class='content' id='content' style="width: 500px;height: 100px;">我是浮动元素</div>
 <script>
        const content = document.getElementById('content');
</script>

1.获取内联样式的宽、高.. (只能获取内联样式）

content.style.width    //500px 
content.style.height  //100px

2.内联和外联样式都能取到（只支持IE）

content.currentStyle.width / height

3. 所有的都支持

window.getComputedStyle(content).width/height

4. 计算绝对位置，能获取4个元素值 top right width height

content.getBoundingClientRect().width  /  height  / top  /right

三、盒模型边距重叠

对于行内元素 margin-top margin-bottom设置无效，margin-left margin-right有效！ 对于相邻的块级元素margin-top和margin-bottom两者叠加按照一定的规则

（1） 都是整数 margin值取两者的最大值

（2） 都是负数 margin值取最小值

（3）两者正负相反，margin值取两者之和

四、BFC（块级格式化上下文）解决边距重叠问题（也可以清除浮动）

原理：（渲染规则）

（1） BFC这个元素的垂直方向的边距会发生重叠。
（2）BFC的区域不会与浮动元素的box重叠
（3）BFC在页面是一个独立的容器，内外元素互补干涉
（4）计算BFC高度的时候浮动元素也会参与计算

五、怎么创建BFC

根元素：
（1） float属性不为none

（2） position为 absolute或fixed

（3） display为inline-block table-cell`````` table-caption``````flex`````` inline-flex

（4） overflow不为visible

六、应用场景

（1） 父元素和子元素的边距重叠 1.png

 <section>
        <style>
            #par {
                width: 100px;
                height: 100px;
                overflow: hidden; 
                background-color: red;
                margin: auto;
            }

            #child {
                width: 50px;
                height: 50px;
                margin: 25px;
                background: yellow;
            }
        </style>
        <div id="par">
            <div id="child"></div>
        </div>
    </section>

（2） BFC不与float重叠

1.png 2.png

 <section id="layout">
        <style>
            #layout {
                width: 100%;
                /* background-color: red; */
            }

            #layout .left {
                width: 100px;
                height: 100px;
                background: darkcyan;
                float: left;
            }

            #layout .right {
                overflow: auto;
                height: 130px;
                background-color: darkgoldenrod;
            }
        </style>
        <div class="left">左浮动</div>
        <div class="right">右自适应</div>
    </section>

（3）BFC子元素即使是浮动元素，也不影响父集元素的计算。
如果不创建BFC 父级元素的高为 0

<section id='float'>
        <style>
            #float {
                margin-top: 10px;
                background-color: red;
                overflow: auto;
            }

            .content {
                float: left;
                font-size: 30px;
                width: 500px;
                height: 100px;
            }
        </style>
        <div class='content' id='content' style="width: 500px;height: 100px;">我是浮动元素</div>
    </section>