Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/39.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Css 有人能想出这两种编写相同代码的方法会导致问题的原因吗?(非常快)_Css_Margin - Fatal编程技术网

Css 有人能想出这两种编写相同代码的方法会导致问题的原因吗?(非常快)

Css 有人能想出这两种编写相同代码的方法会导致问题的原因吗?(非常快),css,margin,Css,Margin,我正在制作一个名为“fullWidthContainer”的容器,将我所有的文章和垃圾放在里面。 它需要与顶部页眉和底部页脚隔开,所以我给了它顶部和底部40px的边距 HTML代码: <div id="fullWidthContainer class="cAlign"> ... </div> 这会导致内部的所有内容无法在中心对齐。所有东西都被顶起并向左对齐 如果我以这种方式键入上述CSS代码….: div#fullWidthContainer { margin-

我正在制作一个名为“fullWidthContainer”的容器,将我所有的文章和垃圾放在里面。 它需要与顶部页眉和底部页脚隔开,所以我给了它顶部和底部40px的边距

HTML代码:

<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; }