具有最高保证金的CSS保证金自动中心 - 有效？

Question

这个有效的CSS是否使div居中并且还应用了上边距？

div {
     margin: 0 auto;
     margin-top: 30px;
     }

Answer 1

使用以下内容指定边距：

div { margin: 30px auto 0; }

这是简写：

div { margin : 30px auto 0 auto; } /* margin: [top] [right] [bottom] [left]; */

这是简写：

div {
    margin-top: 30px;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
}

现在你知道可以指定margin和/或padding的不同方式了;选择是你的。

就优先级而言，后一个定义将适用;如the spec中所定义。

  

要查找元素/属性组合的值，用户代理必须应用以下排序顺序：

     

  
1. 查找适用于目标媒体类型的相关元素和属性的所有声明。如果关联的选择器与相关元素匹配，则声明适用。
  
2. 声明的主要类型是按权重和来源：对于正常声明，作者样式表覆盖覆盖默认样式表的用户样式表。对于“！important”声明，用户样式表会覆盖覆盖默认样式表的作者样式表。 “！important”声明覆盖正常声明。导入的样式表与导入它的样式表具有相同的原点。
  
3. 次要排序是选择器的特异性：更具体的选择器将覆盖更一般的选择器。伪元素和伪类分别计为普通元素和类。
  
4. 最后，按指定顺序排序：如果两个规则具有相同的权重，来源和特异性，则后者指定获胜。导入样式表中的规则被认为是在样式表本身中的任何规则之前。
        

除了个别声明的“！important”设置外，此策略还为作者的样式表提供了比阅读器更高的权重。因此，用户代理必须使用户能够关闭某个样式表的影响，例如通过下拉菜单。

正如其他人所说，您可能需要指定固定宽度才能看到div居中...

Answer 2

是的，但是关于div的居中问题，您还需要将width应用于它。

Answer 3

是。他们是对的：

div { width: 90%; margin : 30px auto 0 auto; }

我通常使用90％的宽度作为一个很好的起点。

Answer 4

我不明白为什么不...你也可以将其缩短为：

div {margin: 30px auto 0;}

Answer 5

是的，因为保证金：0自动将顶部和底部设置为0并且左右设置为自动，因此将顶部设置为30px与说边距相同：30px auto 0 auto;

Answer 6

这是有效的，但它可以更短：

div {margin: 30px auto 0;}

当您只提供三个值时，中间值将应用于左侧和右侧。

Answer 7

是的，这是有效的。 margin-top将覆盖margin规则。

虽然您可能想要添加width以使其居中。