按照以前的习惯,如果某个元素设置了宽度,那么在设置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;