box-sizing属性
box-sizing属性
当设置一个元素为 box-sizing: border-box;
此元素的内边距和边框不再会增加它的宽度,支持IE8+
.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; }
两个div呈现一样的宽度
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
这样可以确保所有的元素都能按照这个方式排版,内边距和边框不会影响box的宽度