如何将 'box-sizing: border-box' 添加到 Normalize.css 文件？

Question

我经常使用 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 本身中，但没有成功

我非常想使用 normalize.css，因为它不像其他一些 CSS 重置文件那么激烈，但我如何让它接受 box-sizing: 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/ or http://www.paulirish.com/2012/box-sizing-border-box-ftw/

Answer 2

我创建了 Initialize.css，这是一组最佳实践，例如规范化、HTML5 样板文件和 "box-sizing" 技巧。它可以配置为 SASS 或 LESS（也有 CSS 版本）。您不需要从 CSS 覆盖开始，这太棒了！ :-)

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

如何将 'box-sizing: border-box' 添加到 Normalize.css 文件？

How do you add 'box-sizing: border-box' to Normalize.css file?

css

global

css-reset

reset