邊框
border-color 顏色
border-width 寬度
border-style 樣式
| 屬性 | 說明 | 顯示 |
|---|---|---|
| border-top-color | 上邊框顏色 | border-top-color:#369 |
| border-right-color | 右邊框顏色 | border-right-color:#369 |
| border-bottom-color | 下邊框顏色 | border-bottom-color:#369 |
| border-left-color | 左邊框顏色 | border-left-color:#369 |
四個邊框同一個顏色:
border-color:#369
上下，邊框顏色：#369 左右邊框顏色：#000
border-color:#369 #000;
上邊框顏色：#369 左右邊框顏色：#000 下邊框顏色#f00
border-color:#369 #000 #f00;
上，右，下，左邊框顏色：#369 #000 #f00 #00f
border-colr:#369 #000 #f00 #00f
邊框粗細
border-width
thin 定義細的邊框
thick 定義粗的邊框
medium 定義中等邊框
inherit 規定應該從父元素繼承邊框寬度
像素值：px
使用方法：
border-top-width:5px; 上
border-right-width:10px; 右
border-bottom-width:8px; 下
border-left-width:22px; 左
border-width:5px ;
border-width:20px 2px;
border-width:5px 1px 6px;
border-width:1px 3px 5px 2px; 上，右，下，左
邊框樣式 border-style
none 沒有邊框
hidden 與 "none" 相同。不過應用於表時除外，對於表，hidden 用於解決邊框沖突。
dotted 定義點狀邊框。在大多數瀏覽器中呈現為實線。
dashed 定義虛線。在大多數瀏覽器中呈現為實線。
solid 定義實線。
double 定義雙線。雙線的寬度等於 border-width 的值。
border簡寫
同時設置邊框的顏色，粗細和樣式
border:1px solid #3a6587;
boouder:1px dashed red;
外邊距
margin-top 上
margin-right 右
margin-bottom 下
margin-left 左
用法
margin-top: 1 px
margin-right : 2 px
margin-bottom : 2 px
margin-left : 1 px
margin :3px 5px 7px 4px; 上右下左
margin :3px 5px; 上下 左右
margin :3px 5px 7px; 上左右下
margin :8px;
網頁劇中對齊
margin : 0px auto;
上下為0像素，左右自適應
內邊距
padding-left 左
padding-right 右
padding-top 上
passing-bottom 下
用法
padding-left:10px;
padding-right: 5px;
padding-top: 20px;
padding-bottom:8px;
padding:20px 5px 8px 10px ;
padding:10px 5px;
padding:30px 8px 10px ;
padding:10px;
盒子模型的尺寸
盒子模型總尺寸=border+padding+margin+內容寬度
border 邊框
padding 內邊距
margin 外邊距
box-sizing
box-sizing：content-box (默認值盒子的總尺寸) | border-box （盒子的寬度或高度等於元素內容的寬度或者高度） | inherit;