AtoZ CSS截屏视频：AutoCSS价值

Loading the player…

正在加载播放器…

This screencast is a part of our AtoZ CSS Series. View the entire series here.

该截屏视频是我们的AtoZ CSS系列的一部分。 在这里查看整个系列。

成绩单 (Transcript)

Auto is a CSS value that has a number of uses.

Auto是具有多种用途CSS值。

It’s the default value for a lot of box-model properties like width, height, margin, and background-size.

这是许多box-model属性(例如width ， height ， margin和background-size的默认值。

.box {
  width: auto;
  height: auto;
  margin: auto;
  background-size: auto auto;
}

It’s also the default value for position properties like top and bottom, left and right and z-index.

这也是位置属性(例如top和bottom ， left和right以及z-index的默认值。

.box {
  position: relative|absolute|fixed;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  z-index: auto;
}

There’s other more obscure places that auto can be used as well, like overflow, cursor, table-layout and the column-width property of CSS columns.

还可以使用auto的其他较晦涩的地方，例如CSS列的overflow ， cursor ， table-layout和column-width属性。

.box {
  overflow: auto;
  cursor: auto;
  table-layout: auto;
  column-width: auto;
}

Broadly speaking, the value of auto is automatically computed by the user-agent and the specific effect depends on the content and context that it’s used in.

广义上讲，auto的值由用户代理自动计算，其具体效果取决于所使用的内容和上下文。

Let’s look at an example…

让我们看一个例子……

.box {
  width: auto;
  height: auto;
}

宽/高 (Width / Height)

With the default value of auto applied to the width and height of a <div> containing some dummy text, the dimensions of the box are automatically calculated and the box fills the width of the page and is as high as necessary to contain all the content.

将auto的默认值应用于包含一些伪文本的<div>的宽度和高度时，将自动计算框的尺寸，并且该框将填充页面的宽度，并且高度足以容纳所有内容。

It’s worth noting that width and height auto do not need to be declared but have been added here to illustrate the point.

值得注意的是，不需要声明width和height auto ，而是在此处添加了它来说明这一点。

Under these circumstances, when the window is resized, the available width for the <div> is reduced and its dimensions are automatically re-calculated to accommodate the content.

在这种情况下，调整窗口大小时， <div>的可用宽度会减小，并且其尺寸会自动重新计算以适应内容。

This is the default behaviour of any block level element and we’ll take a closer look at this in “Episode 4: display“.

这是任何块级元素的默认行为，我们将在“第4集： display ”中进行仔细研究。

保证金 (Margin)

While auto is the default value in many cases, sometimes we want to use it specifically to achieve a certain effect.

尽管auto在许多情况下是默认值，但有时我们还是要专门使用它来达到一定的效果。

A very common design pattern on the web is to center a block of content, and often the whole website above a certain width. This can be achieved by setting a max-width on a wrapper element and setting margin:auto on the left and right hand side.

网络上一种非常常见的设计模式是将内容块居中放置，并且通常将整个网站放置在一定宽度上。 这可以通过在包装元素上设置max-width并在左侧和右侧设置margin:auto来实现。

When we use margin-left:auto, the browser adds as much margin to the left hand side as there is space for – and the box moves to the right until its right-most edge aligns with its containing element. When we do the same on the right hand side, the same happens in the opposite direction and the box moves as far back to the left as it can go.

当我们使用margin-left:auto ，浏览器会在左侧留出尽可能多的空白，以留出足够的空间-并且该框将向右移动，直到其最右侧的边缘与其包含的元素对齐。 当我们在右侧执行相同操作时，相同的操作会在相反的方向发生，并且框会尽可能地向左移动。

.box {
  max-width: 50%;
  margin: 0 auto;
}

Because there are now equal margins on each side, the box remains centered on the page.

因为现在两侧的边距相等，所以该框保持在页面中心。

It’s a shame this trick doesn’t work with vertical centering but we’ll be tackling this in a later video.

遗憾的是，此技巧不适用于垂直居中，但我们将在以后的视频中解决。

宽度100％ (Width 100%)

A <div> with width:auto expands to full the width of its parent, but there’s and important distinction between width:auto and width:100%.

具有width:auto <div>会扩展到其父级的全部宽度，但是width:auto和width:100%之间存在重要的区别。

If we have a <div> with width and height auto and some padding on the inside, the width is automatically calculated and takes the padding into account.

如果我们有一个<div> ，其宽度和高度为auto且内部有一些填充，则将自动计算宽度并将其考虑在内。

If we change width:auto to width:100% the box breaks out of it’s container and everything looks broken. This is because width:100% sets the width of our <div> to 100% of the width of it’s parent – and then the padding is added additionally.

如果我们将width:auto更改为width:100%则盒子会从容器中破裂，一切看起来都破裂了。 这是因为width:100%将<div>的宽度设置为其父级宽度的100％–然后再添加填充。

This makes the width of our <div> 100% + 50px + 50px which is wider than the viewport.

这使<div>宽度比视口更宽100％+ 50px + 50px。

A workaround is to either use auto or the box-sizing: border-box model where padding and border are added within the width of the box. The next episode is all about the CSS Box Model so be sure to check that out for more info. Sometimes using box-sizing isn’t an option, so this is a handy tool to have in the box.

一种解决方法是使用auto或box-sizing: border-box模型，其中在框的宽度内添加填充和边框。 下一集是关于CSS Box Model的，因此请务必查看更多信息。 有时无法选择使用box-sizing ，因此这是一个方便的工具。

位置 (Position)

Another place where auto can come to the rescue is when using CSS positioning.

在使用CSS定位时，汽车可以拯救的另一个地方。

Imagine a situation with an element positioned in the top left corner of a box. Let’s say that at a certain width, we want the same element to be in the bottom right corner instead.

想象一下一种情况，将元素放置在框的左上角。 假设在某个宽度处，我们希望同一元素位于右下角。

I’ve changed the background color to show that the media query does get fired, but it seems that setting bottom or right:0 will have no effect.

我已经更改了背景色以显示媒体查询确实被触发，但是似乎设置bottom或right:0无效。

This is because top and left take precedence over bottom and right.

这是因为top和left优先于bottom和right 。

To make this work, we first have to remove the effect of top and left by setting them to auto.

为了使这项工作有效，我们首先必须通过将top和left设置为auto来消除它们的影响。

.box {
  position: absolute;
  left: auto;
  right: 0;
}

Now everything works as expected.

现在一切都按预期进行。

Watch out for our Quick Tip article coming soon!

请留意即将发布的“快速提示”文章！

翻译自: https://www.sitepoint.com/atoz-css-screencast-auto/