CSS盒子模型、邊距重疊、計算寬高

CSS盒模型筆記，主要包括了盒模型的標準模式和IE模式的區別，通過box-sizing屬性設置寬高的計算方式，盒模型中的邊距重疊問題，幾種通過js獲取寬高的方法，BFC相關概念以及BFC的幾種使用場景。

1、IE模式和標準模式

先敬上一張描述這兩種模式的圖：

標準模式和IE模式區別在於計算width與height的方式。但是總寬度和總長度的計算方式是一樣的。

可以通過box-sizing屬性設置計算寬高的方式。IE8+支持box-sizing。 

 

2、box-sizing屬性

屬性值與含義如下

content-box，默認值，標準模式

border-box，寬高計算方法與IE模式一致

padding-box，寬高計算方法是content+padding

 

3、邊距重疊

邊距重疊指的是相鄰的元素在垂直方向上出現的邊距重疊，而不是將邊距相加。

邊距重疊發生在相鄰元素，父子元素之間。

相鄰元素比如上元素margin-bottom:50px;下元素margin-top：70px，最終兩個元素之間的邊距爲70px;

父子元素之間邊距重疊的情況稍有不同。比如子元素marigin-top：50px;實際上父子元素並不會出現50px的邊距。父子元素上邊界重疊，並且外邊距使父元素上方也有50px的邊距空間。

<section>
        <style>
            #parent {
                background: red;
                width: 100px;
                height: 100px;
                /*margin:100px 0;*/
                /*border:1px solid #eee*/
            }

            #child {
                margin: 50px 0;
                background-color: green;
                height: 50px;
                width: 50px;
            }
        </style>
        <div id="parent">
            <div id="child"></div>
        </div>
    </section>

結果如下：

此時如果設置父元素margin-top:100px，則父子元素上邊界仍然重疊，並且上方有100px的邊距空間，而不是150px；

如果需要消除這種父子重疊效果，可以有以下幾種方法：

（1）、設置父元素的border不爲none，或者設置padding，增加一些字符等內容，讓父子之間不會直接“接觸”。

（2）父元素浮動，float 除 none 以外的值； 
（3）父元素設置爲定位元素，position（absolute，fixed）； 
（4）父元素的display 爲以下其中之一的值 inline-block，table-cell，table-caption；

（5）父元素的overflow 設置除了 visible 以外的值（hidden，auto，scroll）；

其中2、3、4、5都能讓父元素成爲一個BFC。

如果是兄弟元素之間消除邊距重疊，需要將兄弟元素放到一個BFC中，方能達到效果。

 

4、如何獲取盒子的寬高

（1）、dom.style.width/height，只能獲取內聯樣式中的width和height

（2）、window.getComputerStyle(dom).width/height，比較通用，推薦這種寫法

（3）、dom.currentStyle.width/height，只能在IE下使用

（4）、dom.getBoundingClientRect().width/height，也比較通用，但是沒用過

 

5、BFC

BFC相關內容移步CSS中的BFC