探究CSS3 box-sizing属性，重新定义盒子模型with、height尺寸

本篇文章主要介绍了"探究CSS3 box-sizing属性，重新定义盒子模型with、height尺寸"，主要涉及到height方面的内容，对于CSSjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播感兴趣的同学可以参考一下： box-sizing属性作用：通过box-sizing属性，重新定义盒子模型with、height属性所包含的范围。box-sizing属性值：content-...

box-sizing属性作用：通过box-sizing属性，重新定义盒子模型with、height属性所包含的范围。

box-sizing属性值：

content-box：border和padding不计算入width、height之内，默认值。

padding-box：padding计算入width、height内，目前只有firefox支持。

border-box：border和padding计算入width、height之内。

使用方式：

Internet Explorer、Opera 以及 Chrome 支持 box-sizing 属性。

Firefox 支持替代的 -moz-box-sizing 属性。

Safari 支持替代的 -webkit-box-sizing 属性。

box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */-webkit-box-sizing:border-box; /* Safari */

实例：

HTML：

    <divclass="content-box">div>
    <divclass="padding-box">div>
    <divclass="border-box">div>

CSS：

<styletype="text/css">.content-box{
        box-sizing:content-box;
        -moz-box-sizing:content-box;
        -webkit-box-sizing:content-box;
        -o-box-sizing:content-box;
        -ms-box-sizing:context-box;
        width:100px;
        height:100px;
        padding:20px;
        border:5px solid #E6A43F;
        background: blue;
    }.padding-box{
        box-sizing:padding-box;

        width:100px;
        height:100px;
        padding:20px;
        border:5px solid #186645;
        background: red;                
    }.border-box{
        -webkit-box-sizing:border-box;
        width:100px;
        height:100px;
        padding:20px;
        border:5px solid #3DA3EF;
        background: yellow;
    }style>

效果：

FF截图：

Chrom、IE截图：

参看：http://www.cnblogs.com/zhaoran/archive/2013/05/24/3097482.html

').addClass('pre-numbering').hide(); $(this).addClass('has-numbering').parent().append($numbering); for (i = 1; i <= lines; i++) { $numbering.append($('

').text(i)); }; $numbering.fadeIn(1700); }); });

以上就介绍了探究CSS3 box-sizing属性，重新定义盒子模型with、height尺寸，包括了height方面的内容，希望对CSSjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播有兴趣的朋友有所帮助。

本文网址链接：http://www.codes51.com/article/detail_604288.html