盒模型及常見問題解決

什麼是盒模型

每一個html元素均可看做一個盒子，由外邊距margin、邊框border、內邊距padding、內容content組成，對這些屬性的設置，能夠實現元素的不一樣展現及佈局(eg.設置margin實現水平居中)。

盒模型分類

因爲瀏覽器對盒模型的實現不一樣，造成了：標準盒模型、IE盒模型
兩者區別：width和height定義不一樣

• 標準盒模型的寬高包括：content
• IE盒模型的寬高包括：content、padding、border

如何實現不一樣分類

因爲IE盒模型更貼合人們對於物理盒子寬高的理解，因此一般採用IE盒模型。
設置兩種模型的方法：

• box-sizing: border-box; // IE盒模型
• box-sizing: content-box; // 標準盒模型

JS如何獲取盒子寬、高

方法一：

dom.style.width/height
// 缺點：僅能獲取js顯式設置或dom標籤上設置的行內樣式中的寬高，
// 沒法獲取內聯樣式(<style>標籤設置的樣式)、外聯樣式(<link>標籤引入的樣式)中的寬高。❗️👍
複製代碼

方法二：

dom.currentStyle.width/height
// 缺點：可獲取各類方式綜合層疊計算後的寬高，但僅支持IE瀏覽器。👎
複製代碼

方法三：

window.getComputedStyle(dom).width/height
// 可獲取各類方式綜合層疊計算後的寬高，兼容性很好(IE9+)。👍👍
複製代碼

方法四：

dom.getBoundingClientRect().width/height
// `getBoundingClientRect` 可獲取元素的寬高及相對於視口原點(瀏覽器網頁部分的左上角)位置信息(top、left)。👍
複製代碼

什麼是邊距重疊

邊距重疊：是指父子、相鄰兄弟元素的外邊距會重疊在一塊兒，大小取較大的那個邊距。

如何解決邊距重疊 —— BFC（塊級格式化上下文）

BFC的渲染規則：

• BFC元素垂直方向的外邊距會重疊；
• BFC元素區域不會與浮動元素重疊(父級添加overflow: hidden清除浮動的原理)；
• BFC元素是一個獨立的區域，它不會影響外部佈局，外部元素也不會影響它內部佈局；
• 計算BFC高度時，浮動元素也會參與計算。

如何建立BFC

• float 不爲 none
• position 不爲 static、relative
• display 不爲 inline
• overflow 不爲 visible

其它

我將學習、工做中的積累作成了開源項目：Blog

歡迎關注並一塊兒討論學習。