內(nèi)邊距（內(nèi)容區(qū)、邊框共同影響可見框大蟹嗡亍）：
box{
width: 200px;
height: 200px;
border:20px red恨锚；
padding-top；
}
padding-top
padding-right倍靡、右邊距
padding-left猴伶、
padding-bottom
padding：100px全部邊距設(shè)置完畢。
使用padding可以同時設(shè)置四個邊框的樣式塌西，規(guī)則和border-width一致
外邊距（不會影響可見框大小他挎。只會影響盒子的位置，擴大了外部位置）
自己設(shè)置外邊距（只有一個盒子）捡需。對于右面的外邊距办桨，由于距離離得遠，移動看不出效果站辉。對于自己來說呢撞，自身位置變，就是上左外邊距饰剥。
如果盒子與其相鄰殊霞，會使右面下面其他的東西位置改變。
外邊距可以設(shè)置為負(fù)值汰蓉，往右和左走绷蹲。
下面的外邊距bottom設(shè)為負(fù)值以后，在其下面的盒子往上走古沥，而本身不動瘸右。（應(yīng)用，看商品岩齿，底下出現(xiàn)詳情）
box{
border:20px red太颤；
margin-top；
}
margin-top/right/bottom/left盹沈。
bottom-left：auto 自動（只給水平方向設(shè)置）龄章，有有多少都設(shè)置為最大值（到最右面）吃谣。
bottom-left：auto
bottom-right：auto居中
bottom ：0 auto（常用）
簡潔方法和padding和border一樣。
外邊距的重疊（垂直方向的相鄰的盒子（中間加a就不會重疊）做裙，取邊距值最大）
box{
border:20px red岗憋；
margin-bottom：200；
}
box{
border:20px red锚贱；
margin-top：100仔戈；
父子元素
子元素變了父元素也變了。解決辦法：
border padding 加內(nèi)容拧廊。
瀏覽器默認(rèn)樣式
默認(rèn)內(nèi)外邊距
body（p监徘，ul）{
margin：0
}
推出=以下
*{
margin：0
padding：0
}（性能不好）
以上塊元素模型
列表。
*{
margin: 0;
padding: 0;
}
內(nèi)聯(lián)元素盒模型
內(nèi)聯(lián)樣式不能設(shè)置寬高
內(nèi)聯(lián)元素可以設(shè)置水平方向內(nèi)邊距
左右可以
邊框可以設(shè)置吧碾。內(nèi)聯(lián)樣式設(shè)置垂直方向大小凰盔，不會改變位置。
邊框倦春。設(shè)置垂直方向大小户敬，不會改變布局。左右會影響布局
水平外邊距睁本，內(nèi)聯(lián)元素支持水平方向的外邊距
左右可以用尿庐。水平方向二個是求和的
垂直方向。不可用（沒效果）添履。
（水平方向都要=有屁倔，就當(dāng)垂直都不行）
display和visibility
！內(nèi)聯(lián)變塊元素 display ：block
塊元素 可以轉(zhuǎn)為內(nèi)聯(lián)display ： inline
inline-block行內(nèi)塊 寬可設(shè)置不占一行暮胧。
none 就不顯示了，隱藏了不占位置了问麸。
visibility
規(guī)定元素是否可見往衷。
visibility：visvle；
visibility： hidden 严卖；隱藏也占用位置席舍。
overflow
當(dāng)子元素超出父元素的時候。（溢出））
在父元素里面加
overflow：visibale 溢出
overflow： hidden 溢出內(nèi)容減掉
overflow：scroll 滾動（不超出父元素）（不管溢出否 水平垂直都加滾動條）
overflow：auto 根據(jù)情況自己加滾動條
文檔流（網(wǎng)頁就是文檔）
最基礎(chǔ)的一層哮笆，表示頁面的位置来颤。
塊元素
在文檔流，自上到下稠肘，獨占一行福铅。
不設(shè)寬度，就是默認(rèn)瀏覽器寬度auto项阴。設(shè)置寬度在設(shè)padding就會影響可見框大小滑黔。沒設(shè)置寬度，auto，寬還是父元素100%略荡，里面內(nèi)容會往后擠庵佣。
高被撐開了。
內(nèi)聯(lián)元素
在文檔流汛兜，只占自身大小巴粪。從左到右排列。
寬高都被內(nèi)容撐開了粥谬。
浮動
$3 123快捷鍵
塊元素 可以轉(zhuǎn)為內(nèi)聯(lián)display ： inline-block
《》《》 == <><>挨著沒空格
但是不想橫著寫：
float 浮動 不繼承
float ：right验毡；）（左上右上浮動，浮動到父元素邊框或者不浮動對象就不浮動）
塊獨占一行帝嗡。浮動不上去晶通。--》可以換位置解決。
一行放不下哟玷，浮動目標(biāo)狮辽，自動換行。
文字繞圖
浮動不會蓋住文字巢寡，所以文字自動環(huán)繞喉脖。（圖片一個效果）
內(nèi)聯(lián)元素的浮動
在文檔流中，子元素的寬度默認(rèn)占父元素的全部
內(nèi)聯(lián)元素脫離文檔流以后會變成塊元素*
簡單布局
1/固定布局
2/自適應(yīng)布局
