欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

css3 box-sizing屬性使用參考指南

  發(fā)布時(shí)間：2013-01-08 15:14:12   作者：佚名   我要評(píng)論
CSS3 box-sizing屬性，在很多新手朋友來看是比較陌生的,接下來介紹CSS3 box-sizing使用及注意部分，感興趣的朋友可以了解下

基礎(chǔ)知識(shí)
語法：
box-sizing ： content-box | border-box | inherit

相關(guān)屬性 ： 無

取值：
content-box:此值維持css2.1盒模型的組成模式，border|padding|content {element width=border+padding+content}
border-box:此值改變css2.1盒模型組成模式，content|border|padding {element width=content}
說明：
改變?nèi)萜鞯暮心Ｐ徒M成方式。

引擎類型 Gecko Webkit Presto Internet Explorer
Box-sizing -moz-box-sizing -webkit-box-sizing -o-box-sizing/box-sizing -ms-box-sizing
 

兼容性：

類型 IEInternet Explorer FirefoxFirefox ChromeChrome OperaOpera SafariSafari
版本 (×)IE6 (√)Firefox 2.0 (√)Chrome 1.0.x (√)Opera 9.63 (√)Safari 3.1
(×)IE7 (√)Firefox 3.0 (√)Chrome 2.0.x (√)Safari 4
(√)IE8 (√)Firefox 3.5
 

代碼與實(shí)例
CSS代碼：

復(fù)制代碼
代碼如下:

.box_sizing{
width:180px;
padding:40px 20px;
background:#a0b3d6;
overflow:hidden;
}
.box_sizing .in{
width:100%;
border:12px double #34538b;
background:white;
padding:5px;
box-sizing:border-box;
-o-box-sizing:border-box;
-ms-box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}

HTML代碼：

復(fù)制代碼
代碼如下:

<div class="box_sizing">
<div class="in">此處12像素的border和5像素的padding值算在寬度里面了~~</div>
</div>
               
效果截圖
CSS3 box-sizing效果截圖

相關(guān)文章

最新評(píng)論