CSS3盒子模型是CSS技術所使用的一種思考模型,指在一個網頁文件中,每個元素都被呈現為一個矩形的盒子,描述了元素所佔空間的內容。 css有兩種盒子模型:W3C盒模型(標準盒模型)和IE盒模型(怪異盒模型)。
本教學操作環境:windows7系統、CSS3&&HTML5版、Dell G3電腦。
1、什麼是CSS盒模型
#CSS3盒模型就是CSS技術所使用的一種思維模型,指在一個網頁文檔中,每個元素都被呈現為一個矩形的盒子,描述了元素所佔空間的內容。
盒子模型,顧名思義,就是一個盒子。生活中的盒子,有長寬高,盒子本身也有厚度,可以用來裝東西。頁面上的盒子模型我們可以理解為,從盒子頂部俯視所得的一個平面圖,盒子裡裝的東西,相當於盒子模型的內容(content);東西與盒子之間的空隙,理解為盒子模型的內邊距(padding);盒子本身的厚度,就是盒子模型的邊框(border);盒子外與其他盒子之間的間隔,就是盒子的外邊距(margin)。
元素的外邊距(margin)、邊框(border)、內邊距(padding)、內容(content)就構成了CSS盒子模型。
圖1.盒模型示意圖
#2、IE盒模型與W3C盒子模型
CSS盒模型分為IE盒模型(圖2)與W3C盒模型(圖3)。其實,IE盒模型是怪異模式(Quirks Mode)下的盒子模型,而W3C盒模型是標準模式(Standards Mode)下的盒子模型。
IE6及其更高的版本,還有現在所有標準的瀏覽器都遵循的是W3C盒模型,IE6以下版本的瀏覽器遵循的是IE盒模型。
圖2. IE盒模型
#圖3.W3C盒子模型
從上圖直觀的可以看出,IE盒模型的寬度或高度計算方式為:width/height = content padding border,W3C盒模型的寬度或高度計算方式為:width/height = content。
舉一個簡單的例子:一個div的寬度和高度為100px,內邊距為10px,邊框為5px,外邊距為30px。圖4為不同模型下顯示的結果,W3C盒模型下顯示的div所佔的總寬度和總高度(包括外邊距、邊框、內邊距、內容)為100 10 5 30 = 145px,IE盒模型下顯示的div所佔的總寬度和總高度(包括外邊距、邊框、內邊距、內容)為100 30 = 130px。很明顯的區別,如果元素的寬度(width)一定的情況下,W3C盒模型的寬度(width)不包括內邊距和邊框,IE盒模包括。
程式碼如下:
<style> .content {background: #eee; height: auto;border: 1px solid blue;} .div {width: 100px;height: 100px;margin: 30px;padding: 10px;border: 5px solid blue;} .div-01 {background: orange;} .div-02 {background: yellow;box-sizing: border-box;} </style> <div> <div>div01</div> <div>div02</div> </div>
頁面效果如下:
圖4. 區別
#3、CSS3屬性box-sizing
如果計算一個盒子的長寬高,我們通常都是盒子本身的厚度加上盒子裡的空間大小,所在在IE盒模型和W3C盒模型,我們會覺得IE盒模型比較符合邏輯。 (學習影片分享:css影片教學)
不同的人有不同的習慣,所以CSS3新增了一個屬性box-sizing: content-box | border-box | inherit,預設值為content-box。如果值為content-box,那麼元素遵循的是W3C盒模型;如果值為border-box,則元素遵循的是IE盒模型;如果值為inherit,該屬性的值應該從父元素繼承。
4、關於盒子模型的使用
有沒有人和我一樣,覺得屬性box-sizing真是個好東西,只需設定所有元素的該屬性為content-box或border-box,滿足自己的習慣。
虽说现在的浏览器都兼容该属性(如上图),还是得以防万一,在属性前最好暂时加-webkit-和-moz-前缀。
* { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; }
在上图,我们看到IE兼容属性box-sizing必须是8或者更高的版本,其他浏览器都可以自动升级,兼容性不担心,那如果是IE7、IE6或者更低的版本,怎么办?还有,如果我们不用该属性,那浏览器该选择哪种盒模型呢?
其实,浏览器选择哪个盒模型,主要看浏览器处于标准模式(Standards Mode)还是怪异模式(Quirks Mode)。我们都记得声明吧,这是告诉浏览器选择哪个版本的HTML,后面一般有DTD的声明,如果有DTD的声明,浏览器就是处于标准模式;如果没有DTD声明或者HTML4一下的DTD声明,那浏览器按照自己的方式解析代码,处于怪异模式。
处于标准模式的浏览器(IE浏览器版本必须是6或者6以上),会选择W3C盒模型解析代码;处于怪异模式的浏览器,则会按照自己的方式去解析代码,IE6以下则会是选择IE盒模型,其他现代的浏览器都是采用W3C盒模型。
因为IE6以下版本的浏览器没有遵循Web标准,不论页面开头有没有DTD声明,它都是按照IE盒模型解析代码的。
更多编程相关知识,请访问:编程视频!!
以上是css盒模型是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!