CSS盒子模型深入了解

内容概覽

• 基本概念
• 标準模型和IE模型的差別
• CSS如何設定這兩種模型
• JS如何設定擷取和模型對應的寬和高
• 邊距重疊是什麼
• 邊距重疊解決方案（BFC）

關于基本概念和标準模型與IE模型的差別就不再贅述，已經有很多前輩寫了相關的知識點。

這裡隻貼兩張圖

CSS如何設定這兩種模型

box-sizing:content-box;
box-sizing:border-box;
           

JS如何擷取和模型對應的寬和高

dom//document.getElementby……
dom.style.width//隻能拿到嵌入到html中的内聯樣式
dom.currentStyle.width//僅IE
window.getComputedStyle(dom).width//firefox&chrome
dom.getBoundingClientRect().width//通用，計算元素絕對位置和寬高
           

邊距重疊是什麼？

• 父子元素

<section class="parent">
        <style>
            .parent {
                height:110px;
                background: blue;
                overflow: hidden;
            }

            .parent .child {
                background: yellow;
                height: 100px;
                margin-top: 10px;
            }
        </style>
        <article class="child"></article>
    </section>
           

• 兄弟元素

<section id="margin">
        <style>
            * {
                margin: 0;
                padding: 0;
            }

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

            #margin>p {
                margin: 5px auto 25px;
                background: red;
            }
        </style>
        <p>1</p>
        <div style="overflow: hidden;"></div>
        <p>2</p>
        <p>3</p>
    </section>
           

• 空元素

<section id="empty">
        <style>
            #empty {
                margin-top: 100px;
                background: pink;
                /* overflow: hidden; */
            }

            #empty>p {
                margin: 5px auto 25px;
                background: red;
            }

            #empty>p.empty {
                /* overflow: hidden; */
            }
        </style>
        <p>1</p>
        <p class="empty"></p>
        <p>2</p>
    </section>
           

BFC

• BFC的原理
• 如何建立BFC
• BFC的使用場景

BFC的原理

BFC 即 Block Formatting Contexts (塊級格式化上下文)，它屬于上述定位方案的普通流。

具有 BFC 特性的元素可以看作是隔離了的獨立容器，容器裡面的元素不會在布局上影響到外面的元素，并且 BFC 具有普通容器所沒有的一些特性。

特性如下：

1.同一個 BFC 下外邊距會發生折疊，如果想要避免外邊距的重疊，可以将其放在不同的 BFC 容器中

2.BFC 可以包含浮動的元素（清除浮動）

3.BFC 可以阻止元素被浮動元素覆寫

建立BFC方式

overflow除了 visible 以外的值 (hidden、auto、scroll)

float值不為none

position值不為static或relative

display為 inline-block、table-cells、flex