CSS box-sizing对padding的影响

在去除一个网页“字符组合生成器”对Bootstrap的依赖时，遇到了一个问题，input、textarea的样式是一样的，但是是padding属性的表现不一致，经过一段时间的排查，终于找到原因，原来是box-sizing属性不一致导致的。5U6无知

5U6无知

参考：CSS3 box-sizing 属性5U6无知

5U6无知

我们来看看同样的样式，显示的效果。5U6无知

样式，关键的是：padding: 7px 7px;5U6无知

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

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时：输入框的高度变了5U6无知

5U6无知

当box-sizing: border-box;时：在padding不大于高度的时候，输入框的高度不会改变，当大于的时候才会改变；我这里主要是高度对效果的影响比较大，宽度也是一样的。5U6无知

5U6无知

解决问题的CSS：5U6无知

1 2 3 4 5

* {     -webkit-box-sizing: border-box;     -moz-box-sizing: border-box;     box-sizing: border-box; }

星号是个通配符，这样就将所有HTML元素的 box-sizing 设置为 border-box，在设置 padding 属性时，就可以尽量减小对宽度高度的影响。5U6无知

本文由 微wx笑 创作，采用 署名-非商业性使用-相同方式共享 4.0 许可协议，转载请附上原文出处链接及本声明。
原文链接：https://www.ivu4e.cn/blog/web/2019-08-01/79.html

很赞哦！ (14) 赏 有话说 (0)