關於盒模型相關的問題

LZDROID發表於2019-02-23
模型

開門見山

盒模型

什麼是盒模型

當對一個文件進行佈局的時候，瀏覽器渲染引擎會根據CSS-Box模型將所有的元素表示為一個矩形盒子。CSS決定這些盒子的大小，位置以及屬性。 來點圖吧

標準盒模型
IE盒模型
他們的區別在於width和height的計算方式不同

如何設定這兩種模式

box-sizing:content-box/border-box

如何使用JS獲取他們的高度呢

  • dom.style.width/height 只能獲取到內聯元素的寬高
  • dom.currentStyle.width/height 只有IE支援，相容性不好
  • window.getComputedStyle(dom).width/height 所有的瀏覽器都支援
  • dom.getBoundingClientRect() 該方法返回元素的大小及其相對於視口的位置，（大家可以列印出來看看）
    關於盒模型相關的問題
    當計算邊界矩形時，會考慮視口區域（或其他可滾動元素）內的滾動操作，也就是說，當滾動位置發生了改變，top和left屬性值就會隨之立即發生變化（因此，它們的值是相對於視口的，而不是絕對的）。如果你需要獲得相對於整個網頁左上角定位的屬性值，那麼只要給top、left屬性值加上當前的滾動位置（通過window.pageXOffset和window.pageYOffset），這樣就可以獲取與當前的滾動位置無關的值。

邊距塌陷

兩個盒子如果都設定了邊距，且垂直方向上，那他們的邊距會發生重疊(也就是第一個的margin-bottom和第二個的margin-top),以絕對值大的那個為最終的顯示結果。那如何解決它，請看下面

BFC

什麼是BFC

塊格式化上下文（Block Formatting Context，BFC） 是WEB頁面視覺化渲染的一部分，是佈局過程中生成塊級盒子的區域，也是浮動元素與其他元素的互動限定區域（MND）。通俗點講，就是就是一個特殊的盒子，內部有自己的佈局方式，不受外界影響。

如何產生BFC
  • float是left/right
  • position是absolute/fixed
  • overflow是auto/hidden
  • display是inline-block/table-cell/flex/inline-flex
BFC規則
  • 屬於同一個 BFC 的兩個相鄰 Box 會垂直排列， margin 會發生重疊
  • BFC 中子元素的 margin box 的左邊， 與包含塊 (BFC) border box的左邊相接觸 (子元素 absolute 除外)
  • BFC 的區域不會與 float 的元素區域重疊
  • 計算 BFC 的高度時，浮動子元素也參與計算
  • 文字層不會被浮動層覆蓋，環繞於周圍
BFC的作用
  • 自適應佈局，兩欄佈局
  • 清除浮動
  • 解決邊距塌陷（在塌陷元素外層新增一層div，並設定BFC）

（圖片來源網上）

相關文章