Question

问题：margin: 0 auto不适用于身体。另一方面，background-color: #EEEEEE正在工作，即使它们处于同一块。

的index.php：

<html>

    <head>
        <title>MForte</title>
        <link rel="stylesheet" type="text/css" href="css/reset.css">
        <link rel="stylesheet" type="text/css" href="css/bodyStyleSheet.css">
    </head>

    <body id="container">
        <p>test</p>
        <p>test</p>
        <p>test</p>
    </body>

</html>

reset.css：

/**
* Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
* http://cssreset.com
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

bodyStyleSheet.css：

#container {
    margin: 0 auto;
    background-color: #EEEEEE;
}

我尝试过：

1）互相交换<link rel="stylesheet" type="text/css" href="css/reset.css">和<link rel="stylesheet" type="text/css" href="css/bodyStyleSheet.css">。

2）从id文件中删除了body的{{1}}，并将index.php替换为#container

3）为了测试场景，自body上宣布border: 0后，我尝试在reset.css上创建一个包含2行的table。在index.php标记的border: 1上声明了reset.css。边界没有显示。

Answer 1

您的方法有误，您尝试水平居中body元素，其width 100%默认为body，所以即使您希望水平居中100%你不能，因为width中的center实际上设计师从不body div标记..所以如果你愿意，可以在body内嵌套width {1}}元素，指定一些固定的margin: 0 auto;，然后使用<body> <div id="container"> </div> </body> #container { width: 1000px; margin: 0 auto; }。所以改变你的DOM，如

background

另外，如果您希望将background应用于整个视口，而不是将body属性保留在background元素上，如果您只希望水平background居中元素而非移动#container

中的*属性

此外，CSS重置与此无关，CSS重置用于重置浏览器样式表应用的默认样式，有些人更喜欢使用通用margin选择器重置padding和{{1有些人确实重置outline以及

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

但是有些人更喜欢CSS重置样式表，这样可以最大限度地减少浏览器的差异。所以你可以选择任何选项。

最后但并非最不重要的是，您正在讨论覆盖，使用重置样式表，这些样式表始终使用最小特异性选择器，使用class或id将使您的选择器无论如何特定于使用的选择器在重置样式表中，除非有必要，否则请不要使用!important，除非您最终陷入混乱，最好使用特定选择器。

Answer 2

在css / bodyStyleSheet.css中使用！important

，例如

#container {
    margin: 0 auto;
    background-color: #EEEEEE !important;
}

关于Smashing Magazine的好文章

http://coding.smashingmagazine.com/2010/11/02/the-important-css-declaration-how-and-when-to-use-it/

CSS - 覆盖CSS重置

2 个答案: