【html】盒模型div，边框border，内边距padding，外边距margin
初識盒模型
要想學習盒模型，首先要知道什么是盒模型。顧名思義，每個div標簽都是一個矩形，像一個盒子，所以HTML頁面布局可以理解為多個盒子嵌套排列而成。
盒模型的組成
盒模型包括：content（內容）、border（邊框）、padding（內邊距）以及margin（外邊距）。
content（內容）：顯現圖像和文本內容。
border（邊框）：指圍繞在盒模型外側的一條樣式自定義的線。
padding（內邊距）：指元素內容與邊框之間的間距。
margin（外邊距）：指圍繞在邊框之外的空白區域。
div的基礎屬性
div的基礎屬性包括width（寬度），height（高度）以及background-color（背景顏色）。如果div中沒有具體的內容，可以用這三個屬性讓div“現身”。
div{width: 100px;height: 100px;background-color: gold;}
關于border（邊框）
border是圍繞在盒模型外側的一條樣式自定義的線。border是一個復合屬性，用法為border：width style color；
例如： div{width: 100px;height: 100px;background-color: gold;border:10px solid red;}
如果分開寫的話，可以寫為：
這與上文提到的border：10px solid red；作用是一樣的。
其實border-style不僅有solid一種，以下是常用的一些樣式：
| solid | 直線 |
| dashed | 虛線 |
| dotted | 點線 |
| double | 雙線 |
給div加上border之后，不難看出長寬都相應的增加了。所以border會增加盒模型的面積。
利用border繪制三角形
div{width: 100px;height: 100px;background-color: gold;margin: 20px;border: 10px solid red;border-left-color: blue;border-right-color:green;border-bottom-color:orange ;}這段代碼的實現效果為
可見每邊的邊框相當于一個等腰梯形，如果要使梯形變為三角形，只需讓梯形的短邊長度為零即可。
利用border-radius制作圓
border-radius的含義為圓角，可以根據自定義的值改變邊框角的弧度。當border-radius：50%；時，div整體會變成一個圓形。
.second{width: 100px;height:100px;background-color: yellow;border: 20px solid skyblue;border-radius: 50%;}
結合三角形和圓形的繪制過程，可以得出扇形的繪制過程
關于padding（內邊距）
內邊距指的是元素與邊框之間的空白區域，可以有1~4個值，按照順時針即上右下左的順序依次賦值，用代碼實現為 padding: 20px 30px 40px 50px;
還可以分為四個方向分別實現：
| padding-top | 上邊距 |
| padding-right | 右邊距 |
| padding-bottom | 下邊距 |
| padding-left | 左邊距 |
在使用padding時，需要注意padding會增加盒模型的面積。用兩個長寬相等的盒模型比較，可以更直觀的得出結論。
所以在運用padding時，要注意各邊的長度相應的縮小才能保持原盒模型的面積不變。
關于margin（外邊距）
外邊距是指圍繞在邊框之外的空白區域。同樣可以有1~4個值，以順時針即上右下左的順序依次賦值，用代碼實現為： margin：20px；/* 代表上右下左四個方向各有20px的外邊距 */
還可以分為四個方向分別實現：
| margin-top | 上邊距 |
| margin-right | 右邊距 |
| margin-bottom | 下邊距 |
| margin-left | 左邊距 |
在使用margin時，需要注意疊壓問題和塌陷問題。那么這兩個問題指的是什么呢？
疊壓問題
首先我們假設有兩個div上下排列，div1的下邊距為100px，div2的上邊距為150px，那么兩個div之間的間距是多少呢？100px？250px？還是150px？
答案是150px。
這種現象就很好地體現了疊壓問題。疊壓問題指的是：常態下，兄弟標簽間的上下間距以大值為準。我們來想這樣的一個例子，古代的劍客在功力高深的時候會給人一種有劍氣的感覺，假設A劍客的劍氣半徑是100米，B劍客的劍氣是150米，那么二者之間的安全距離是多少呢？很顯然是150米。
了解了疊壓問題，我們再來學習一下塌陷問題。
塌陷問題
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>margin</title><style>div{color: blue;width: 100px;height: 100px;font-size: 30px;}.fa{width: 300px;height: 300px;background-color: chocolate；}.son{width: 100px;height: 100px;background-color: darkgreen;margin-top: 30px;}</style> </head> <body><div class="fa"><div class="son"></div></div> </body> </html>
我們的本意原是讓div.son與div.fa產生30px的上邊距，卻不曾想div.fa連同div.son一起向下移動了30px的距離，與我們的意愿背道而馳，這樣的現象就稱為塌陷問題。
遇到這樣的問題不要著急，首先要知道問題形成的原因。
塌陷問題出現的原因：常態下，父級的第一個子級標簽是一個塊標簽，并且使用了margin或者margin-top。
針對這個問題，有以下的解決方案：
1.在父級使用border。
2.在父級使用padding-top，注意高度要相對應減少。
3.在父級使用overflow：hidden（溢出隱藏）。
但是要注意的是方案1和方案2相對應的邊長要縮小，才能保證原div的面積不變化。
總結
以上是生活随笔為你收集整理的【html】盒模型div，边框border，内边距padding，外边距margin的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 利用Photoshop制作棋盘（黑白格）
- 下一篇： 超详细Linux -- nginx负载均