盒模型

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

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

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

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

1.padding內(nèi)邊距

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

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

2.border邊框

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

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

3.margin外邊距

? margin設(shè)置外邊距同padding，但會造型兩個問題1.疊壓現(xiàn)象2.塌陷問題

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

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。