關(guān)于CSS重要知識點(1)

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

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

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

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

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

　　一般瀏覽器：box-sizing

　　Firefox用的是：-moz-box-sizing

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

　　怎么樣，這個CSS知識點掌握了吧。

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