按照以前的习惯，如果某个元素设置了宽度，那么在设置padding后需要用宽度减去padding的值，但是对于button元素却不用，看以下例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
button{
width: 100px;/* button设置padding后不需要减 */
height: 40px;
background-color: #f0eff1;
border: 1px solid #cccccc;
border-radius: 2px;
font-size: 12px;
color: #666666;
text-align: center;
padding-left:20px;
}
</style>
</head>
<body>
<button type="button">按钮</button>
</body>
</html>
我们发现设置了padding后元素的宽度还是100，另外我只设置了padding-left：20px；但是结果显示还自带了其他的padding，也就是说默认情况下，button是自动设置某些值，且会自动调整内容的大小，不需要手动用宽度减，这难道不是怪异盒子模型吗？在浏览器中再查看一下默认的button的属性值：
果然自带了 box-sizing: border-box;这是怪异盒子模型触发，也自带了 padding: 1px 6px;