css盒模型分成w3c標準盒模型和ie模型
ie盒模型：box-sizing: border-box
盒子模型布局穩定性
我們根據穩定性來分，建議如下：
按照 優先使用寬度，其次使用內邊距，再次外邊距。 即：width > padding > margin
原因：（1）margin會有外邊距合併
（2）padding會影響盒子大小，需要進行加減計算（麻煩） 其次使用
（3）width沒有問題我們經常使用寬度剩餘法來做
當margin和padding的值設定為百分比時，是相對於最近的塊級或內聯塊父元素width（非總寬度，不包括paddingbordermargin）的相應百分比的值。
即使是margin-top、margin-bottom、padding-top、padding-bottom，設定為百分比時也是以最近塊級父元素的width（非總寬度）為基準，而非height。
巢狀塊元素垂直外邊距的合併
對於兩個巢狀關係的塊元素，必須是block元素。如果父元素沒有上內邊距padding、沒有上邊框border、沒有內容，則父元素的上外邊距會與子元素的上外邊距發生合併，合併後的外邊距取其較大者。即使父元素的上外邊距為0，也會發生合併。
解決方法：
bfc 全稱為塊格式化上下文 (block formatting context) 。它是頁面中的一塊渲染區域，並且有一套渲染規則，它決定了其子元素將如何定位，以及和其他元素的關係和相互作用
bfc觸發條件：
bfc渲染規則：
bfc作用：
bfc解決margin塌陷問題 - 兄弟元素塌陷
bfc解決margin塌陷問題 - 父子元素塌陷
bfc解決浮動元素引起父元素高度塌陷問題
在通常情況下父元素的高度會被子元素撐開，而如果父元素沒有設定高度，其子元素均為浮動元素，此時父元素會發生了高度坍塌，上下邊界重合，即浮動元素無法撐起父元素。這時就可以用bfc來清除浮動了，將父元素整體設定為bfc環境
bfc解決元素被浮動元素覆蓋問題
如果有兩個相鄰 元素，第乙個元素左浮動，第二個元素不設定浮動，這時候第二個元素會有部分被浮動元素所覆蓋(但是文字資訊不會被浮動元素所覆蓋)。 如果想避免元素被覆蓋，可觸發第二個元素的 bfc 特性，在第二個元素中加入overflow: hidden即可
10 分鐘理解 bfc 原理
css盒模型詳解
盒模型 框模型 是網頁布局的基礎，每個元素都被表示為乙個矩形的方框。使用min width min height max width max height可以設定最大 小 寬度和高度,優點是當頁面放大或縮小時，內容框會自動適應頁面。塊級元素的上外邊距和下外邊距有時會合併 摺疊 為乙個外邊距，其大小取...
CSS盒模型詳解
css 盒子模型 box model 所有html元素可以看作盒子，在css中，盒子模型可以用來對元素進行布局，包括內邊距，邊框，外邊距，和實際內容這幾個部分。盒子模型分為兩種 第一種是w3c標準的盒子模型標準盒模型，第二種ie標準的盒子模型怪異盒模型當前大部分的瀏覽器支援的是w3c的標準盒模型，也...
css彈性盒模型詳解 介紹
官方的統一回答 彈性盒模型是指在父級改變大小的時候內部的自己元素也會相應的改變大小，即子集會按照父級的大小按比例自適應大小。彈性盒模型的提出可以解決一些響應式布局的需求 採用flex布局的元素，稱為flex容器 flex container 簡稱 容器 它的所有子元素自動成為容器成員，稱為flex專...