CSS盒子模型是指網頁布局中,元素在頁面上形成的盒子形狀。這個盒子由外邊距(margin)、邊框(border)、內邊距(padding)和內部元素(content)四部分組成,這種形狀即CSS盒子模型。
下面是一個CSS盒子模型的示意圖:
+---------------------------------------+ | margin | | | | +---------------------------------+ | | | border | | | | | | | | +-----------------------+ | | | | | padding | | | | | | | | | | | | | | | | | | | | | | | +-----------------------+ | | | | | | | +---------------------------------+ | | | +---------------------------------------+
上圖中,外邊距(margin)是從盒子邊緣到鄰近元素之間的距離,邊框(border)在外邊距(margin)之內,內邊距(padding)在邊框(border)之內,而內部元素(content)則在內邊距(padding)之內。
CSS盒子模型是制作網頁布局的基本要素之一,能夠幫助設計人員實現頁面的外觀效果,是前端開發不可或缺的基礎知識。