盒子模型概念：
盒子模型用來“放”網(wǎng)頁中的各種元素
網(wǎng)頁設(shè)計(jì)中的內(nèi)容如文字佩耳，圖片等元素，都可以是盒子（div嵌套）
普通文檔流:
? ? ? ? ? ? (沒有設(shè)置? float,position,display? )
? ? ? ? ? ? 塊元素自上而下排列,內(nèi)嵌元素自左向右排列在同一行.
? ? ? ? border:? border-width （color||style）:(四個(gè)方向：上妄田，右，下渡蜻，左)
????? border:[寬度][樣式][顏色]
?????? border-left:[寬度][樣式][顏色]
? ? ? ? ? ? 寬度? width??
? ? ? ? ? ? 顏色? color????? 顏色||transparent
? ? ? ? ? ? 樣式? style??? （none,hidden）?
內(nèi)邊距屬性：設(shè)置元素的內(nèi)容與邊框之間的距離（內(nèi)邊距或填充）分四個(gè)方向（上碱璃，右，下勾效，左）
padding-top：長度值|百分比
復(fù)合寫法：padding：值1（四個(gè)方向）
???????????????? padding：值1? 值2（上下嘹悼， 左右）
????????????????? padding：值1? 值2? 值3（上，左右层宫，下）
???????????????? padding：值1 值2 值3 值4（上杨伙，右，下萌腿，左）
值不可以設(shè)置負(fù)值 不可以設(shè)置auto 設(shè)置無效??
margin-top:長度值 | 百分比 | auto
外邊距屬性:設(shè)置元素與元素之間的距離（外邊距）4個(gè)方向（上限匣，右，下毁菱，左）
????????????????? margin：值1（四個(gè)方向）
????????????????? margin：值1? 值2（上下米死， 左右）
????????????????? margin：值1? 值2? 值3（上，左右贮庞，下）
??????????? ? ? ? margin：值1 值2 值3 值4（上峦筒，右，下窗慎，左）
內(nèi)邊距會(huì)顯示背景物喷，一般常用的布局形式
padding-left設(shè)置值卤材，background-image,把背景圖片position左邊，可以作為小圖標(biāo)顯示
值可以設(shè)置負(fù)值可以用于布局， 左右值為auto尉辑，實(shí)現(xiàn)水平方向居中顯示效果
??????
? 塊元素的外邊距的傳遞:
如果某個(gè)標(biāo)簽的第一個(gè)元素設(shè)置margin-top或者margin-bottom晕拆，margin屬性會(huì)向父級(jí)向上或者向下傳遞，如果父級(jí)元素還是它的父級(jí)元素的第一個(gè)標(biāo)簽材蹬，則會(huì)繼續(xù)向上或向下傳遞实幕，這是布局時(shí)需要注意的地方，一般使用padding內(nèi)邊距來達(dá)到需要布局的效果堤器，不過也是有解決方法
1昆庇，在父級(jí)元素設(shè)置 overflow：hidden；
2闸溃，padding-top：1px整吆；
?border-top:1px solid #f00;
注意只是在塊級(jí)元素中起作用
塊元素的疊加
垂直方向，兩個(gè)相鄰元素都設(shè)置外邊距辉川，外邊距會(huì)發(fā)生合并表蝙，合并后的外邊距高度=兩個(gè)發(fā)生合并外邊距的高度重的最大值
display:顯示屬性
? ? ? ? ? ? ? ? inline:元素顯示為內(nèi)聯(lián)元素，元素前后沒有換行符
? ? ? ? ? ? ? ? block:元素顯示為塊元素乓旗，元素前后帶有換行符
? ? ? ? ? ? ? ? inline-block:內(nèi)聯(lián)塊元素府蛇，元素呈現(xiàn)為inline，具有block相應(yīng)特性
??????????????? none ：此元素不會(huì)被顯示
? ? ? ? ? ? 普通文檔流,塊元素垂直方向的外邊距相遇會(huì)融合取大值
