CSS盒子模型歸納
CSS盒子模型
所有HTML元素可以看作盒子呜袁，在CSS中，"box model"這一術(shù)語(yǔ)是用來(lái)設(shè)計(jì)和布局時(shí)使用。CSS盒模型本質(zhì)上是一個(gè)盒子，封裝周圍的HTML元素闪唆，它包括：邊距，邊框钓葫，填充悄蕾，和實(shí)際內(nèi)容。
盒模型允許我們?cè)谄渌睾椭車剡吙蛑g的空間放置元素础浮。
下面的圖片說(shuō)明了盒子模型(Box Model)：
1.png
- Margin(外邊距) - 清除邊框外的區(qū)域帆调，外邊距是透明的奠骄。
- Border(邊框) - 圍繞在內(nèi)邊距和內(nèi)容外的邊框。
- Padding(內(nèi)邊距) - 清除內(nèi)容周圍的區(qū)域番刊，內(nèi)邊距是透明的戚揭。
- Content(內(nèi)容) - 盒子的內(nèi)容，顯示文本和圖像撵枢。
運(yùn)用實(shí)例：
div {
width: 250px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}
實(shí)際計(jì)算：
250px (寬)
- 50px (左 + 右填充)
- 50px (左 + 右邊框)
- 50px (左 + 右邊距)
= 400px
故，根據(jù)這樣定義的盒子需要的像素為400.
盒子定位
盒子定位有默認(rèn)定位精居、相對(duì)定位锄禽、絕對(duì)定位、固定定位：
- 默認(rèn)定位：就是在沒(méi)有定義的情況下由系統(tǒng)默認(rèn)給出的定位方式靴姿。
- 相對(duì)定位：相對(duì)定位主要以自己為基準(zhǔn)點(diǎn)移動(dòng)位置沃但，但是移動(dòng)位置后之前的位置依舊保留。
運(yùn)用：使用relative佛吓，即相對(duì)定位宵晚，除了將position屬性設(shè)置為relative之外，還需要指定一定的偏移量维雇，水平方向通過(guò)left或者right屬性來(lái)指定淤刃，豎直方向通過(guò)top和bottom來(lái)指定。 - 絕對(duì)定位：絕對(duì)定位跟浮動(dòng)一樣吱型，脫離標(biāo)準(zhǔn)流逸贾，原來(lái)位置不保留了,但是絕對(duì)定位是真正意義的脫離標(biāo)準(zhǔn)，可以覆蓋文字圖片內(nèi)容津滞。但是浮動(dòng)的話只是盒子脫離了铝侵，內(nèi)容的話還是不會(huì)被其他盒子蓋住。絕對(duì)定位當(dāng)沒(méi)有父元素或父元素都沒(méi)有定位触徐，他以瀏覽器當(dāng)前頁(yè)面為基準(zhǔn)咪鲜。如果父元素有定位了，那么他以最近的有定位的父元素為基準(zhǔn)點(diǎn)進(jìn)行定位移動(dòng)撞鹉。子覺(jué)父相：意思是疟丙，子盒子用絕對(duì)定位，父盒子用相對(duì)定位鸟雏，為什么這樣隆敢。因?yàn)楦负凶右话憧赡芟旅孢€有其他的盒子，如果父盒子給了絕對(duì)定位崔慧，那么原來(lái)位子就不占了拂蝎，這樣下面的盒子會(huì)上移，產(chǎn)生布局問(wèn)題惶室。如果父盒子用相對(duì)定位温自，那么原來(lái)位子占有玄货，下面的其他盒子按照標(biāo)準(zhǔn)流會(huì)繼續(xù)排列在下面，同時(shí)父盒子里的子盒子的絕對(duì)定位也會(huì)參照父盒子為基準(zhǔn)悼泌。
- 固定定位：
- 固定定位跟父元素沒(méi)有關(guān)系松捉，只認(rèn)瀏覽器。
- 固定定位完全脫離標(biāo)準(zhǔn)流馆里，不占位子隘世，不隨著滾動(dòng)條滾動(dòng)
- ie6等低版本瀏覽器不支持固定定位。
- 跟浮動(dòng)一樣鸠踪，元素添加了絕對(duì)定位和固定定位后丙者，元素自動(dòng)轉(zhuǎn)換為行內(nèi)塊元素，行內(nèi)塊元素如果沒(méi)有給寬度营密。
浮動(dòng)
- 浮動(dòng)的特性：
- 浮動(dòng)的盒子脫離標(biāo)準(zhǔn)流械媒，不會(huì)占原來(lái)的位置。
- 浮動(dòng)只有左右浮動(dòng)评汰。
- 浮動(dòng)的盒子一般會(huì)與標(biāo)準(zhǔn)流的父盒子搭配使用纷捞，有一個(gè)子盒子浮動(dòng)了，一般其他子盒子也需要浮動(dòng)才能在父盒子里一行顯示被去。
- 浮動(dòng)可以讓元素模式變成行內(nèi)塊特性主儡。
- 清除浮動(dòng)：
- 額外標(biāo)簽法：在浮動(dòng)元素的末尾添加一個(gè)空標(biāo)簽，然后給這個(gè)空標(biāo)簽的style給個(gè)clear both樣式惨缆。缺點(diǎn)是標(biāo)簽結(jié)構(gòu)變多了缀辩。
- 父級(jí)添加overflow：hidden、auto踪央、scroll等屬性臀玄，不過(guò)缺點(diǎn)是當(dāng)內(nèi)容增加的時(shí)候容易導(dǎo)致內(nèi)容不會(huì)自動(dòng)換行而被隱藏掉，無(wú)法顯示需要溢出的元素畅蹂。
- 使用after偽元素清除浮動(dòng)健无，使用方法，如下：.clearfix：after{ content：“”液斜； display：block累贤； height：0； clear：both少漆； visibility：hidden臼膏；}.clearfix {*zoom：1；} 這個(gè)是ie6-7專有示损，因?yàn)?-7不支持：after渗磅。
- 使用before和after雙偽元素清除浮動(dòng)，使用方法如下：.clearfix：before，.clearfix：after { content：“”始鱼； display：table仔掸；}.clearfix：after { clear：both；}.clearfix {*zoom：1医清；}
