盒子模型（Box Model）：

指把HTML頁面中的元素看作是一個矩形的盒子，也稱容器，這個盒子從內到外由：元素的內容（content）、內邊距（padding）、邊框（border）、外邊距（margin）組成。

內容content：

指文本等內容的大小，width和height設置內容的大小，并非包含邊框border和內邊距padding的值，因此設置其它兩項，容器的實際大小會改變。設置其它兩項后，經常會出現盒子被撐開的問題，其中一種解決方法就是修改width和height，結合下面內邊距設置屬性值的個數為1個可得：容器實際大小 = 容器未設置其他兩項前的大小 - 2 * (padding + border)，注意：設置margin會改變父級元素的盒子大小。

內邊距padding：

指內容（content）和邊框（border）之間的距離。當給一個值時設置的是上、下、左、右四個方向的內邊距，兩個值時設置的是上下、左右方向的內邊距，三個值時設置的是上、左右、下方向的內邊距，四個值時設置的是上、右、下、左方向的內邊距。速記：從上開始順時針對應給值，沒有值的邊用對邊的值補，當然可以分開寫，如：

padding-left: 1px;

邊框border：

指內邊距（padding）和外邊距（margin）之間的距離，由border-width邊框寬度、border-style邊框樣式、border-color邊框的顏色，三者缺一不可顯示，其連寫為：border：border-width border-style border-color

div {border: 16px solid red;}

border-width:

邊框的寬度一般給像素，當然像em等也是支持的。

border-style：

邊框的樣式一般設置為solid實線，其值還有：none無邊框、hidden隱藏邊框（兼容差）、dotted點線（兼容問題）、dashed虛線、double雙實線、groove凹槽邊框、ridge菱形邊框、inset凹邊、outset凸邊等

border-color:

邊框的顏色取值和color的取值一樣。

邊框拆分：

border可以拆分為上下左右四個邊框：border-top上邊框、border-bottom下邊框、border-left左邊框、border-right右邊框，拆分后其屬性設置和border一樣。

div {border-bottom: 1px solid yellow;}div {border-bottom-width: 16px;border-bottom-style: dotted;border-bottom-color: pink;}

border-collapse合并表格相鄰邊框:

解決表格table中cellspacing=“0” 外邊距設置為0后相鄰邊框疊加加粗問題,這個屬性必須設置在table中才有效。

table {border-collapse:collapse;/* 當去掉這個屬性后，相鄰邊框疊加變粗 */}td{border: 3px solid black;}<table cellspacing="0"><tr><td>蘋果</td><td>蘋果</td></tr></table>

border-radius：

設置邊框四角的弧度，簡稱圓角邊框，其值和border-width設置類似，這個值可以可以使用一組參數設置，中間用反斜杠/隔開，反斜杠前面控制的是X軸，反斜杠后面控制的是Y軸，反斜杠只能出現一次（20px/40px，一般前后值相同時是省略的）；可以設置為1~4個值，設置多個值時，起始是從左上角開始順時針分別設置，沒有值的角使用其對角的值；也可以給每條分別設置,需要注意的是需要先寫上下后寫左右屬性：

div {border-radius: 50% 20% 10%;/* 一個圓角值為50%的圓角是一個圓 */}div {border-top-right-radius: 20px/40px;}

外邊距margin：

設置盒子以外的距離，這個距離不能放其他內容，margin可拆分為margin-top上邊距、margin-bottom下邊距、margin-left左邊距、margin-right右邊距，當為margin時也可以設置多個屬性值，每個屬性值對應的方向和border一樣，都是從上面開始，順時針旋轉分別給值，沒有的用對邊值補。

實現盒子水平居中的方法：必須是塊級元素，必須設置寬度

div {/* 第一種分開寫： */margin-left: auto;margin-right: auto;}div {/* 第二種不分開： */margin: auto;/* 或者使用margin:0 auto; */}

清除默認邊距：

瀏覽器默認有自己的padding，元素有自己的默認margin，此時為了更好的控制布局，可以清除這些默認的值：

* {margin: 0;padding: 0;}

注意：行內元素沒有上下外邊距，只有左右外邊距，因此設置垂直方向的margin是不起作用的。

垂直方向外邊距合并問題：

如果給兩個盒子的相鄰邊分別設置margin，此時這兩個盒子之間的距離是其中設置的margin較大的盒子的margin值，如box1的margin-bottom設置為20px,box2的margin-top設置為50px，則它們之間的外邊距是50px，實際開發中只設置其中一個外邊距即可。

<style>.father {width: 400px;height: 400px;background-color:aqua;margin-bottom: 100px;}.brother {width: 400px;height: 400px;background-color:rgb(241, 143, 13);margin-top:50px;}</style><div class="father"></div><div class="brother"></div>

嵌套盒子中垂直外邊距塌陷問題：

當兩個盒子嵌套在一起時，如果給里面的盒子一個margin-top，此時里面的盒子不會相對于外面的盒子向下移動，而是內外盒子保持相對靜止向下移動，避免這個問題的方法是給父級元素加border或者padding，但是父級盒子會被撐開，此時使用overflow:hidden可以不被撐開父級盒子而解決盒子塌陷問題，overflow后面會詳細介紹，水平方向不會出現這種情況。

<style>.father {width: 400px;height: 400px;background-color:aqua;border: 1px solid transparent;/* padding: 1px; 給padding也可以解決這個問題 *//* overflow: hidden; 推薦使用這個解決盒子塌陷問題 */}.son {width: 200px;height: 200px;background-color:rgb(241, 143, 13);margin-top:50px;margin-left:30px;}</style><div class="father"><div class="son"></div></div>

標準盒模型:

盒子設置寬高后，再去設置padding、border時， 此時盒子的實際大小會變大。

怪異盒模型:

盒子設置寬高后，再去設置padding、border時，此時盒子不會被撐開，它會擠壓內容區（content），開啟怪異盒模型的方法：box-sizing:border-box

div {box-sizing: border-box;/開啟怪異盒模型，解決給定寬高后再去設置padding和border時盒子被撐開問題/}

盒子陰影box-shadow：

給一個盒子加上陰影效果，其屬性值分別為：box-shadow: h-shadow水平陰影,必選 v-shadow垂直陰影,必選 blur模糊距離 spread陰影尺寸 color陰影顏色 inset內/外陰影，默認是外陰影不用寫，當需要為內陰影時在最后加上inset即可。

div {box-shadow: 2px 2px 3px 4px pink inset;}

提示：本文圖片等素材來源于網絡，若有侵權，請發郵件至郵箱：810665436@qq.com聯系筆者 刪除。
筆者：苦海

總結

以上是生活随笔為你收集整理的CSS中盒子模型、嵌套盒子中垂直外边距塌陷问题解决方案、标准盒模型、怪异盒模型的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。