常用屬性

width: 寬度

height: 高度

border:邊框

padding:內邊距

margin:外邊距

background: 背景

背景色:background-color: lightblue

背景圖: background-image: url(img/x.jpg);

背景不平鋪: background-repeat: no-repeat; / 在background: url(img/x.jpg) no-repeat; 直接加.

垂直/水平 不平鋪: background-repeat-y/x: no-repeat;

顏色:transparent / rgb(0,0,0) 透明色

字號：font-size: 20px;
chrome 預設字型16px,最小12px

字型粗細：font-weight: 700;

首行縮排：text-indent: 40px;

行塊屬性

塊標籤: ul,li,ol,h1~h6,p

特點:*可以設定寬高, *不可以與別人共處一行

*不設定寬度的情況下,預設100%

轉換為行內標籤,可共處一行,不可以設定寬高:display: inline;

既可設寬高,又可共處一行 display: inline-block;

行內標籤: span ,strong,a

特點: *不可以設定寬高, *可以與別人共處一行 *寬高用內容展開

轉換為塊,可設寬高,不可共處一行: display: block;

行內塊標籤: img,input

特點: *可以設定寬高, *可以與別人共處一行

行高：line-height: 40px;

水平居中：text-align: center;

單行垂直居中：line-height: 50px;

盒模型

1.外邊距:margin

分寫: margin-left / right / top / bottom : 值 (左調可為負) / auto(居中) ;

合寫:

1個值:all

2個值: 上下 左右

3個值: 上 左右 下

4個值: 上 右 下 左

清除則值為0

2.邊框:border

位置分寫: border-left / right / top / bottom : 值

位置合寫:

合寫:

1個值:all

2個值: 左上右下 左下右上

3個值: 左上 左下右上 左下

4個值: 左上 右 上 右 下 左下

樣式: double (雙實線) / solid () /dashed/dotted

3.內邊距:padding(同上)