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

Question

我经常使用盒子大小:边框盒子; 在创建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 /箱上浆边界箱FTW /