css盒模型

時間 2019-11-12

標籤 css 模型欄目 CSS 简体版

原文原文鏈接

題目：談談你對css盒模型的認識

一、基本概念：標準模型＋ie模型

二、標準模型和IE模型的區別

三、css如何設置這兩種模型

四、js如何設置獲取盒模型對應的寬和高

五、實例題 (根據盒模型解釋邊距重疊)

六、bfc (邊距重疊解決方案)

1、基本概念和區別

如圖，看到寬度和高度，他所指的內容，標準模型和ie模型的區別就是，寬度，高度的計算方式不一樣，標準模型的寬度指的就是content的寬度，不包括padding和border，而ie模型是計算padding和border的。

2、css如何設置這兩種模型

box-sizing:content-box;(瀏覽器默認的方式)
box-sizing:border-box;

3、js如何設置獲取盒模型的寬和高

dom.style.width/height

這個寬和高是否就可以取到全部盒模型的寬和高呢，顯然不是，這種方式能取到的是盒模型的內聯屬性（css的三種方式：內嵌，<style> <link>），這種方式只能拿到第一種,這是它的侷限性

dom.currentStyle.width/height

這個是拿到瀏覽器即時運行後的結果，也就是說無論經過內嵌，style，link設置的寬高，這個最終拿到的是渲染之後的寬和高，這個是相對來講比較準確的，可是有一個缺點，這個屬性只有ie支持（這是致命的缺點）

window.getComputedStyle(dom).width/height

這個是兼容firefox和chrome的，因此2和3的區別，下面的通用性好一些，原理都是類似的

dom.getBoundingClientRect().width/height

這個也能拿到元素的真實寬高，那麼這個元素的做用是什麼呢，就是計算元素的絕對位子，因此這個拿到的是4個元素，top,left,width,height,因此這個也能拿到

4、實例題

如圖，問父元素的高度是100仍是110，理論上均可以，最終取決於它的盒模型是怎麼樣的

<!--box.html-->
<body>
　　<section id="sec">
　　　　<style>
　　　　　　#sec{
　　　　　　　　background: red;
　　　　　　}
　　　　　　.child{
　　　　　　　　height: 100px;
　　　　　　　　margin-top: 10px;
　　　　　　　　background: yellow
　　　　　　}
　　　　</style>
　　　　<article class="child"></article>
　　</section>
</body>

此時的盒模型的高度是100，若是把#sec樣式加一個overflow，發現盒模型的高度變成了110

爲何呢？如今的這個狀況是父子元素邊距重疊，取最大值的原則，這裏經過對父元素加一個hidden，也就至關於給父元素建立了一個bfc，也就是塊級格式化上下文，那麼什麼是bfc呢

5、BFC(邊距重疊解決方案)

一、BFC的基本概念：塊級格式化上下文

二、BFC的原理（說白了就是BFC的渲染規則）：

這個規則是什麼呢？我以爲你們能說出4點就夠了

第一個就是BFC這個元素的垂直的邊距會發生重疊
第二個是BFC的區域不會與浮動元素的box重疊，這個確定是用來清除浮動的。
第三個， BFC在頁面上是一個獨立的容器，外面的元素不會影響它裏面的元素，反過來，裏面的元素也不會影響到外面到元素。
第四個就是計算BFC高度的時候，浮動元素也會參與計算

如今比較抽象，等會經過代碼演示

三、怎麼建立BFC

剛纔給父元素加了一個 overflow:hidden就建立了一個BFC，那麼除了overflow:hidden，還有哪些寫法能建立BFC呢？

第一個是float的值不爲none，由於css的float值默認是none，只要設置了浮動就建立了BFC
第二個是position的值不是static或者relative，也就是建立了一個bfc，好比設置成absolute,fixed
第三個是display屬性是inline-box或者table-cell，跟table相關的這幾個，就建立了BFC
第四個是overflow,overflow爲auto,hidden，均可以建立BFC

四、BFC的使用場景有哪些？