CSS盒子模型是網頁布局中非常重要的一個概念。在HTML中，每一個元素都是一個盒子，它由內容（content）、內邊距（padding）、邊框（border）和外邊距（margin）四部分組成。
通過設置這些屬性，我們可以控制元素在頁面上的位置和大小，實現(xiàn)各種不同的布局效果。
div {
padding: 20px;
border: 1px solid #ccc;
margin: 10px;
}上面的代碼就是一個經典的CSS盒子模型樣式設置。我們通過給
元素設置內邊距、邊框和外邊距屬性，來調整它在頁面上的位置和大小。
當我們設置了一個元素的寬度和高度時，其實是指這個元素的內容區(qū)域的尺寸。如果要計算整個盒子的大小，還需要加上內邊距、邊框和外邊距的寬度。
另外，CSS中還可以通過box-sizing屬性來控制盒子模型的計算方式。當設置為border-box時，盒子大小的計算就包括了元素的邊框和內邊距，很方便實現(xiàn)響應式布局。
.box {
width: 100%;
box-sizing: border-box;
padding: 20px;
border: 1px solid #ccc;
}最后，要實現(xiàn)網頁布局并不僅僅是使用CSS盒子模型就可以了。我們還需要使用定位、浮動、彈性盒子等其他布局方式，才能滿足不同頁面的需求。使用不同的布局方式，可以讓我們實現(xiàn)各種不同的頁面效果。
下一篇css盒子模型和ie