2014年辛星解讀css第五節
本小節我們解說css中的”盒模型“。即”box model“，它通經常使用於在布局的時候使用，這個”盒模型“也有人成為”框模型“。事實上原理都一樣，它的大致原理是這種，它把一個HTML元素分為了這麽幾個部分：邊距、邊框、填充和實際內容，我們通過設置這幾個內容能夠設置它的一些現實形式。
*************盒模型*****************
1.盒模型從內向外依次是實際內容（Content）、內邊距（Padding）、邊框（Border）、外邊距（Margin），當中我們通常也說內邊距為邊距，外邊距為填充。
2.以下是我找的一個圖片來解釋這個盒模型：
.
3.這裏還是用文字來描寫敘述一下把，Content是盒子的內容，比方我們須要顯示的文本信息。Padding是它守衛的區域，可是它的大小會受到border的約束，而border則是這個邊框，而margin則是邊框的周圍區域，即該盒子與外界的元素的距離。
************進一步說明************
1.因此我們在計算一個元素的寬度和高度的時候，這裏我們以寬度為例，事實上是content的寬度加上padding的寬度乘以2。再加上border的寬度乘以二。在加上margin的寬度乘以2.
2.這些寬度和高度我們直接用px來表示就能夠了。唯一比較特殊的就是這個border，我們還須要指定它的一些樣式和顏色，它的第一個參數是大小。第二個參數是風格（實現還是虛線等），第三個參數是顏色。
3.代碼演示：
#par{width:220px; padding:10px; border:5px solid gray; margin:0px; }
4.事實上非常好理解的，它的盒模型僅僅是說法稍顯專業化，其理解非常easy。
*****************邊框***************
1.上面我們僅僅是簡單的解說了一下border，事實上border有幾個屬性能夠分開設置的，首先是border-style，它指的是邊框的線的繪制方式。能夠用none來表示無邊框。能夠用dashed來定義一個虛線框，能夠用solid來定義一個實線框，能夠用double來定義一個雙線框。還能夠定義帶有3D樣式的邊框，比方用groove來定義一個3D溝槽邊界。
2.我們能夠用border-width來定義邊框的大小，能夠用px，也能夠用em，這些前面都講過了，還有三個選項，個人不建議用。
3.還能夠用border-color來設置邊框的顏色 ，單獨的設置border-color是無意義的，必須在設置了border-style之後再設置border-color才有意義。
4.這些邊界屬性能夠接受1個或者四個值。假設是接受四個值，則是依照上右下左的順序去實現，假設是三個值。則設置上右下，假設是兩個值，則上下採用第一個值，左右採用第二個值，假設是一個值，則全部的邊界都採用同一個值。
5.演示樣例代碼，首先是my.html代碼：
<html> <head> <title>2014年辛星CSS教學夏季版</title> <link rel="stylesheet" type="text/css" href="my.css"> </head> <body> <p>博客園辛星。無限溫情</p> </body> </html>
然後是css代碼：
p{border-size:9px ;
border-style: solid;
border-color: red green blue black;}
6.事實上不光是border。padding和margin也是接受一個到四個值，使用方法一樣。
****************小結****************
1.本小節我們主要解說的是布局這部分，也就是盒模型。
2.希望我可以表達的足夠清楚。
2014年辛星解讀css第五節