AtoZ CSS快速提示：如何使用CSS自动值

Buying a SitePoint Premium membership will give you access to the full AtoZ: CSS series.

购买SitePoint Premium会员资格将使您可以访问完整的AtoZ：CSS系列 。

Loading the player…

正在加载播放器…

Welcome to our AtoZ CSS series! In this series I’ll be exploring different CSS values (and properties) beginning with a letter from the alphabet. In this article I’ve added a new quick tip/lesson about the auto property for you.

欢迎来到我们的AtoZ CSS系列！ 在本系列中，我将探索不同CSS值(和属性)，以字母中的一个字母开头。 在本文中，我为您添加了有关auto属性的新的快速提示/课程。

A代表auto (A is for auto)

The auto CSS value is very useful in automatically adjusting your content to fit within your webpage. There is a multitude of uses for the value – you can use it to contain overflow content, as an alternative to clearfix, keeping images in proportion or even centering the content in the page. I’ll teach you through how to do this with these three easy tips.

auto CSS值对于自动调整内容以适合您的网页非常有用。 该值有多种用途-您可以使用它来包含溢出内容，以作为clearfix的替代方法，以使图像成比例，甚至使内容在页面中居中。 我将通过这三个简单的技巧教您如何做到这一点。

秘诀1 (Tip 1)

The auto value is really useful when it is possible that content may flow outside of its containing element. Setting overflow: auto will add a scroll bar when required to keep the content within the containing element.

当内容有可能超出其包含元素的范围时， auto值非常有用。 设置overflow: auto如果需要将内容保留在包含元素中，则overflow: auto将添加滚动条。

.content-box {
  width: 300px;
  height: 300px;
  border: 1px solid #cc3f85;
  overflow: auto;
}

See the Pen CSS A to Z: A — Overflow Tip 1 by SitePoint (@SitePoint) on CodePen.

请参见Pen CSS A到Z：A — CodePen上SitePoint ( @SitePoint )的溢出提示1 。

Test the above CodePen snippet by removing the overflow property and watch what happens to the content that does not fit into the containing box.

通过删除overflow属性来测试上面的CodePen代码段，并观察包含在容纳框中的内容发生了什么。

秘诀2 (Tip 2)

overflow: auto can also be used as an alternative to clearfix. This creates a new block formatting context which contains the floats and prevents container collapse. In some cases this may be a better alternative to using overflow: hidden.

overflow: auto也可以将overflow: auto用作clearfix的替代方法。 这将创建一个新的块格式化上下文 ，其中包含浮点数并防止容器崩溃。 在某些情况下，这可能是使用overflow: hidden的更好选择。

.container {
  width: 600px;
  border: 4px solid #9be22d;
  overflow: auto;
}

.blue-box {
  float: left;
  width: 200px;
  height: 200px;
  background-color: #66d9ef;
}

.pink-box {
  float: right;
  width: 200px;
  height: 200px;
  background-color: #cc3f85;
}

See the Pen CSS A to Z: A — Overflow Tip 2 by SitePoint (@SitePoint) on CodePen.

请参见Pen CSS从A到Z：A — CodePen上SitePoint ( @SitePoint )的溢出提示2 。

Test the above CodePen snippet by removing the overflow property and watch how the containing element collapses.

通过删除overflow属性来测试上述CodePen代码段，并观察包含元素如何折叠。

秘诀3 (Tip 3)

The auto value can also be used to keep images in proportion.

auto值也可以用于保持图像成比例。

If you need to resize an original image within a containing element, only explicitly set either the width or height (in relation to the containing element) and set the other element to auto. This will keep the image in proportion and avoid any distortion.

如果需要在包含元素中调整原始图像的大小，请仅显式设置宽度或高度(相对于包含元素)，并将其他元素设置为auto。 这将使图像保持比例并避免任何失真。

.image-holder {
  width: 50%;
  border: 1px solid;
}

img {
  width: 40%;
  height: auto;
}

See the Pen CSS A to Z: A — Overflow Tip 3 by SitePoint (@SitePoint) on CodePen.

请参见Pen CSS从A到Z：A — CodePen上SitePoint ( @SitePoint )的溢出提示3 。

Test the above CodePen snippet by resizing your window and watch how the image stays in proportion.

通过调整窗口大小来测试上述CodePen代码段 ，并观察图像如何保持比例。

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