盒模型

? 什么是盒模型：每一個標簽都是一個矩形，像一個盒子，所以HTML頁面的布局可以理解為多個盒子組合嵌套排序而成。

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-wSHciGHI-1649508211222)(C:\Users\Guolan\AppData\Local\Temp\1649504298774.png)]

? 整個盒模型的組成由上圖所示，盒子的內容大小由width寬度和height高度指定，padding設置盒內邊距，border設置盒子邊框，margin設置盒子外邊距。

? 其中padding和border會增加盒子大小，而margin不會。

1.padding內邊距

? padding可以給1-4個值，順時針賦值，從上開始：

<style>div{padding: 30px 50px 70px 90px;padding-left:90px;} </style>

2.border邊框

? border是一個復合屬性，由border-width，border-style，border-color三個屬性組成，可以一次性設置，也能單個設置。border-radius設置邊框的圓角，后面的值，就是距離四個角的位置為圓心畫弧，最大值為邊長的一半(超過一半，還是按一半算)，可單一角設置。

<style>div{border-right: 2px solid gold;border-top: 5px dashed pink;border-top-color: red;border-radius：5px;} </style>

3.margin外邊距

? margin設置外邊距同padding，但會造型兩個問題1.疊壓現象2.塌陷問題

? 疊壓現象：如上下兩個盒模型，上面的盒模型設置了margin-bottom：100px，下面的盒子設置了margin-top：150px，理論上兩個盒子的上下距離應該是250px，但實際只有150px。

? 塌陷問題：常態下，父級的第一個字標簽是個塊標簽，并且使用了margin或者margin-top，就會出現塌陷問題。解決方法：1.在父級添加border。2.不適用margin-top，在父級使用padding-top。3.塌陷隱藏（推薦使用方法）：在父級標簽添加屬性：overflow：hidden。

PS：overflow：hidden有三個作用：1.隱藏溢出。2.解決塌陷。3.清除浮動。

總結

以上是生活随笔為你收集整理的HTML盒模型的全部內容，希望文章能夠幫你解決所遇到的問題。

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