Question

我经常使用盒子大小：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/或http://www.paulirish.com/2012/box-sizing-border-box-ftw/

Answer 2

我创建了Initialize.css，这是一组最佳实践，例如normalize，HTML5样板和＆＃34; box-sizing＆＃34;特技。它可以配置SASS或LESS（还有CSS版本）。你不会从CSS覆盖开始，这太棒了！： - ）

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

Answer 3

你真的需要重置css吗？

我通常在每个css文件的开头使用它：

* {
   border: 0;
   margin: 0;
   padding: 0;
   outline: 0;
}

试试这个。

你如何添加盒子大小：border-box＆＃39;到Normalize.css文件？

3 个答案: