做前端的知道,盒子外观的宽度=2*border的宽度+2*padding的宽度+内容的宽度。因为,为了外观的宽度是想要的效果,需要通过麻烦的数学计算。但是,福音来了,加上下面这3行,元素的内边距和边框不再会增加它的宽度。
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
测试(下面这2种的样式,盒子宽度是一样的):
.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-width: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}