關(guān)于CSS重要知識(shí)點(diǎn)(1)

　　CSS處理網(wǎng)頁內(nèi)容時(shí)，會(huì)把每一個(gè)元素"放在"一個(gè)盒子里,也就是所謂的盒子模型。

　　盒子模型包括4部分：內(nèi)容,內(nèi)邊距(padding),邊框(border)和外邊距(margin)

　　上圖展示了整個(gè)盒子模型的內(nèi)容，怎么樣？簡(jiǎn)單吧。如果你認(rèn)為簡(jiǎn)單，那就大錯(cuò)特錯(cuò)了!!

盒子模型里邊有一個(gè)坑，就是取元素的height和width時(shí)，可以多種方式來指定這個(gè)高和寬屬性。換句話說在某些情況下，一個(gè)元素的height和width是不一樣的。那么究竟是哪些情況下呢？答案就是box-sizing屬性。這個(gè)屬性設(shè)值不一樣,元素的height和width就不一樣。

　　1) box-sizing:content-box. 也就是默認(rèn)值。

　　在上圖中，height和width就是最內(nèi)側(cè)矩形(內(nèi)容區(qū)域)的高和寬。

　　2）box-sizing:padding-box

　　在上圖中，height和width就是最內(nèi)側(cè)矩形(內(nèi)容區(qū)域)的高和寬加上各自的padding。

3) box-sizing:border-box

　　在上圖中，height和width就是最內(nèi)側(cè)矩形(內(nèi)容區(qū)域)的高和寬加上各自的padding，在加上border寬度。

　　怎么樣，有點(diǎn)坑吧，不過這個(gè)坑還沒有完全填好。這個(gè)丫的box-sizing屬性還TM跟瀏覽器相關(guān)，不同瀏覽器屬性名稱前綴還不一樣，這一點(diǎn)容易看出來，在IDE里邊敲屬性名稱時(shí)候自然就提示出來了。

　　一般瀏覽器：box-sizing

　　Firefox用的是：-moz-box-sizing

　　移動(dòng)設(shè)備安卓/IOS：-webkit-box-sizing

　　怎么樣，這個(gè)CSS知識(shí)點(diǎn)掌握了吧。

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com