CSS3 box-sizing屬性詳解
發(fā)布時間：2016-11-15 17:08:56 作者：zhaoran 
我要評論
我要評論隨著瀏覽器對HTML5及CSS3的支持，在移動端及自適應(yīng)頁面中CSS3.0發(fā)揮著很大優(yōu)勢，下面小編來給大家講下CSS3.0的屬性之box-sizing，感興趣的朋友們可以參考借鑒，下面來一起看看吧。
簡介
box-sizing屬性包括content-box（default），border-box，padding-box。
1、content-box，border和padding不計算入width之內(nèi)
2、padding-box，padding計算入width內(nèi)
3、border-box，border和padding計算入width之內(nèi)，其實就是怪異模式了~
注意：
ie8+瀏覽器支持content-box和border-box；
ff則支持全部三個值。
使用時：
-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é)
以上就是這篇文章的全部內(nèi)容，希望本文的內(nèi)容對大家學(xué)習(xí)或者使用CSS3能有所幫助，如果有疑問大家可以留言交流。
相關(guān)文章
- 本篇文章主要介紹了css屬性box-sizing，box-sizing屬性是CSS3中引入的，有人解釋為它可以指定用width屬性與height屬性分別指定的寬度值與高度值是否包含元素內(nèi)部的補白區(qū)域2017-01-04
- 下面小編就為大家?guī)硪黄猚ss3 盒模型以及box-sizing屬性全面了解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-20
使用CSS3的box-sizing屬性解決div寬高被內(nèi)邊距撐開的問題
div往往會因為內(nèi)邊距的設(shè)置而使整個層寬度和高度超出預(yù)定范圍,而CSS3的box-sizing屬性可以簡單解決這樣的現(xiàn)象,下面我們就來詳細解說使用CSS3的box-sizing屬性解決div寬高被2016-06-28- 這篇文章主要介紹了CSS3屬性box-sizing使用指南,需要的朋友可以參考下2014-12-09
- CSS3 box-sizing屬性，在很多新手朋友來看是比較陌生的,接下來介紹CSS3 box-sizing使用及注意部分，感興趣的朋友可以了解下2013-01-08
- 說到 IE 的 bug，一個臭名昭著的例子是它對于“盒模型”的錯誤解釋：在 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