預設情況下，width和height只包括內容區域的寬和高，不包括border、padding、margin
使用box-sizing可以使其包含content、padding、border
//width和height屬性包括content、padding和border，但是不包括margin（外邊距）外邊距塌陷: 塊級元素的上外邊距和下外邊距有時會合併（或摺疊）為乙個外邊距，其大小取其中的最大者box-sizing: border-box;
相鄰兄弟元素margin合併
父級和第乙個/最後乙個子元素
空塊級元素的margin合併
/*用display來定義：值說明預設值。內容不會被修剪，會呈現在元素框之外
*/overflow: visible;
/*內容會被修剪，並且其餘內容不可見
*/overflow: hidden;
/*內容會被修剪，瀏覽器會顯示滾動條以便檢視其餘內容
*/overflow: scroll;
/*由瀏覽器定奪，如果內容被修剪，就會顯示滾動條
*/overflow: auto;
block
塊框（ block box）是定義為堆放在其他框上的框（例如：其內容會獨佔一行），而且可以設定它的寬高，之前所有對於框模型的應用適用於塊框 （ block box）
inline
行內框（ inline box）與塊框是相反的，它隨著文件的文字（例如：它將會和周圍的文字和其他行內元素出現在同一行，而且它的內容會像一段中的文字一樣隨著文字部分的流動而打亂），對行內盒設定寬高無效，設定padding, margin 和 border都會更新周圍文字的位置，但是對於周圍的的塊框（ block box）不會有影響。
inline-block
行內塊狀框（inline-block box） 像是上述兩種的集合：它不會重新另起一行但會像行內框（ inline box）一樣隨著周圍文字而流動，而且他能夠設定寬高，並且像塊框一樣保持了其塊特性的完整性，它不會在段落行中斷開。
table
像處理table布局那樣處理非table元素，而不是濫用html的;標籤來達到同樣的目的。
flex
處理一些困擾css已久的一些傳統布局問題，例如布置一系列彈性等寬容器或者垂直居中內容。
grid
給出一種簡單實現css網格系統的方式，而在傳統上它依賴於一些棘手難以處理的css網格框架
浮動的最初是用來讓文字環繞, 所以我們能推出:
浮動會脫離正常的文件流，並吸附到其父容器左邊，正常布局中位於浮動元素下的內容會圍繞著浮動元素
包裹性：元素尺寸剛好容納內容, 表現得就像diaplay:inline-block一樣
具有包裹性的其他屬性:
display:inline-block會使父元素高度塌陷——為了實現文字環繞效果position:absolute/fixed/sticky
overflow:hidden/scroll
具有破壞性的其他屬性:
display:none文件流：html當中的元素按照從左到右，從上到下的順序進行排列position:absolute/fixed/sticky
文字流：文字的排列
浮動造成的高度塌陷會導致元素脫離文件流，但不會脫離文字流
可以看到浮動後元素高度塌陷了（脫離了文件流），但是文字仍然保持環繞效果（未脫離文字流）
而如果使用position的絕對定位會連文字流也脫離文件流。
浮動的優點在於便於布局，但是缺點在於父元素的高度塌陷，並沒有將浮動的子元素包裹進去，造成布局上的錯誤。
解決高度塌陷（破壞性）帶來的問題！！！
2.4.1 投機取巧法
在父元素底部加上
雖說相容性好，但是浪費乙個標籤，違反了語義化，不推薦
*使用 br標籤和其自身的 html屬性，br 有clear=all | left | right | none；的屬性。
缺點同上。
2.4.2 overflow + zoom法
補充知識: bfc(block formatting context)
bfc:塊級格式化上下文【在css3中叫flow root】是乙個獨立布局環境，相鄰盒子margin垂直方向會重疊。
什麼樣的元素會為其內容生成乙個bfc呢？
浮動元素，即float:left/right
絕對定位元素，即position:absolute/fixed
塊容器，即display:table-cell/table-caption/inline-block
設定了除visible外的overflow值的塊盒子，即overflow:hidden/scroll/auto
bfc特性：
建立了bfc的元素中，子浮動元素也會參與高度計算
與浮動元素相鄰的、建立了bfc的元素，都不能與浮動元素相互覆蓋
建立了bfc的元素不會與它們的子元素margin重疊
建立了bfc的元素會把裡面的東西視為自己的，包括浮動元素，建立乙個私有領域把他們包裹起來。
bfc的特性：
1. 讓原本會疊加的上下外邊距疊加無效。將想要邊距失效的兩個盒子分別放入乙個父盒子，然後為父盒子建立bfc。
2. 建立bfc的元素將不會圍繞浮動元素，圖中文字用p標籤包裹並建立bfc，右上角浮動元素，可以看見文字並沒有環繞浮動
因為子浮動元素也會參與高度計算, 所以藉此可以得到以下方法:
.fix方法不錯，但是可能內容會被裁減掉，可以偶爾用用
2.4.3 after + zoom法
看一下2.4.1，雖然不錯，但是違反語義化; 所以就想到了通過css來新增子元素，不修改html** ——:after選擇符
.clearfix:after實際上是通過 content 在元素的後面生成了內容為空的塊級元素。由於ie6-7不支援.clearfix
:after，使用zoom:1觸發haslayout。
這個方法最佳, 推薦這個方法。
CSS盒模型和float
一 盒模型 1 margin 外邊距 能使用負值，也可用畫素值 百分比 1引數 上右下左 2引數 上下 左右 3引數 上 左右 下 4引數 上 右 下 左 2 border 邊框 3引數 大小 型別 顏色 solid 實線 dotted 虛線 double 雙實線 3 padding內填充 不能使用...
CSS盒模型及排版
css盒模型由四部分組成 margin border padding content。外邊距 邊框 內邊距 內容。我們設定的width和height都是內容的大小，從而影響整個盒子的大小。盒子的佔位大小包括margin，但盒子的尺寸不包括margin。比如 盒子的高度 border width pa...
CSS盒模型及應用
注意事項 important 如果乙個盒子沒有給定寬度 高度或繼承父類的寬度 高度，盒子大小不受影響 新盒子 盒子大小就是寬度,padding width 包含在width中 box sizing border box 盒子計算尺寸 重點 box sizing content box 外盒尺寸計算 ...