CSS13盒子模型教程 CSS的盒子模型是指一個HTML元素所呈現的矩形盒子，其中包括內容區域、內邊距、邊框和外邊距。了解盒子模型可為我們構建復雜的頁面布局和樣式提供幫助。 1. 基本結構

.box{
width: 200px;
height: 200px;
padding: 20px;
border: 2px solid #ccc;
margin: 20px;
}

這里我們定義了一個名為“box”的class，并且設置其寬高均為200px，內邊距padding為20px，邊框border為2px實線邊框，外邊距margin為20px。 2. 內容區域 內容區域指的是盒子模型的主要區域，可以通過設置盒子的width和height屬性來改變其大小。

.box{
width: 300px;
height: 200px;
}

3. 內邊距 內邊距是指內容區域和邊框之間的距離，通過padding屬性來設置。padding屬性可以接受一個或四個值，分別表示上、右、下、左四個方向的內邊距大小。

.box{
padding: 10px;
padding-top: 20px;
padding-right: 30px;
padding-bottom: 40px;
padding-left: 50px;
}

4. 邊框 邊框主要用于控制元素的邊界形狀和顏色，通過border屬性來設置。border屬性也可以接受一個或四個值，分別表示上、右、下、左四個方向的邊框樣式、大小和顏色。

.box{
border: 2px solid #ccc;
border-top: 1px dashed #999;
border-right: 3px dotted #666;
border-bottom: 1px double #000;
border-left: 3px groove #333;
}

5. 外邊距 外邊距是指邊框和相鄰元素之間的距離，通過margin屬性來設置。margin屬性也可以接受一個或四個值，分別表示上、右、下、左四個方向的外邊距大小。

.box{
margin: 10px;
margin-top: 20px;
margin-right: 30px;
margin-bottom: 40px;
margin-left: 50px;
}

總結 CSS盒子模型基礎知識掌握了解，對于頁面布局定位的實現多有幫助。通過合理的設置內外邊距、邊框和內容區域大小，我們可以創造出各種高端逼格的效果。