總結(jié)
padding陷嘴、margin、float、position:relative以及position:absolute
注意：圣杯布局努酸、自適應(yīng)布局、padding在寬度為100%時超出瀏覽器顯示杜恰、margin-left為負(fù)-100%可以讓元素移到上一行
padding
padding是給元素增加內(nèi)邊距
屬性說明：
- padding-top: 會在元素上方添加像素
- padding-bottom: 會在元素下方添加像素
- padding-left: 會在元素上方添加像素
- padding-right: 會在元素下方添加像素
特點(diǎn)：
- padding負(fù)值無效获诈，會自動轉(zhuǎn)為0
- padding:20%: 當(dāng)單位是%時仍源，是父元素寬度乘以這個百分?jǐn)?shù)
- 可以同時設(shè)置四個方向的padding，都會起作用舔涎。
容易遇到的問題：
- 因?yàn)閜adding會使得元素自身變大镜会，當(dāng)根元素寬度是瀏覽器寬度，又設(shè)置了padding终抽，就超出了范圍戳表，容易看不出這個情況
- 想要padding加在內(nèi)側(cè)，也就是不撐大容器昼伴，設(shè)置
box-sizing:border-box
應(yīng)用：
- 通常設(shè)置
box-sizing:border-box匾旭，和padding。使得父元素在內(nèi)側(cè)四周留白邊距圃郊。
margin
當(dāng)取值以%時价涝，是以父元素為基準(zhǔn)的百分比,margin控制兩個元素之間的距離
自身移動
- margin-left： 正值（自己右移）；負(fù)值（自己左移）
- margin-top：正值（自己下移）持舆；負(fù)值（自己上移）
相鄰的元素移動
- margin-right： 正值（自己不動色瘩，相鄰元素右移）；負(fù)值（自己不動逸寓，相鄰元素左移）
- margin-bottom：正值（自己不動居兆，相鄰元素下移）；負(fù)值（自己不動竹伸，相鄰元素上移）
應(yīng)用
- 可以通過設(shè)置margin-left：-100%將一個塊元素移動到上一行泥栖，圣杯布局，一個固定寬度一個自適應(yīng)
疊加
相鄰兩個的margin = 左邊元素的margin-right+ 右元素的margin-left
但是同一個BFC相鄰元素margin重疊：
- 兩個相鄰的外邊距都是正數(shù)時勋篓，折疊結(jié)果是它們兩者之間較大的值吧享。
- 兩個相鄰的外邊距都是負(fù)數(shù)時，折疊結(jié)果是兩者絕對值的較大值譬嚣。
- 兩個外邊距一正一負(fù)時钢颂，折疊結(jié)果是兩者的相加的和。
float
定義元素的排列方向拜银，從左到右還是從右到左殊鞭。一般left/right、 top/bottom不同時使用盐股，同時使用只有一個有效
position:relative
相對定位钱豁，相對自身定位，不脫離文檔流
- left ：正值（相對自己的左邊框向右移）疯汁；負(fù)值（相對自己的左邊框向左移）
- right ：正值（相對自己的右邊框向左移）牲尺；負(fù)值（相對自己的右邊框向右移）
- top ：正值（相對自己的上邊框向下移）；負(fù)值（相對自己的上邊框向上移）
- bottom：正值（相對自己的下邊框向上移）；負(fù)值（相對自己的下邊框向下移）
注意：一般left和right谤碳、 top和bottom不同時使用溃卡，同時使用只有一個有效
position:absolute
絕對定位，相對最近的不是static的父元素定位蜒简，脫離文檔流
- left：正值（相對父元素左邊框右移）瘸羡；負(fù)值（相對父元素左邊框左移）
- right：正值（相對父元素右邊框左移）；負(fù)值（相對父元素右邊框右移）
- top：正值（相對父元素上邊框下移）搓茬；負(fù)值（相對父元素上邊框上移）
- bottom：正值（相對父元素下邊框上移）犹赖；負(fù)值（相對父元素下邊框下移）
注意：一般left和right、 top和bottom不同時使用卷仑，同時使用只有一個有效
