CSS盒子模型是指網(wǎng)頁(yè)中元素所包含的盒子,包括邊框、內(nèi)邊距、外邊距和內(nèi)容。這些盒子是由一系列屬性來定義的。
.box { width: 200px; /*元素的寬度*/ height: 100px; /*元素的高度*/ margin: 20px; /*元素的外邊距*/ padding: 10px; /*元素的內(nèi)邊距*/ border: 1px solid black; /*元素的邊框*/ }
其中,width和height屬性定義了元素的寬度和高度。
margin屬性定義了元素與周圍元素的距離,包括四個(gè)值:上、右、下、左??梢允褂每s寫的方式來定義,例如margin: 10px 20px 30px 40px;表示上邊距10px,右邊距20px,下邊距30px,左邊距40px。
padding屬性定義了元素內(nèi)邊距,也是由四個(gè)值組成。由內(nèi)邊框到元素內(nèi)容的距離為padding。
border屬性定義了元素的邊框,包括邊框的寬度、樣式和顏色??梢允褂每s寫的方式定義,例如border: 1px solid black;表示邊框?qū)挾葹?px,樣式為實(shí)線,顏色為黑色。
以上是CSS盒子模型的常用屬性,理解并使用這些屬性可以更好地控制網(wǎng)頁(yè)布局。