目錄

前言

一、什么是CSS盒模型

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

1.CSS如何設置兩種盒模型

2.JS如何設置/獲取盒模型對應寬高：

---

前言

什么是css,css有幾種，讓我帶你來了解一下

---

一、什么是CSS盒模型

css的盒模型由里到外包括：content（內容）、padding（內邊距）、border（邊框）、margin（外邊距）四個部分。

css盒模型有兩種：標準模型（瀏覽器默認）+ IE模型

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

IE盒模型與W3C盒模型的唯一區別就是元素的寬度，元素的width=border + padding + content

標準盒子模型（content-box）：內容就是盒子的邊界IE盒子模型（border-box）：邊框才是盒子邊界標準盒子模型（content-box）：元素的寬度width=內容寬度IE盒子模型（border-box）：元素的寬度width=內容寬度 + padding + border

1.CSS如何設置兩種盒模型

//在不設置box-sizing的情況下，box-sizing 默認是(標準盒子)content-box ./* 標準模型 */ box-sizing:content-box;/*IE模型*/ box-sizing:border-box;

2.JS如何設置/獲取盒模型對應寬高：

dom.style.width/height //缺點：僅適用于有內聯樣式的 dom.currentStyle.width/height //優點：獲取渲染之后的運行的結果，相對更準確 //缺點：只有IE瀏覽器支持 window.getComputedStyle(dom).width/height //優點：原理和2相同，但兼容性更好 dom.getBoundingClientRect().width/height //原理同上，經常用于計算元素的絕對位置（根據視窗左頂點獲得），getBoundingClientRect()方法可獲得四個值：left/top/width/height

先到這里~?

今日更新~

---

三、根據盒模型解釋邊距重疊?

父子元素、兄弟元素，當有外邊距時，會取其中一個邊距的最大值，作為實際的邊距。 空元素的有上下邊距時，也會取其中更大的邊距值，作為實際的邊距。 這就是邊距折疊

四、BFC（邊距重疊解決方案）

1、什么是BFC：

BFC是塊級格式化上下文的意思。 它是CSS 2.1規范中的一個概念，它決定了元素如何對其內容進行定位，以及與其他元素的關系和相互作用。

2、觸發BFC的條件：

浮動元素float值不為none 定位元素position值不為static和absolute display屬性值為flex、inline-block、table、table-cell等與table相關的值 overflow值不為visible （ overflow (值為hidden/atuo/srcoll)設置有這些屬性的box，都會產生BFC）

3、BFC原理：?

1.在BFC這個元素垂直方向的邊距會發生重疊； （垂直方向上地距離由margin決定，在同一個BFC的box 中，相鄰的兩個box的邊距會重疊） 2.BFC的區域不會與float元素的box重疊 3.BFC在頁面上是一個獨立的容器，其里外的元素不會相互影響 4.計算BFC高度時，浮動元素也會參加計算

4、常見應用場景：?

清除浮動 外邊距合并問題：解決兄弟元素垂直方向邊距重疊 （給子元素增加了父元素div）外邊距將不會重疊解決margin重疊問題（添加獨立BFC） 解決浮動高度塌陷問題（在父元素添加overflow：hidden）

關于CSS盒模型就到這里了~加油！沖沖沖

總結

以上是生活随笔為你收集整理的CSS盒模型（详解）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。