CSS Box Model(盒子模型)
阿新 • • 發佈:2018-07-22
圖片 clas 添加 wid 分享 borde html model com
CSS Box Model(盒子模型)
一、簡介
所有HTML元素可以看作盒子,在CSS中,"box model"這一術語是用來設計和布局時使用。
CSS盒模型本質上是一個盒子,封裝周圍的HTML元素,它包括:邊距,邊框,填充,和實際內容。
盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。
下面的圖片說明了盒子模型(Box Model):
不同部分的說明:
- Margin(外邊距) - 清除邊框外的區域,外邊距是透明的。
- Border(邊框) - 圍繞在內邊距和內容外的邊框。
- Padding(內邊距) - 清除內容周圍的區域,內邊距是透明的。
- Content(內容) - 盒子的內容,顯示文本和圖像。
為了正確設置元素在所有瀏覽器中的寬度和高度,你需要知道的盒模型是如何工作的。
二、元素的寬度和高度
重要: 當您指定一個CSS元素的寬度和高度屬性時,你只是設置內容區域的寬度和高度。要知道,完全大小的元素,你還必須添加填充,邊框和邊距。.
下面的例子中的元素的總寬度為300px:
div { width: 300px; border: 25px solid green; padding: 25px; margin: 25px; }
效果:
CSS Box Model(盒子模型)