网页网站您现在的位置是:首页 > 博客日志 > 网页网站

CSS box-sizing对padding的影响

<a href='mailto:'>微wx笑</a>的头像微wx笑2019-08-01 16:06:55网页网站人已围观关键字:CSS

简介在去除一个网页“字符组合生成器”对Bootstrap的依赖时,遇到了一个问题,input、textarea的样式是一样的,但是是padding属性的表现不一致,经过一段时间的排查,终于找到原因,原来是b

在去除一个网页“字符组合生成器”对Bootstrap的依赖时,遇到了一个问题,input、textarea的样式是一样的,但是是padding属性的表现不一致,经过一段时间的排查,终于找到原因,原来是box-sizing属性不一致导致的。jX9编程技术_踩坑日志_进阶指南 - 无知人生

image.pngjX9编程技术_踩坑日志_进阶指南 - 无知人生

参考:CSS3 box-sizing 属性jX9编程技术_踩坑日志_进阶指南 - 无知人生


jX9编程技术_踩坑日志_进阶指南 - 无知人生

我们来看看同样的样式,显示的效果。jX9编程技术_踩坑日志_进阶指南 - 无知人生

样式,关键的是:padding: 7px 7px;jX9编程技术_踩坑日志_进阶指南 - 无知人生

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时:输入框的高度变了jX9编程技术_踩坑日志_进阶指南 - 无知人生

image.pngjX9编程技术_踩坑日志_进阶指南 - 无知人生

当box-sizing: border-box;时:在padding不大于高度的时候,输入框的高度不会改变,当大于的时候才会改变;我这里主要是高度对效果的影响比较大,宽度也是一样的。jX9编程技术_踩坑日志_进阶指南 - 无知人生

image.pngjX9编程技术_踩坑日志_进阶指南 - 无知人生

解决问题的CSS:jX9编程技术_踩坑日志_进阶指南 - 无知人生

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

星号是个通配符,这样就将所有HTML元素的 box-sizing 设置为 border-box,在设置 padding 属性时,就可以尽量减小对宽度高度的影响。jX9编程技术_踩坑日志_进阶指南 - 无知人生

本文由 微wx笑 创作,采用 CC BY-NC 4.0 许可协议。 非商业性使用可自由转载、引用、甚至修改,但需署名作者且注明出处。

很赞哦! () 有话说 ()

相关文章

站点信息

  • 建站时间:2018-10-24
  • 服务期限阿里云ECS 2027年到期
  • 主题模板:基于《今夕何夕》修改
  • 文章统计:210篇
  • 文章评论:15条
  • 文章阅读:2818次
  • 文章点赞:1026次
  • 微信公众号:扫描二维码,关注我们
  • 二维码-微信公众号-微wx笑