盒子模型
需求分析
盒子模型是css網頁布局的基礎，它替代了傳統的表格布局。只有掌握了盒子模型的各種規律和特征，才可以更好地控制網頁中各個元素所呈現的效果。
認識盒子模型
盒子模型就是把HTML頁面中的元素看作是一個矩形盒子，也就是一個盛裝內容的容器。每個矩形都由元素的內容、內邊距、邊框和外邊距組成。
內邊距出現在內容區域的周圍，當給元素添加背景色或背景圖像時，該元素的背景色或背景圖像也將出現在內邊距中，外邊距是該元素與相鄰元素之間的距離，如果給元素定義邊框屬性，邊框將出現在內邊距和外邊距之間
盒子模型相關屬性
盒子模型的相關屬性包括邊框屬性、內外邊距屬性、背景屬性和寬高屬性，通過設置這些屬性可使元素的表現形式更加多樣化。需要注意的是，雖然盒子模型擁有邊框、內外邊距、背景、寬和高這些基本屬性，但是並不要求每個元素都必須定義這些屬性。
邊框屬性
為了分割頁面中不同的盒子，常常需要給元素設置邊框效果。在CSS中邊框屬性包括邊框樣式屬性( border style )、邊框寬度屬性( border-width )、邊框顏色屬性( border- -color)、單側邊框的屬性、邊框的綜合屬性。
(1)設置邊框樣式( border- style )
邊框樣式用於定義頁面中邊框的風格，常用屬性值如下。
, none:沒有邊框，即忽略所有邊框的寬度(默認值)。
●solid; 邊框為單實線。
●dashed:邊框為虛線。
●dotted: 邊框為點線。
●double: 邊框為雙實線。
在設置邊框樣式時，既可以對盒子的單邊進行設置，也可以綜合設置四條邊的樣式，具體如下。. border- top -style:上邊框樣式。
●border-right-style: 右邊框樣式。
●border-bottom-style: 下邊框樣式。
●border-left-style: 左邊框樣式。
●border-style: 上邊框樣式右邊框樣式下邊框樣式左邊框樣式。
●border-style: 上邊框樣式左右邊框樣式下邊框樣式。
●border- -style:上下邊框樣式左右邊框樣式。
●border-style: 上下左右邊框樣式。
使用border- -style屬性綜合設置四邊樣式時，必須按上右下左的順時針順序，省略時采用值復制的原則，即一個值為四邊，兩個值為上下/左右，三個值為上/左右/下。
例如<p>只有上邊為虛線dashed,其他三邊為單實線solid,可以使用border -style 綜合屬性分別設置各邊樣式:
p{ borer-style:dashed solid solid solid; }
或綜合設置四條邊，然后采用上邊覆蓋:
p{border-style:solid;}