如何将“box-sizing:border-box”添加到 Normalize.css 文件？答案

【问题标题】：How do you add 'box-sizing: border-box' to Normalize.css file?如何将“box-sizing:border-box”添加到 Normalize.css 文件？
【发布时间】：2015-06-18 19:03:27
【问题描述】：

我经常使用 box-sizing:border-box;创建 CSS 文件时在所有元素上，即

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

但是我似乎无法让它与文件 'Normalize.css' (https://github.com/necolas/normalize.css) 一起使用

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

我非常想使用 normalize.css，因为它不像其他一些 CSS 重置文件那样激烈，但我如何让它接受 box-sizing:border-box;以便它影响所有元素并且跨浏览器友好？

【问题讨论】：

没有理由不应该工作。可以演示吗？

标签： css global reset css-reset

【解决方案1】：

到目前为止，我见过的让 box-sizing 起作用的最佳方法是：

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。

【讨论】：

感谢 Andi，这种格式效果很好，我以后会用它作为一种更简单的方法

【解决方案2】：

我创建了 Initialize.css，它是规范化、HTML5 样板和“box-sizing”技巧等最佳实践的集合。它可以使用 SASS 或 LESS 进行配置（也有 CSS 版本）。您不会从 CSS 覆盖开始，这太棒了！ :-)

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

【讨论】：