關於CSS重要知識點(1)

1. 盒子模型

　　CSS處理網頁內容時，會把每一個元素"放在"一個盒子裡,也就是所謂的盒子模型。

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

     

#　　上圖展示了整個盒子模型的內容，怎麼樣？簡單吧。如果你認為簡單，那就大錯特錯了!!

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

　　1) box-sizing:content-box. 也就是預設值。

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

　　2）box-sizing:padding-box

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

      3) box-sizing:border-box

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

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

　　一般瀏覽器：box-sizing

　　Firefox用的是：-moz-box-sizing

　　行動裝置安卓/IOS：-webkit-box-box- sizing

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

 

 

   

　　

# 

################################################################################################這樣

以上是關於CSS重要知識點(1)的詳細內容。更多資訊請關注PHP中文網其他相關文章！