今天转牛角尖了，在做项目的时候，为了2px的差异，费了一上午的时间。我来说说事件的经过吧。
本来今天是为了实现一个按钮的样式。我本来可以用div、a标签这些来实现的结果。大脑抽风，选用了button。然后就进坑了。现在想起来好想哭。是蠢得哭。给大家先看看效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>button</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.btn{
width: 300px;
height: 100px;
}
</style>
</head>
<body>
<button type="button" class="btn">Click Me</button>
</body>
</html>
代码运行后的效果
button标签
结果出来了。我设置的width:300px，height:100px。然后少了2px。我就奇怪了。当时代码写的复杂，不像现在写的这么简单。我怀疑是前面的样式，可能影响到了。就开始检查。往往没想到啊。就这样浪费了好多时间。
后来我把button的标签换掉了。换成了div。结果又对了。
div标签
我就知道了。可能是盒模型上有什么变化。我简单的回忆下盒模型
标准的盒模型
IE盒模型
我当时就想我的button肯定用了IE的盒模型。但是我用的是谷歌浏览器啊。为什么会是IE的盒模型。我们接着查资料。没事多谷歌
我查到了一个属性可以设置盒模型的类型：box-sizing。
- box-sizing 属性用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型。可以使用此属性来模拟不正确支持CSS盒子模型规范的浏览器的行为。
正式的语法:
box-sizing:content-box | box-sizing:border-box
content-box
默认值，标准盒子模型。 width 与 height 只包括内容的宽和高， 不包括边框（border），内边距（padding），外边距（margin）。注意: 内边距, 边框 & 外边距 都在这个盒子的外部。 比如. 如果 .box {width: 350px}; 而且 {border: 10px solid black;} 那么在浏览器中的渲染的实际宽度将是370px;
- 尺寸计算公式：
width = 内容的宽度，height = 内容的高度。 - 宽度和高度都不包含内容的边框（border）和内边距（padding）。
border-box
width和height属性包括内容，填充和边框，但不包括边距。这是当文档处于 Quirks模式 时Internet Explorer使用的盒模型。注意，填充和边框将在盒子内 , 例如, .box {width: 350px; border: 10px solid black;}
导致在浏览器中呈现的宽度为350px的盒子。内容框不能为负，并且被分配到0，使得不可能使用border-box使元素消失。这里的维度计算为：
width = border + padding + 内容的 width，
height = border + padding + 内容的 height。
在html中，button元素的box-sizing属性默认是border-box，大部分其他元素的box-sizing的属性则都是content-box。
结束语
所以我就是踩到box-sizing这个坑了。然后找问题，花费了半天时间。当初发现了2px的差异。本来可以跳过去不管的，心里想的，2px差异不大。结果自己不放过自己。不过以后就有经验了。以后样式初始化。要小心box-sizing
网友评论