个人中心
gpt4 book ai didi

php - CSS - 覆盖 CSS 重置

转载 作者：太空宇宙 更新时间：2023-11-03 21:45:52 26 4
gpt4 key购买 nike

问题:margin: 0 auto对 body 不起作用。 background-color: #EEEEEE另一方面，即使它们在同一个街区，也能正常工作。

索引.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>

重置.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文件并替换了 #container通过 body

3) 为了测试场景，因为 border: 0在 reset.css 上宣布，我试图创建一个 table在 index.php包含 2 行。 border: 1在 reset.css 上宣布在table标签。边框没有显示。

最佳答案

你的方法是错误的，你试图水平居中 body 元素，它的默认 width 为 100% 所以即使你想要水平居中 body 你不能，因为它在 width 中是 100% 并且实际上设计师从来不会 center body 标签..所以如果你想，在 body 元素中嵌套一个容器 div，分配一些固定的 width 和而不是使用 margin: 0 auto;。所以像这样改变你的 DOM

<body>
   <div id="container">
   </div>
</body>

#container {
   width: 1000px;
   margin: 0 auto;
}

此外，如果您希望将 background 应用于整个视口(viewport)，而不是将 background 属性保留在 body 元素上，如果您想要background 仅用于水平居中的元素，而不是在 #container

中移动 background 属性

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

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

但有些人更喜欢 CSS Reset Stylesheets，它可以将跨浏览器的差异降至最低。因此您可以选择任何选项。

最后但并非最不重要的是，您正在谈论重写，使用 Reset 样式表，这些样式表始终使用最小特异性选择器，使用 class 或 id 将使您的选择器无论如何都比重置样式表中使用的选择器具体，所以除非需要，否则不要使用 !important 除非你最终会陷入困惑，最好使用特定的选择器。 p>

关于php - CSS - 覆盖 CSS 重置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20674960/

26 4 0
文章推荐： Python if/else 语句混淆
文章推荐： .net - System::Drawing::Bitmap 到 cv::Mat (OpenCV c++/cli)
文章推荐： c# - 如何将给定数组中的数字随机返回到标签中
文章推荐： python - 使用 pandas 解析文件时 Airflow Worker 不理解文件编码
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com