技術標籤：前端學習css

盒子模型

每個元素都可以看做是一個盒子一個完整的盒子是由內容，padding，border，margin組成如下圖

1.盒子的寬和高

盒子的寬和高設定後，再給這個元素增加邊框或者內外邊距的話，那麼此時盒子的寬高就是原來的加上新增的
例如：一個div寬為30px，高位20px此時給他加上一個5px的邊框那麼此時它的高度為40px，寬度為30px。

2.邊框

1.邊框的三個方面
width ，邊框的寬度
color 邊框的顏色
style 邊框的樣式
2.邊框的綜合定義
（1）分開單獨設定

border-width:1px;
border-color:#00f;
border-style:solid
 

(2)使用綜合屬性``

border：1px #00f solid

注：這三個值沒有先後順序
（3）四邊獨立設定

border-left-width：1px；
border-left-color：#00f；
border-left-style：solid；

3.內邊距

邊框和內容之間的空白寬度
1.padding的綜合設定

padding：2px

四個內邊距都為2px
2.padding的單邊設定

padding-left：2px

左邊邊框和內容之間的距離為2px

4.外邊距

標籤和標籤之間的空白寬度
外邊距的設定是相疊加的
1.margin的綜合設定`

margin：10px；

和四邊鄰近的標籤距離都為10px

margin-left:10px；

標籤距左邊10px

5.背景

1.background-color 定義標籤的背景顏色
2.background-image 定義背景圖片
3.background-repeat 定義圖片的顯示方式

4.background-position 定義背景圖片的位置
（1）直接使用兩個定位單詞

background-position：right top；

（2）使用x，y座標

background-position：20px 30px