CSS 盒模型、解決方案、BFC 原理講解--摘抄

PS：內容比較基礎，目的只是覆蓋面試知識點，大佬能夠 history.back(-1)

W3C 標準盒模型 & IE 怪異盒模型

頁面上顯示的每一個元素（包括內聯元素）均可以看做一個盒子，即盒模型( box model )

盒模型由 4 部分組成，從內到外分別是：content padding border margin

W3C 標準盒模型一個元素的寬度（高度以此類推）應該這樣計算：

1 2 3

一個元素的寬度 =  content 盒子總寬度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

而IE 怪異盒模型一個元素的寬度（高度以此類推）倒是這樣計算的：

1 2 3

一個元素的寬度 =  content + padding + border 盒子總寬度 = margin-left + width + margin-right

解決方案 box-sizing

1 2 3 4 5

// W3C 標準盒模型（瀏覽器默認） box-sizing: content-box; // IE 怪異盒模型 box-sizing: border-box;

當咱們設置 box-sizing: border-box; 時，border 和 padding 就被包含在了寬高以內，和 IE 盒模型是同樣的。

因此，爲了不你同一份 css 在不一樣瀏覽器下表現不一樣，最好加上：

1 2 3 4 5

*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

<style> * { margin: 0; padding: 0; } #box { width: 100px; height: 100px; padding: 50px; border: 5px solid red; margin: 50px; } </style> <div id="box" style=""></div> <script> let box = document.getElementById('box') // 只能取到內聯樣式的寬高 console.log('style:' + box.style.width) // 100px // 內聯樣式和外聯樣式的寬高都能取到，但只有 IE 支持 console.log('currentStyle:' + box.currentStyle.width) // 100px // 內聯樣式和外聯樣式的寬高都能取到，幾乎全部主流瀏覽器都支持 console.log('getComputedStyle:' + getComputedStyle(box).width) // 100px // 內聯樣式和外聯樣式的寬高都能取到，幾乎全部主流瀏覽器都支持，取到的是盒子總寬度 console.log('getBoundingClientRect:' + box.getBoundingClientRect().width) // 210 </script>

BFC

BFC：塊級元素格式化上下文

IFC：內聯元素格式化上下文（面試不常考）

BFC 原理

1. 在 BFC 的垂直方向上，邊距會發生重疊

2. BFC 區域不會與 浮動區域重疊

3. BFC 在頁面上是一個獨立的容器，與其餘元素互不影響

4. 計算 BFC 高度時，浮動元素也會參與計算

如何建立 BFC

1. float 值不爲 none，只要設置了浮動，當前元素就建立了一個 BFC

2. position值不爲static，只要設置了定位，當前元素就建立了一個 BFC

3. display 值不爲默認，只要設置了display，當前元素就建立了一個 BFC

4. overflow 值不爲 visible，只要設置了overflow，當前元素就建立了一個 BFC

 

 

1	overflow: hidden;

BFC 使用場景

解決邊距重疊問題

當元素都設置了 margin 邊距時，margin 將取最大值。爲了避免讓邊距重疊，能夠給子元素加一個父元素，並設置該父元素爲 BFC

1 2 3 4 5 6 7 8 9

<div class="box" id="box"> <p>Lorem ipsum dolor sit.</p> <div style="overflow: hidden;"> <p>Lorem ipsum dolor sit.</p> </div> <p>Lorem ipsum dolor sit.</p> </div>

侵佔浮動元素的位置

設置非浮動元素爲 BFC 便可

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<style> .one { float: left; width: 100px; height: 100px; background-color: pink; } .two { height: 200px; background-color: red; /* 設置 BFC */ overflow: hidden; } </style> <div class="one"></div> <div class="two"></div>

清除浮動

BFC 原理第 4 條：計算 BFC 高度時，浮動元素也會參與計算

固然，清除浮動還有其餘最佳實踐，這裏只是分析場景。

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<style> .one { background-color: pink; /* 設置 BFC */ overflow: hidden; } .two { float: left; } </style> <div class="one"> <div class="two">hello world</div> </div>