盒模型、內外邊距和邊框

盒模型：內容、內邊距、邊框、外邊距

如圖：

邊框顏色：

border-color：blue || rgb(255,0,0) || #fff000 || transparent（透明，默認值不經常使用可不記）

邊框厚度：

border-width：thin || medium || thick || 1em、2px、0.1%

（thin:細邊框，medium：中等邊框，thick：粗邊框，*使用「border-width」屬性需先設置：border-style）

邊框厚度簡寫可爲全部邊框設置寬度，也能夠單獨的設置各邊的邊框寬度

例1：設置全部邊框寬度

bord-width: medium；（全部邊框厚度都是中等）

 例2：設置4個邊不一樣寬度

bord-width: thin medium thick 2px；（上邊框：細，右邊框：中等，下邊框：粗，左邊框：2px）

例3：設置3個框寬度

bord-width:thin medium thick；（上邊框：細，右邊框和左邊框：中等，下邊框：粗）

 例2：設置4個邊不一樣寬度

bord-width: thin medium;（上邊框和下邊框：細，右邊框和左邊框：中等）

邊框樣式：

border-style：none || hidden || dotted || dashed || solid || double || groove || ridge || inset || outset

（none：無邊框，hidden：與「none」相同，用於表時用於解決邊框衝突，dotted：點狀邊框，大多數瀏覽器呈現實線，dashed：虛線，大多數瀏覽器呈現實線，solid：實線，double：雙線，groove：3D凹槽，ridge：3D壟狀邊框，inset：3Dinset邊框，outset：3Doutset邊框

*經常使用：none、dashed、solid ，其他可不記）

如下全部邊框設置實例：

邊框圓角：

border-radius：1px || 3em || 10%

例：

內邊距：

padding：10px || 1em ||20% || auto

外邊距：

margin：10px || 1em ||20% || auto

*以上屬性均可指定一個邊設置樣式