1：內容就比如我們所種植的農作物所佔據的範圍。
2：填充（padding）是指所種植農作物至區域邊緣之間的距離。
3：邊框（border）是指每一塊土地邊緣的厚度。
4：外邊距（margin）是指一塊土地與另一塊土地之間的間距。
padding是盒子內部，內容與邊緣的距離；
padding的作用是控制內容子元素和父元素之間的距離關係；
padding的值並不會對父元素的背景圖造成影響。
padding的值會撐大父元素的寬高，如果父元素擁有寬高值，那麼需要對父元素減掉所撐大的值；如果父元素沒有設定寬高，那麼子元素的大小就會使得父元素被撐大，不用減掉；
對單一方向新增padding：
① padding-top 上
② padding-right 右
③ padding-bottom 下
④ padding-left 左
如圖：
多個值新增padding：
① padding:10px四周
② padding：10px 10px 上下 左右
③ padding：10px 10px 10px 上 左右 下
④ padding：10px 10px 10px 10px 上 右 下 左
如圖：
1 .預設情況下邊框是生成在元素之外的；
2. 複合式寫法 border：1px solid red;
① 屬性拆分：
1): border-width（邊框大小）
2):border-color （邊框顏色）
3):border-style（邊框型別）
如圖：對單一方向新增border：
① border-top:10px solid red; 上
② border-right:10px solid red;右
③ border-bottom:10px solid red;下
④ border-left：10px solid red;左
如圖：
3. 利用邊框實現三角形：
① 標籤寬高設定為0；
② 統一設定四個方向的邊框為透明；
③ 調整某個方向邊框顏色；
如圖：
4. 邊框型別：
① solid 實線
② dashed 虛線
③ dotted 點狀線
④ double 雙線
⑤ none 沒有線條
margin是指元素外圍的距離，它的值不會撐大元素大小
對單一方向新增margin:
① marign-top 上
② margin-right右
③ margin-bottom下
④ margin-left 左
如圖：
多個值新增margin：
① margin:10px;四周
② margin:10px 10px;上下 左右
③ margin：10px 10px 10px; 上 左右 下
④ margin：10px 10px 10px 10px; 上 右 下 左
如圖：
margin:0 auto（是指當前元素在父元素內部水平居中)
margin常出現的bug
① 當兩個元素上下顯示時，對兩個元素分別新增上下margin值，兩個margin值不會疊加，會重疊，按照值大的顯示。
如圖：
② 當子元素與父元素都沒有新增浮動的情況下對子元素新增margin-top值，這個margin值會錯誤的新增到父元素上面。
如圖：
關於盒模型
一些css盒模型的比較重要的點滴。css盒模型 w3c標準中，width 和 height 指的是內容區域的寬度和高度。增加內邊距 邊框和外邊距不會影響內容區域的尺寸，但是會增加元素框的尺寸。一旦為頁面設定了恰當的 dtd，大多數瀏覽器都會按照w3c標準模式呈現內容。然而 ie 5 和 6 的呈現卻...
關於盒模型
盒模型是css布局的基石，它規定了網頁元素如何顯示以及元素間相互關係。css定義所有的元素都可以擁有像盒子一樣外形和平行空間。他有 外邊距 margin 邊寬 border 內邊距 padding 內容 content 如下圖 簡單來說 內容 content 就是盒子裡裝的東西，填充 padding...
關於盒模型
盒模型 盒模型的分類 元素產生的盒子型別取決於display屬性，display none 不生成盒子 display inline 行盒 display block 塊盒，會自動換行 組成 margin外邊距 與其他盒子的距離，border邊框，padding 內邊距 邊框和內容之間的距離。con...