CSS -覆盖CSS重置
问题：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的index.php并用body替换#container
3)为了测试这个场景，因为border: 0是在reset.css上声明的，所以我尝试在包含2行的index.php上创建一个table。border: 1在reset.css上在table标记中声明。边界没有出现。
回答 2
Stack Overflow用户
发布于 2013-12-19 06:41:58
您的方法是错误的，您正在尝试水平居中的body元素，该元素具有默认的width of 100%，因此即使您想要水平地对body进行居中，您也不能这样做，因为它是width中的100%，而实际上设计人员从来没有center body标记。因此，如果需要，将容器div嵌套到body元素中，分配一些固定的width，而不是使用margin: 0 auto;。所以改变你的DOM
<body>
<div id="container">
</div>
</body>
#container {
width: 1000px;
margin: 0 auto;
}此外，如果您希望将background应用于整个视口，而不是将background属性留在body元素上，则如果您希望只对水平居中的元素使用background，而不是在#container中移动background属性
此外，CSS重置与此无关，CSS重置用于重置浏览器样式表所应用的默认样式，一些人更喜欢使用通用*选择器来重置margin和padding，而有些则重置outline，例如
* {
margin: 0;
padding: 0;
outline: 0;
}但是有些人更喜欢CSS重置样式表，它将跨浏览器之间的差异最小化到最小。所以你可以选择任何选择。
最后但并非最不重要的是，使用重置样式表，这些样式表总是使用最小的特异性选择器，使用class或id将使选择器比重置样式表中使用的选择器更具体，所以除非需要，否则不要使用!important，除非您最终会陷入混乱，最好使用特定的选择器。
Stack Overflow用户
发布于 2013-12-19 06:42:38
使用！在css/bodyStyleSheet.css StyleSheet.css中很重要
比如
#container {
margin: 0 auto;
background-color: #EEEEEE !important;
}关于粉碎杂志的好文章
http://coding.smashingmagazine.com/2010/11/02/the-important-css-declaration-how-and-when-to-use-it/
https://stackoverflow.com/questions/20674960
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号