码迷,mamicode.com
首页 > Web开发 > 详细

(转)CSS3全局实现所有元素的内边距和边框不增加

时间:2017-03-19 13:07:14      阅读:342      评论:0      收藏:0      [点我收藏+]

标签:after   content   pre   href   before   应用   设置   覆盖   question   

全局设置 border-box 很好,首先它符合直觉,其次它可以省去一次又一次的加加减减

它还有一个关键作用——让有边框的盒子正常使用百分比宽度。但是使用了 border-box 可能会与一些依赖默认 box-sizing 的库冲突

不过这种问题大多数时候可以通过把交由这些库处理的块的 box-sizing 设置回 content-box 来解决。

推荐写法是
1 html {
2   box-sizing: border-box;
3 }
4 *, *:before, *:after {
5   box-sizing: inherit;
6 }
选择器 * 无法覆盖到伪元素,所以需要给 :before 和 :after 分别设置。而通过继承的方式应用到所有元素,需要时可以方便的设置某个元素及其后代元素的 box-sizing 回 content-box。

外文资料链接:css-tricks

转载地址:box-sizing: border-box 把所有元素的内边距和边框不再会增加它的宽度,这样写好吗?

(转)CSS3全局实现所有元素的内边距和边框不增加

标签:after   content   pre   href   before   应用   设置   覆盖   question   

原文地址:http://www.cnblogs.com/WhiteM/p/6579687.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!