在CSS中盒模型是最重要的章節之一，在真正做web前端都會經常用到盒模型，所以初學者必須要掌握盒模型。
所有HTML元素都可以看作一個盒子，在CSS中盒模型這一術語是用來設計和佈局時使用。CSS盒模型本質上是一個盒子，用來封裝它周圍的元素,包括：
內邊距，外邊距，邊框，填充和實際內容。盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。看一張圖片可以很好的理解盒模型。
元素內容（content）、
內邊矩（padding-top、padding-right、padding-bottom、padding-left）：內容到邊框的距離。
邊框（border-top、border-right、border-bottom、border-left）：可以看成是盒子的厚度。
外邊距（margin-top、margin-right、margin-bottom、margin-left）：盒子與盒子或盒子與邊界的距離。
其中padding和margin的賦值都有四中方式，取值是按照順時針方向取值，情況分別是：
padding: 100px; （上下左右內邊距是100px）
padding: 100px 50px;（上下內邊距是100px,左右內邊距都是50px）
padding: 100px 50px 120px;（上邊距100px，左右邊距50px，下邊距120px）
padding: 100px 50px 120px 60px;（上邊距100px，右邊距50px，下邊距120px，左邊距60px）
內邊距、外邊距、邊框的數值根據具體要求設置，如果不設置將會由默認數值代替。如果直接寫一個寬度和高度時，那只是設置了內容區域的寬度和高度。
width: 100px;
height: 100px;
border: 10px solid red;
padding: 20px;
margin: 20px;
這個盒子的寬度和高度都是200px。
最終元素的總寬度計算公式是這樣的：總元素的寬度=內容寬度+左內邊距+右內邊距+左邊框+右邊框+左外邊距+右外邊距
元素的總高度最終計算公式是這樣的：總元素的高度=內容高度+上內邊距+下內邊距+上邊框+下邊框+上外邊距+下外邊距
例如10個200*200的盒子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>盒子</title> <style> div:first-of-type{width: 100px;height: 100px;border: 10px solid red;padding: 20px;margin: 20px;} div:nth-of-type(2){width: 60px;height: 60px;border: 50px solid black;padding: 10px;margin: 10px;} div:nth-of-type(3){width: 50px;height: 50px;border: 45px solid orange;padding: 15px;margin: 15px;} div:nth-of-type(4){width: 40px;height: 100px;border: 20px solid blue;padding: 5px 20px 5px;margin: 20px;} div:nth-of-type(5){width: 100px;height: 80px;border: 10px solid yellow;padding: 20px 10px 10px;margin: 20px;} div:nth-of-type(6){width: 160px;height: 160px;border: 10px solid salmon;padding: 10px;margin: 0px;} div:nth-of-type(7){width: 160px;height: 160px;border: 10px solid #d330ff;padding: 0px;margin: 10px;} div:nth-of-type(8){width: 0px;height: 0px;border: 80px solid #63ff91;padding: 10px;margin: 10px;} div:nth-of-type(9){width: 0px;height: 0px;border: 40px solid #19d4ff;padding: 0px;margin: 60px;} div:last-of-type{width: 0px;height: 0px;border: 10px solid #08ff0a;padding: 0px;margin: 90px;} div{float: left} </style> </head> <body> <div></div><div></div><div></div><div></div><div></div> <div></div><div></div><div></div><div></div><div></div> </body> </html>
效果：
盒子陰影標籤：box-shadow：inset x-offset y-offset blur-radius color;
inset:內部陰影，如果不設置會默認outset。
x-offset：陰影在水平方向上的位移，正數代表向右，負數代表向左。
y-offset：陰影在垂直方向上的位移，正數代表向下，負數代表向上。
blur-radius：模糊半徑，只能是正數，數越大越模糊。
color：陰影的顏色。
代碼示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ margin: 100px; } div:first-of-type{ width: 100px; height: 100px; border-radius: 30px; background-color: yellow; box-shadow: 50px 50px 0px #ff4a7c; } div:last-of-type{ width: 100px; height: 100px; border-radius: 30px; background-color: yellow; box-shadow: 50px 50px 0px #ff4a7c,100px 100px 0px black; } </style> </head> <body> <div></div> <div></div> </body> </html>效果：
