标签：box sizing button 高度 input border css

在写html表单的时候，发现了一个问题：input和button设置了一样的宽高，但是显示高度确不一致，先看代码：

1 <style>
2 input,button{
3     width:100px;
4         height: 60px;
5 }
6 </style>
7 <input type="text" value="测试"/>
8 <input type="button" value="按钮"/>
9 <button>按钮</button>

在谷歌浏览器中显示如下：

很明显的看出高度不一样。这是由于button在高度计算上始终使用了Quirks模式。在Quirks模式下，边框的计算是在元素的宽度内的，而不像标准模式一样计算在外部（button的高度包含边框的高度，而文本框text则不包含边框高度。），所以需要加2行代码-webkit-box-sizing:border-box;-moz-box-sizing:boder-box;如下：

1 <style>
2 input,button{
3     -webkit-box-sizing:border-box;
4         -moz-box-sizing:boder-box;
5         width:100px;
6         height: 60px;
7 }
8 </style>

熊猫办公https://www.wode007.com/sites/73654.html

现在高度就一致了：

box-sizing:border-box说明;

当我们设置box-sizing: border-box;时，border和padding则是被包含在宽高之内的。内容的宽和高可以通过定义的“width”和 “height”减去相应方向的“padding”和“border”的宽度得到。内容的宽和高必须保证不能为负，必要时将自动增大该元素border box的尺寸以使其内容的宽或高最小为0。  

备注：除了上面方式外，我们还可以通过设置border:0;padding:0；或者根据Quirks模式的区别，设置不同的height值，同样可以达到高度一致的效果

标签：box,sizing,button,高度,input,border,css
来源： https://www.cnblogs.com/ypppt/p/13143825.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。