它主要用来告诉浏览器怎么计算元素的展示宽高的。

@R_884_2@-sizing 允许您以特定的方式定义匹配某个区域的特定元素。

在开发过程中，当有 固定宽高的元素带有 boder 或 padding 的时候，它在 IE 中展示和 Chrome 中是不同的，如果我们不设置这个，那么在 IE浏览器中它的实际宽高是小于 Chrome 浏览器的这是为什么呢？

Chrome 浏览器使用的是标准盒模型 content-@R_884_2@，IE 盒模型是 border-@R_884_2@。

下面就是盒模型的结构图

@R_884_2@-sizing: content-@R_884_2@ | border-@R_884_2@

它接受参数 content-@R_884_2@ 或 border-@R_884_2@。

上图是盒

content-@R_884_2@ 的计算方式是:

width = content width;

height = content height

border-@R_884_2@ 的计算方式是：

width = border + padding + content width

heigth = border + padding + content heigth

<div class="demo">网 CSS3 学习</div>

.demo{
    width:px;
    height:px;
    background:#000;
    color:#fff;
    padding:px;
    border:px solid red;
}

图

说明:左侧是 Chorme 浏览器右侧是低版本 IE 浏览器。

.demo{
    width:px;
    height:px;
    background:#000;
    color:#fff;
    padding:px;
    border:px solid red;
    @R_884_2@-sizing:border-@R_884_2@;
}

图

.demo{
    width:px;
    height:px;
    background:#000;
    color:#fff;
    padding:px;
    border:px solid red;
    @R_884_2@-sizing:content-@R_884_2@;
}

图

推荐大家设置 @R_884_2@-sizing 为border-@R_884_2@ 这样方便我们写样式不必在去减去 padding 也不会造成 IE 和 Chorme 这类浏览器展示不同的 bug 。

如果不设置 @R_884_2@-sizing 不同浏览器会有不同的计算方式。