CSS3 box-sizing屬性詳解
發(fā)布時(shí)間：2016-11-15 17:08:56 作者：zhaoran 
我要評(píng)論
我要評(píng)論隨著瀏覽器對(duì)HTML5及CSS3的支持，在移動(dòng)端及自適應(yīng)頁(yè)面中CSS3.0發(fā)揮著很大優(yōu)勢(shì)，下面小編來(lái)給大家講下CSS3.0的屬性之box-sizing，感興趣的朋友們可以參考借鑒，下面來(lái)一起看看吧。
簡(jiǎn)介
box-sizing屬性包括content-box（default），border-box，padding-box。
1、content-box，border和padding不計(jì)算入width之內(nèi)
2、padding-box，padding計(jì)算入width內(nèi)
3、border-box，border和padding計(jì)算入width之內(nèi)，其實(shí)就是怪異模式了~
注意：
ie8+瀏覽器支持content-box和border-box；
ff則支持全部三個(gè)值。
使用時(shí)：
-webkit-box-sizing: 100px; // for ios-safari, android
-moz-box-sizing:100px; //for ff
box-sizing:100px; //for other
示例如下：
<style type="text/css">
.content-box{
box-sizing:content-box;
-moz-box-sizing:content-box;
width: 100px;
height: 100px;
padding: 20px;
border: 5px solid #E6A43F;
background: blue;
}
.padding-box{
box-sizing:padding-box;
-moz-box-sizing:padding-box;
width: 100px;
height: 100px;
padding: 20px;
border: 5px solid #186645;
background: red;
}
.border-box{
box-sizing:border-box;
-moz-box-sizing:border-box;
width: 100px;
height: 100px;
padding: 20px;
border: 5px solid #3DA3EF;
background: yellow;
}
</style>
截圖（ff）：
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家學(xué)習(xí)或者使用CSS3能有所幫助，如果有疑問(wèn)大家可以留言交流。
相關(guān)文章
- 本篇文章主要介紹了css屬性box-sizing，box-sizing屬性是CSS3中引入的，有人解釋為它可以指定用width屬性與height屬性分別指定的寬度值與高度值是否包含元素內(nèi)部的補(bǔ)白區(qū)域2017-01-04
- 下面小編就為大家?guī)?lái)一篇css3 盒模型以及box-sizing屬性全面了解。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-09-20
使用CSS3的box-sizing屬性解決div寬高被內(nèi)邊距撐開(kāi)的問(wèn)題
div往往會(huì)因?yàn)閮?nèi)邊距的設(shè)置而使整個(gè)層寬度和高度超出預(yù)定范圍,而CSS3的box-sizing屬性可以簡(jiǎn)單解決這樣的現(xiàn)象,下面我們就來(lái)詳細(xì)解說(shuō)使用CSS3的box-sizing屬性解決div寬高被2016-06-28- 這篇文章主要介紹了CSS3屬性box-sizing使用指南,需要的朋友可以參考下2014-12-09
- CSS3 box-sizing屬性，在很多新手朋友來(lái)看是比較陌生的,接下來(lái)介紹CSS3 box-sizing使用及注意部分，感興趣的朋友可以了解下2013-01-08
- 說(shuō)到 IE 的 bug，一個(gè)臭名昭著的例子是它對(duì)于“盒模型”的錯(cuò)誤解釋?zhuān)涸?IE5.x 以及 Quirks 模式的 IE6/7 中，將 border 與 padding 都包含在 width 之內(nèi)。這為前2009-04-17
詳解CSS3中的box-sizing（content-box與border-box）
這篇文章主要介紹了CSS3中的box-sizing（content-box與border-box）的相關(guān)資料,需要的朋友可以參考下2019-04-19