在文件中，元素被表示為乙個矩形的盒子。
在css中，使用盒模型描述這些矩形盒子中的每乙個。這個模型描述了元素所佔空間的內容。每個盒子有四個邊：外邊距邊(margin), 邊框邊(border), 內填充邊(padding)與內容邊(content)。
box-sizing決定元素寬度和高度如何計算
box-sizing支援的屬性
content-box | border-box描述content-box
寬度和高度分別應用到元素的內容框。在寬度和高度之外繪製元素的內邊距和邊框。
border-box
為元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪製值描述
auto
瀏覽器計算內邊距。
length
規定以具體單位計的內邊距值，比如畫素、厘公尺等。預設值是 0px。但不允許使用負值。
%規定基於父元素的寬度的百分比的內邊距。
實際測試padding的百分比，測試結果並不是等於，而是近似等於。瀏覽器計算會存在偏差，
border繪製在「元素的背景之上」,換句話來說，元素的背景是內容、內邊距和邊框區的背景。
border預設樣式border-style:none;
預設顏色border-color: 元素文字顏色。利用這個特性，解決邊框和文字顏色需要保持的設計要求。
實現透明邊框 border-color:transparent;值描述
auto
瀏覽器計算外邊距。
length
規定以具體單位計的外邊距值，比如畫素、厘公尺等。
%規定基於父元素的寬度的百分比的外邊距
margin: auto計算規則
設定margin: auto後，
行內元素，行內塊級元素margin取值0；
塊級元素，在文件流中
塊級元素，不在文件流中
在同乙個文件流中，同乙個bfc內，兩個相鄰塊級元素的垂直方向上外邊距（margin-top/margin-bottom）會合併
當兩個元素屬於不同的bfc時，這兩個元素的外邊距不會合併。
發生外邊距塌陷的三種基本情況
相鄰的兄弟姐妹元素
塊級父元素與其第乙個/最後乙個子元素
空塊塊級元素
盒模型知識點總結
一 怎麼理解盒模型？盒子模型是樣式表 css 控制頁面的很重要的概念。所有的頁面的元素都可以看成是乙個盒子，佔據一定的頁面空間。佔據的空間要比實際使用的空間要大得多。我們可以調整盒子的邊框和距離，來調整盒子 頁面和頁面中的元素 的位置。盒子模型是由內容 邊框 間隙 padding 間隔 margin...
標準盒模型 怪異盒模型 彈性盒模型
box sizing content box 標準盒模型 標準盒模型總寬度 border2 padding2 content box sizing border box 怪異模式 怪異盒模型的總寬度 width margin 左右 width已經包含了padding和border值 flex dir...
css盒模型 標準盒模型 怪異盒模型
css 盒子模型 box model 每個html元素都可以看作是乙個盒子，父元素和子元素的關係就行大盒子裡放了個小盒子，兄弟元素就像在大盒子平放了兩個小盒子。盒模型包括 外邊距 margin 邊框 border 內邊距 padding 實際內容 content 四個屬性。由於目前大部分主流的瀏覽器...