盒模型的構(gòu)成
從外到得分別由
Margin、Border、Padding、及內(nèi)容組成
盒模型的分類(lèi)
標(biāo)準(zhǔn)盒模型（w3c標(biāo)準(zhǔn)盒模型）
Content=width+height
內(nèi)容 = 寬+高
怪異盒模型（ie盒模型）
Content=width+reight+padding+border
盒模型轉(zhuǎn)換
Box-sizing：content-box； w3c標(biāo)準(zhǔn)盒模型
正常文檔流 自上而上 自作而右
脫離文檔流：非正常文檔流
父元素的高度由子元素的高度和內(nèi)容撐開(kāi)
浮動(dòng)：float：/eft/right/none;
浮動(dòng)特性：1、不占位
會(huì)影響其后面的相鄰元素
父元素高度塌陷
可以使塊元素并排顯示
隱式的將行內(nèi)元素轉(zhuǎn)換為塊級(jí)元素
清除浮動(dòng) 解決父元素高度塌陷的問(wèn)題
設(shè)置父元素高度，設(shè)置高度值為子元素的最大元素
父元素的高度取決于高度最大的子元素
缺點(diǎn)：子元素高度不定
設(shè)置父元素overflow：hidden；
overflow：visible；默認(rèn)值溢出顯示
Hidden；隱藏
Auto ；自動(dòng)顯示滾動(dòng)條
Scroll；顯示滾動(dòng)條
缺點(diǎn)：兼容性不好
給父元素后面添加一個(gè)子元素，并設(shè)置clear：both
clear：清除浮動(dòng)
left；清除左邊浮動(dòng)
right；清除右邊浮動(dòng)
both；清除左右浮動(dòng)
缺點(diǎn)：擾亂結(jié)構(gòu)
頁(yè)面會(huì)增加哦無(wú)用的div
增加頁(yè)面負(fù)擔(dān)
給父元素設(shè)置浮動(dòng)
缺點(diǎn)：需要給所以的父元素設(shè)置浮動(dòng)
給父元素加偽類(lèi)清除浮動(dòng)
Arr.clearfix:after {
display：block；
content:””;
width：0；
height：0;
clear:beth:
}
為了兼容性，還好再加一個(gè)
Arr.clearfix {
zoom: 1;
}
Margin 外邊距
margin重疊效應(yīng)
兩個(gè)相鄰元素
下外邊距
正正：去最大值
正負(fù)：margin正負(fù)相加值
負(fù)負(fù)：取絕對(duì)值最大的
Margin溢出
子元素margin-top，導(dǎo)致父元素向下移動(dòng)
解決方案
給父元素設(shè)置overflow：hidden；
形成結(jié)界：BFC（block formatting context）
塊級(jí)格式化上下文，形成獨(dú)立的塊級(jí)區(qū)域
給父元素設(shè)置padding-top
給父元素設(shè)置邊框border
Padding：內(nèi)邊距
語(yǔ)法
Padding：10px 20px 30px 40px；
上 下 左 右
position定位
position:fixed;
固定定位
相當(dāng)于窗口的定位
四個(gè)方向：top/right/left/bottom
脫離定位
position：static；
靜態(tài)定位（默認(rèn)值）
不可移動(dòng)
position：relative；
相對(duì)定位
相對(duì)于自己定位
四個(gè)方向：top/bottom/right/left
半脫離文檔流：占位，但移動(dòng)的時(shí)候不影響其他元素
position：absolute；
絕對(duì)定位
相對(duì)于有定位屬性的父元素
有定位屬性的元素：不帶靜止定位的定位
當(dāng)所有的父元素都沒(méi)有定位屬性的時(shí)候，則相對(duì)于根元素定位
position；stickg；粘性定位
relatlve+fixed
當(dāng)在窗口顯示區(qū)域的是relative
當(dāng)在超出窗口的區(qū)域內(nèi)的時(shí)候fixed 固定定位
