如何将'box-sizing: border-box'添加到规范化.css文件中？

Question

>我在创建CSS文件时在所有元素上经常使用box-size：border-box，即

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

但是，我似乎无法将其与文件"规范化.css"（https://github.com/necolas/normalize.css）一起使用

我

尝试将上述代码添加到我自己的CSS文件的顶部，在规范化本身中，但没有成功

我非常想利用规范化.css因为它不像其他一些 CSS 重置文件那样激烈，但是我如何让它接受框大小：border-box; 以便它影响所有元素并且对跨浏览器友好？

Answer 1

到目前为止，我看到的使盒子大小调整工作的最好方法是：

html {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
    *,
    *::before,
    *::after {
        -webkit-box-sizing: inherit;
           -moz-box-sizing: inherit;
                box-sizing: inherit;
    }

如果你的CSS重置（normalize.css）入到样式表的最顶部，在规范化之后使用这个规则，一切都应该按预期工作。

上面的规则允许更轻松地控制第三方小部件等内容的设置box-sizing: content-box。

有关此技术的更多信息，我建议您：https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/或 http://www.paulirish.com/2012/box-sizing-border-box-ftw/

Answer 2

我创建了Initialize.css，这是最佳实践的集合，如规范化，HTML5样板和"盒子大小"技巧。它可以使用SASS或更少（也有CSS版本）进行配置。 你不是从CSS覆盖开始的，这太棒了！:-)

http://jeroenoomsnl.github.io/initialize-css/