CSS box-sizing对padding的影响
微wx笑
2019-08-01【网页网站】
12
0关键字：
CSS
在去除一个网页“字符组合生成器”对Bootstrap的依赖时，遇到了一个问题，input、textarea的样式是一样的，但是是padding属性的表现不一致，经过一段时间的排查，终于找到原因，原来是b
在去除一个网页“字符组合生成器”对Bootstrap的依赖时，遇到了一个问题，input、textarea的样式是一样的，但是是padding属性的表现不一致，经过一段时间的排查，终于找到原因，原来是box-sizing属性不一致导致的。
我们来看看同样的样式，显示的效果。
样式，关键的是：padding: 7px 7px;
input[type="text"] {
font-size: 12px;
color: #000000;
height: 25px;
border: 1px solid #aaa;
margin: auto 5px 5px auto;
}
input[type="search"], input[type="text"], input[type="url"], input[type="email"], textarea {
padding: 7px 7px;
border: 1px solid #ebebeb;
border-radius: 2px;
-webkit-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}当box-sizing: content-box时：输入框的高度变了
当box-sizing: border-box;时：在padding不大于高度的时候，输入框的高度不会改变，当大于的时候才会改变；我这里主要是高度对效果的影响比较大，宽度也是一样的。
解决问题的CSS：
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}星号是个通配符，这样就将所有HTML元素的 box-sizing 设置为 border-box，在设置 padding 属性时，就可以尽量减小对宽度高度的影响。
本文由 微wx笑 创作，采用 署名-非商业性使用-相同方式共享 4.0 许可协议，转载请附上原文出处链接及本声明。
原文链接：https://www.ivu4e.cn/blog/web/2019-08-01/79.html
