二、標準文件流
div
內容與邊框的距離。
內邊距的區域也會被背景渲染。
padding有四個方向：上下左右。
.box
盒子占有的最外層的區域。
.box
.box
盒子與盒子之間的距離。
margin有四個方向：上下左右。
盒子的內容多少不確定時，為了保證元素的高度始終合適，不會出現大片留白與溢位，這種情況下一般不設定高度，而是用內容去撐開高度。
div
若子盒子不設定寬度，會自動撐滿父盒子的內容區域。
若不設定寬，只設定內邊距和邊框，寬度會自適應。
"father">
"son">
.father
.son
div
.box1
.box2
父盒子沒有填充內容，也沒有設定頂部邊框，那麼子盒子的margin-top會讓父盒子與子盒子一起掉下來。
.father
.son
.normal
.ie
標準文件流的限制比較多，導致頁面效果很多無法實現。
為了可以併排展示，又可以設定寬高，我們可以脫離標準文件流。
div:nth-child(1)
浮動會在原來的位置上浮起來。
乙個元素一旦浮動，那麼就可以併排展示，同時可以設定寬高。
每乙個浮動元素都會去緊靠上乙個浮動元素。
標準文件流的文字不會被浮動元素遮擋。
乙個浮動的元素，如果沒有設定寬高，那麼元素將自動收縮為內容的寬高。
如果浮動的子元素的寬的和大於父盒子的寬，那麼後面的子元素會換行。
標準盒模型與怪異盒模型
1 盒子模型 box model 在html中，可以把元素看做盒子，盒子包括 實際內容 content 內邊距 padding 邊框 border 外邊距 margin 2 標準盒模型與怪異盒模型 對比兩種模型的區別 1.標準盒模型 標準盒模型 w3c盒子模型 設定的width或height是對 實...
標準盒模型 怪異盒模型
盒子模型的組成 盒子模型一般由 內容 content 邊框 border 左右外邊距 margin left margin right 左右內邊距 padding left padding right 這些部分組成。css中盒子模型分為兩種 w3c標準盒模型和ie標準盒模型 標準盒子模型 標準盒模型...
標準盒模型與怪異盒模型的區別
在了解這兩種盒模型的區別之前首先我們要先了解什麼是盒模型 box mold 盒模型顧名思義就是在css中的盒子，把html的元素封裝成盒子用來設計和布局時使用，盒模型中又包含了以下幾個元素 1 內容 content 2 填充 padding 3 邊框 border 4 邊距 margin 詳細說明 ...