6

我经常使用 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; 以便它影响所有元素并且跨浏览器友好？

4

2 回答 2

16

到目前为止，我看到的让 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) 插入到样式表的最顶部，并且在 normalize 之后使用此规则，那么一切都应该按预期工作。

上面的规则允许更轻松地控制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/

于 2015-04-13T13:04:30.470 回答
2

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

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

于 2016-01-26T13:49:05.103 回答