自动在保证金中做什么:0自动？

Question

auto做什么margin:0 auto;？

我似乎无法理解是什么auto.我知道它有时会产生居中对象的效果.谢谢.

Answer 1

当您width在已应用的对象上指定了a 时margin: 0 auto,该对象将集中在其父容器中.

指定auto为第二个参数基本上告诉浏览器自动确定左边距和右边距本身,它通过设置它们来做同样的事情.它保证左右边距将设置为相同的大小.第一个参数0表示顶部和底部边距都将设置为0.

margin-top:0;
margin-bottom:0;
margin-left:auto;
margin-right:auto;

因此,举个例子,如果父级是100px且子级是50px,那么该auto属性将确定在margin-left和之间共享50px的可用空间margin-right:

var freeSpace = 100 - 50;
var equalShare = freeSpace / 2;

哪个会给:

margin-left:25;
margin-right:25;

看看这个jsFiddle.您不必指定父宽度,只需指定子对象的宽度.

Answer 2

auto:浏览器设置边距.结果取决于浏览器

margin:0 auto指定

* top and bottom margins are 0
* right and left margins are auto

Answer 3

从CSS规范中计算正常流程中块级,非替换元素的宽度和边距:

如果'margin-left'和'margin-right'都是'auto',则它们的使用值相等.这使元件相对于容纳块的边缘水平居中.

Answer 4

margin:0 auto;

0用于上下和auto左右。这意味着左右边距将根据元素的宽度和容器的宽度自动设置边距。

通常，如果您想将任何元素放在中心位置，那么margin:auto效果很好。但它只适用于块元素。

Answer 5

通过对这两个值如何工作的一些解释，它会变得更加清晰。

margin 属性是以下形式的简写：

margin-top
margin-right
margin-bottom
margin-left

那么为什么只有两个值呢？

好吧，您可以用四个值来表示边距，如下所示：

margin: 10px, 20px, 15px, 5px;

这意味着顶部 10 像素，右侧 20 像素，底部 15 像素，左侧 5 像素

同样，您也可以用两个值来表示，如下所示：

margin: 20px 10px;

这将为您提供顶部和底部 20 像素的边距以及左侧和右侧 10 像素的边距。

如果你设置：

margin: 20px auto;

那么这意味着顶部和底部边距为 20px，左右边距为 auto。auto 表示左/右边距根据容器自动设置。如果您的元素是块类型元素，这意味着它是一个框并占据视图的整个宽度，则 auto 将左右边距设置为相同，因此元素居中。