css盒模型由四部分組成：margin、border、padding、content。
外邊距+邊框+內邊距+內容。我們設定的width和height都是內容的大小，從而影響整個盒子的大小。
盒子的佔位大小包括margin，但盒子的尺寸不包括margin。比如
盒子的高度： border-width + padding-top +height+ padding-bottom；
css規範給出了三種排版模型:普通流排版、浮動排版和定位排版。
塊級元素：單獨一行，寬度自動填滿父元素寬度。能設定寬高和內外邊距；
行內元素: 不能設定width、height、margin-bottom、margin-top；
是指各種頁面元素預設的排列規則，即塊級元素和行內元素按照各自的規則從左至右從上往下排列。塊級和行內可通過display相互轉換
問題1：盒子垂直外邊距的合併
主要針對普通流排版，指的是兩個或者多個普通流塊級元素在垂直外邊距相遇時，合併成乙個外邊距。
主要由兩種情況：
a、相鄰元素外邊距合併
● margin-bottom和margin-top如果均為正值，那麼合併的外邊距就是兩者的最大值——這種現象稱為margin的『塌陷』。注意並不是外邊距相加
● 如果存在負值，則相鄰元素在垂直方向上存在重疊，重疊深度等於外邊距和的絕對值。當和為0時，兩個塊級元素無縫連線。
b、 包含（父子）元素外邊距合併
當div1包含div2時，形成父子關係，也稱巢狀關係。
父子元素的外邊距將合併，取值最大的外邊距，並將其作為父元素的上外邊距，子元素的上外邊距為0.
解決辦法：
要防止外邊距的合併，可通過對父元素設定padding-top屬性。
問題2：相鄰盒子之間的水平間距
只有行內元素和浮動排版才考慮，就正常由margin-left和margin-right相加即可。
浮動設定：
float：left、right、none；
向同一方向浮動形成流式布局，排滿一行自動換行。
浮動排版帶來的問題：
浮動清除：
clear：left、right、both、none（預設值），clear定義了元素左右兩邊是否允許出現浮動元素。如果設定left，那麼會使元素的上外邊框邊界剛好在左邊浮動元素的下外邊距之下。
上面兩個問題的解決：
解決文字環繞：設定clear：both，這是清除p左右兩側的浮動元素
解決高度自適應：
定位排版常用屬性：
1、postion：static、fixed、absolute、relative；
2、偏移：left、right、top、bottom；
3、overflow：
visible(內容溢位顯示)
hidden（超出部分內容隱藏）
auto（溢位顯示滾動條）
scroll（不管是否溢位都顯示滾動條）
inherent（繼承父元素的overflow值）
CSS盒模型及應用
注意事項 important 如果乙個盒子沒有給定寬度 高度或繼承父類的寬度 高度，盒子大小不受影響 新盒子 盒子大小就是寬度,padding width 包含在width中 box sizing border box 盒子計算尺寸 重點 box sizing content box 外盒尺寸計算 ...
css盒模型 標準盒模型 怪異盒模型
css 盒子模型 box model 每個html元素都可以看作是乙個盒子，父元素和子元素的關係就行大盒子裡放了個小盒子，兄弟元素就像在大盒子平放了兩個小盒子。盒模型包括 外邊距 margin 邊框 border 內邊距 padding 實際內容 content 四個屬性。由於目前大部分主流的瀏覽器...
css盒模型及padding介紹
盒模型是css布局的基石，它規定了網頁元素如何顯示以及元素間相互關係。css定義所有的元素都可以擁有像盒子一樣的外形和平面空間。即都包含內容區 補白 填充 邊框 邊界 外邊距 這就是盒模型。padding用法 1 padding是在盒子裡面，在盒子與內容之間。2 padding的作用 控制子元素在父...