Css 有人能想出这两种编写相同代码的方法会导致问题的原因吗?(非常快)
我正在制作一个名为“fullWidthContainer”的容器,将我所有的文章和垃圾放在里面。 它需要与顶部页眉和底部页脚隔开,所以我给了它顶部和底部40px的边距 HTML代码:Css 有人能想出这两种编写相同代码的方法会导致问题的原因吗?(非常快),css,margin,Css,Margin,我正在制作一个名为“fullWidthContainer”的容器,将我所有的文章和垃圾放在里面。 它需要与顶部页眉和底部页脚隔开,所以我给了它顶部和底部40px的边距 HTML代码: <div id="fullWidthContainer class="cAlign"> ... </div> 这会导致内部的所有内容无法在中心对齐。所有东西都被顶起并向左对齐 如果我以这种方式键入上述CSS代码….: div#fullWidthContainer { margin-
<div id="fullWidthContainer class="cAlign">
...
</div>
这会导致内部的所有内容无法在中心对齐。所有东西都被顶起并向左对齐
如果我以这种方式键入上述CSS代码….:
div#fullWidthContainer
{
margin-top: 40px;
margin-bottom: 40px;
}
.cAlign { width: 960px; margin: 0, auto; }
那么它工作得很好。为什么会这样?这不是同样的意思吗?我觉得这很容易让我错过 div#fullWidthContainer
的值高于.cAlign
,因此它会覆盖它
因此,在第一个示例中,来自.cAlign
的margin:0 auto
被div#fullWidthContainer
中的margin:40px 0 40px 0
覆盖
第二个示例没有在div#fullWidthContainer
中设置左右边距,因此.cAlign
中的auto
值不会被覆盖
如前所述,代码中有一些拼写错误
margin:0,auto
应该是margin:0 auto
(不带逗号),并且div#fullWidthContainer
的值高于.cAlign
,因此它会覆盖它
因此,在第一个示例中,来自.cAlign
的margin:0 auto
被div#fullWidthContainer
中的margin:40px 0 40px 0
覆盖
第二个示例没有在div#fullWidthContainer
中设置左右边距,因此.cAlign
中的auto
值不会被覆盖
如前所述,代码中有一些拼写错误margin:0,auto
应该是margin:0 auto
(不带逗号)和我想这是因为你的左边距和右边距一开始就不是0。在第一个代码中,将它们设置为0px。在第二个例子中,你不能碰它们。我想这是因为你的左边距和右边距一开始就不是0。在第一个代码中,将它们设置为0px。在第二种情况下,您不会触摸它们。不,这两种更改都不会产生“意思相同”的CSS
在div#fullWidthContainer
的情况下,第一个代码样本将margin left
和margin right
设置为0,而第二个代码样本使其不受影响
在.cAlign
的情况下,第一个代码示例将页边距顶部
和页边距底部
设置为0,将页边距左侧
和页边距右侧
设置为自动
,而第二个代码示例包含语法错误(逗号不属于),理论上不应执行任何操作(虽然在实践中,我可以理解浏览器将0,
解析为0
并让它滑动)
然后,由于这两个选择器都应用于所讨论的div,因此优先级开始发挥作用。div#fullWidthContainer
比更具体。cAlign
因为它选择了一个ID,所以在第一种情况下,左边距
和右边距
来自div的值#fullWidthContainer
覆盖了中的值ode>.cAlign
,因此您得到的边距是0,而不是auto
不,这些更改都不会导致CSS“意思相同”
在div#fullWidthContainer
的情况下,第一个代码样本将margin left
和margin right
设置为0,而第二个代码样本使其不受影响
在.cAlign
的情况下,第一个代码示例将页边距顶部
和页边距底部
设置为0,将页边距左侧
和页边距右侧
设置为自动
,而第二个代码示例包含语法错误(逗号不属于),理论上不应执行任何操作(虽然在实践中,我可以理解浏览器将0,
解析为0
并让它滑动)
然后,由于这两个选择器都应用于所讨论的div,因此优先级开始发挥作用。div#fullWidthContainer
比更具体。cAlign
因为它选择了一个ID,所以在第一种情况下,左边距
和右边距
来自div的值#fullWidthContainer
覆盖了中的值ode>.cAlign
,所以你的页边空白是0,而不是auto
你的HTML和CSS中有拼写错误。也许你应该先更正这些错误。对于拼写错误,我很抱歉,我在这个网站的编辑器中重新编写了这些错误,没有复制和粘贴。但是实际代码中没有拼写错误。啊!感谢大家的帮助。正如下面的答案所说,我很抱歉由于没有注意到ID>Class的“等级”或特殊性,因此被忽略。这和0!=Auto:)你的HTML和CSS中有拼写错误。也许你应该先更正这些错误。很抱歉,我在这个网站的编辑器中重写了这些错误,没有复制和粘贴。但是实际代码中没有拼写错误。啊!感谢大家的帮助。正如下面的回答所说,我没有注意到“排名”的错误或者作为ID>Class.That和0!=Auto:)哦,我认为这是有道理的。它们在碰撞。出于某种原因,我认为0左/右边距与自动边距相同。失误。。谢谢你的帮助没问题。我总是假设代码中的任何语法错误都不会出现在您正在处理的实际代码中,因为您的HTML和CSS有很多缺少的标记、引号等。哦,我认为这是有道理的。它们在碰撞。出于某种原因,我认为0左/右边距与自动边距相同。失误。。谢谢你的帮助没问题。我总是假设代码中的任何语法错误都不会出现在您正在处理的实际代码中,因为您的HTML和CSS有很多缺少的标记、引号等。谢谢您的帮助!是的,我在电脑里很快就把代码打出来了
div#fullWidthContainer
{
margin-top: 40px;
margin-bottom: 40px;
}
.cAlign { width: 960px; margin: 0, auto; }