【问题标题】: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

有关此技术的更多信息,我建议: https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/http://www.paulirish.com/2012/box-sizing-border-box-ftw/

【讨论】:

  • 感谢 Andi,这种格式效果很好,我以后会用它作为一种更简单的方法
【解决方案2】:

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

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

【讨论】:

    猜你喜欢
    • 2021-12-13
    • 2012-07-21
    • 1970-01-01
    • 2015-10-31
    • 1970-01-01
    • 1970-01-01
    • 2013-09-22
    • 1970-01-01
    • 2020-07-02
    相关资源
    最近更新 更多