CSS中的盒子模型是用來定義HTML元素的大小、外邊距和內邊距的。盒子模型由四部分組成:內容區、內邊距、邊框和外邊距。
.box { width: 200px; height: 100px; padding: 10px; border: 1px solid #000; margin: 20px; }
上述代碼定義了一個盒子,具有寬度為200px、高度為100px的內容區,內邊距為10px,邊框為1px黑色實線,外邊距為20px。其中,寬度和高度指的是內容區的大小,而內邊距和邊框則是在內容區和外邊距之間的空間。
在CSS中,可以使用box-sizing屬性來控制盒子模型的行為。默認情況下,box-sizing的值為content-box,即寬度和高度只包括內容區域。如果將box-sizing的值設為border-box,則寬度和高度會包括內容區、內邊距和邊框。
.box { width: 200px; height: 100px; padding: 10px; border: 1px solid #000; margin: 20px; box-sizing: border-box; }
上述代碼將盒子模型的box-sizing屬性設為border-box,這樣寬度和高度的計算就將包括內容區、內邊距和邊框。在實際開發中,可以根據需求來選擇使用哪種盒子模型。
上一篇css定義頁面大小
下一篇mysql5.1壓縮包