CSS3 box-sizing屬性
我要評論說到 IE 的 bug，一個臭名昭著的例子是它對于“盒模型”的錯誤解釋：在 IE5.x 以及 Quirks 模式的 IE6/7 中，將 border 與 padding 都包含在 width 之內(nèi)。這為前端工程師的工作平添了不少麻煩，幾戶每個需要定義尺寸的 box 都要思量一下：是否觸發(fā)了“盒模型 bug”？
同時，由于另一撮瀏覽器對標(biāo)準(zhǔn)的遵從，我們在精確定義一個在有限空間內(nèi)顯示的 box 時，也需要計算一下：留給它的空間只有那么大，刨去 border 和 padding，我們該把它的 width 寫成多少呢？
這種情況在 CSS3 時代有了改善，得益于這個叫做 box-sizing 的屬性，它具有“content-box”和“border-box”兩個值。
- 定義 box-sizing: content-box; 時，瀏覽器對盒模型的解釋遵從我們之前認(rèn)識到的 W3C 標(biāo)準(zhǔn)；
- 定義 box-sizing: border-box; 時，瀏覽器對盒模型的解釋與 IE6 相同；
為什么說這個屬性“遲來”呢？IE 對于盒模型的解釋固然不符合 W3C 的規(guī)范，但是也有它的好處：無論如何改動 border 與 padding 的值，都不會導(dǎo)致 box 總尺寸發(fā)生變化，也就不會打亂頁面整體布局。而在 Firefox 等現(xiàn)代瀏覽器下，如果我們要改變一下 padding 的值，就不得不重新計算 box 的 width?，F(xiàn)在 IE6 壽終正寢，這個 CSS 屬性未免有些姍姍來遲。
試用這個新屬性，F(xiàn)irefox 請使用 -moz-box-sizing，Safari / WebKit 請使用 -webkit-box-sizing，Opera 直接用 box-sizing 即可。
相關(guān)文章
- 本篇文章主要介紹了css屬性box-sizing，box-sizing屬性是CSS3中引入的，有人解釋為它可以指定用width屬性與height屬性分別指定的寬度值與高度值是否包含元素內(nèi)部的補(bǔ)白區(qū)域2017-01-04
- 隨著瀏覽器對HTML5及CSS3的支持，在移動端及自適應(yīng)頁面中CSS3.0發(fā)揮著很大優(yōu)勢，下面小編來給大家講下CSS3.0的屬性之box-sizing，感興趣的朋友們可以參考借鑒，下面來一起2016-11-15
- 下面小編就為大家?guī)硪黄猚ss3 盒模型以及box-sizing屬性全面了解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-20
使用CSS3的box-sizing屬性解決div寬高被內(nèi)邊距撐開的問題
div往往會因?yàn)閮?nèi)邊距的設(shè)置而使整個層寬度和高度超出預(yù)定范圍,而CSS3的box-sizing屬性可以簡單解決這樣的現(xiàn)象,下面我們就來詳細(xì)解說使用CSS3的box-sizing屬性解決div寬高被2016-06-28- 這篇文章主要介紹了CSS3屬性box-sizing使用指南,需要的朋友可以參考下2014-12-09
- CSS3 box-sizing屬性，在很多新手朋友來看是比較陌生的,接下來介紹CSS3 box-sizing使用及注意部分，感興趣的朋友可以了解下2013-01-08
詳解CSS3中的box-sizing（content-box與border-box）
這篇文章主要介紹了CSS3中的box-sizing（content-box與border-box）的相關(guān)資料,需要的朋友可以參考下2019-04-19