AtoZ CSS截屏视频：AutoCSS价值

青旅半醒 2022-12-03 01:51 179阅读 0赞

Loading the player…

正在加载播放器…

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

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

## 成绩单 **(**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/][https_www.sitepoint.com_atoz-css-screencast-auto]

[here]: https://www.sitepoint.com/tag/atoz-css/
[https_www.sitepoint.com_atoz-css-screencast-auto]: https://www.sitepoint.com/atoz-css-screencast-auto/