button的width和height和标准的盒模型不一致，是指的包含边框在内的宽度和长度
测试代码：
<!DOCTYPE html> <html> <body> <input id="box" type="text"></input> <input type="button" value="按钮"></input> </body> </html>
1，chrome
（1）text
内容区域：169*15px
padding:1px 0
border:2px;
margin:0
所以总宽度是：169+4=173px
总高度是：15+6=21px；
（2）button
内容区：26*15
padding:1px 6px
border :2px
margin:0
所以总宽度是：26+(6+2)*2=42px
总高度是：15+6=21px；
2,firefox
（1）text：149*16px
padding:2px;
border:1px
margin:0
所以总宽度是：149+6=155px
总高度是：16+6=22px；
(2)button:39*16
padding:0 6px
border:3px
margin:0
所以总宽度是：32+18=57px
总高度是：16+6=22px；
3.ie
(1)text:142.16*15.2
padding:2px 1px
border:1px
margin:0
所以总宽度是：142.16+4=146.16px
总高度是：15.2+6=21.2px；
(2)button:26.66*15.2
padding:3px 10px
border:1px
margin:0
所以总宽度是：26.66+22=48.66px
总高度是：15.2+8=23.2px；
html中换行写了input两个input之间才会有空格的，并不是外边距起的作用，但是button上面有文字的时候会把button撑开，各浏览器的表现也不相同
加了一个空格之后，chrome内容区域加了4px，ie加了6.67px但是firefox宽度没有增加，高度增加了2px...
时间： 2024-08-06 23:12:55