box-sizing
的 CSS 属性。
当你设置一个元素为 box-sizing: border-box;
时,此元素的内边距和边框不再会增加它的宽度。这里有一个与前一页相同的例子,唯一的区别是两个元素都设置了 box-sizing: border-box;
.simple { width: 500px; margin: 20px auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .fancy { width: 500px; margin: 20px auto; padding: 50px; border: solid blue 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
同样是 width:500px,现在一样宽了...
</div>同样是 width:500px,我跟上面一样宽了...
</div>既然没有比这更好的方法,一些 CSS 开发者想要页面上所有的元素都有如此表现。所以开发者们把以下 CSS 代码放在他们页面上:
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
这样可以确保所有的元素都会用这种更直观的方式排版。
不过 box-sizing
是个很新的属性,目前你还应该像我上面例子中那样使用 -webkit-
和 -moz-
前缀。这可以启用特定浏览器实验中的特性。同时记住它是支持 IE8+ 的。