Get best of the week

有关CSS中的auto关键字的所有信息

CSS具有一个关键字auto，您可以在使用元素的各种属性时使用它。这些是影响元素的位置，高度和宽度的属性。这些属性旨在调整元素的缩进及其其他特征。我渴望在某个地方记录我所知道的一切auto。例如，以材料的形式安排所有内容，可以成为那些对使用此关键字的复杂性感兴趣的人的参考。与各种CSS属性一起使用时

，关键字auto具有特殊含义。我们将分析auto有关将此值应用于各种属性的功能。 首先，在这里，我们将对这项工作的技术细节感兴趣。



auto。我们还将讨论如何充分利用此属性。在这里，您将找到有关用auto例和示例的注释。

宽度属性：自动


块元素的初始宽度（例如<div>或<p>）是value auto。这导致这样的事实，即这些元素占据了包含它们的块的整个水平空间。

根据CSS规范，“包含元素的块的宽度”是通过以下公式计算得出的值：

‘margin-left’ + ‘border-left-width’ + ‘padding-left’ + ‘width’ + ‘padding-right’ + ‘border-right-width’ + ‘margin-right’

当元件的宽度指定的值auto，它可以被配置为使得属性margin，padding，border和它是，因此，不会比它的父元素更大。限制块元素内容的块的宽度将是内容的大小减去由属性margin（字段，缩进），padding（缩进）和border（边框）定义的部分宽度。


宽度比较：自动和宽度：100％

例如，考虑上述布局的设备功能。

这是HTML标记：

<div class="wrapper">
  <div class="item"></div>
</div>

这是CSS：

* {
    box-sizing: border-box;
}

.wrapper {
      max-width: 600px;
      margin: 2rem auto 0;
      padding: 1rem;
}

.item {
      padding: 1rem;
      margin: 0 50px;
      border: 15px solid #1f2e17;
}

在这里，一切看起来都应该正确，内容仅限于父元素。


该元素位于父元素之内，

如果您指定width不应将元素（）的宽度指定为值auto，怎么100%办？通过这种方法，该元素将占据父元素宽度的100％，并在该宽度上添加分配给左右边界的空间。这是合适的样式：

.item {
      width: 100%;
      padding: 1rem;
      margin: 0 50px;
      border: 15px solid #1f2e17;
}

但是将其应用于元素后会发生什么。


所述元件延伸超过所述父元素（文本方向是LTR）。

元素是宽568px。计算公式如下：

‘border-left-width’ + ‘padding-left’ + ‘width’ + ‘padding-right’ + ‘border-right-width’ = 15 + 16 + 506 + 16 + 15 = 568px

如果该属性direction设置为value ltr，则该值margin-right将被完全忽略。在我们的情况下，这正是发生的情况。但是，如果direction记录下来rtl，将被忽略margin-left。


该元素超出了父元素（文本方向为rtl），您可以

在此处尝试示例代码。

width宽度使用案例：自动


为了正确理解其含义auto，没有足够的基础知识故事。因此，我进行了一些研究，旨在展示该物业的实际使用情况width: auto。

页面的移动和桌面版本中元素的不同宽度



移动和桌面应用程序选项

有一组按钮。在应用程序的移动版本中，必须将它们彼此相邻放置（包含按钮的元素应占父元素的50％）。在应用程序的桌面版本中，每个按钮应占据父容器的整个宽度。怎么做？

这是HTML标记：

<div class="group">
    <div class="group__item">
        <button class="c-button">Sign In</button>
    </div>
    <div class="group__item">
        <button class="c-button c-button--ghost">Register</button>
    </div>
</div>

为了将按钮在页面的移动版本中彼此相邻放置，我使用了flexbox布局。这是相关的CSS：

.group {
    display: flex;
}

.group__item {
    width: 50%;
}

在桌面版本中，我需要按钮占据父元素的整个宽度。使用该设计可能会有诱惑width: 100%。真相？但是有一个更好的解决方案：

@media (min-width: 800px) {
    /*    flexbox-    */
    .group {
        display: block;
    }

    .group__item {
        width: auto;
    }
}

由于.group__item这是一个块元素，因此使用width: auto会导致该元素自身完全填充其父元素中可用空间的事实。

这是此示例的工作版本。

高度属性：自动


如果我们考虑使用height设置元素高度的属性，那么一切看起来都会不同。元素高度在应用值auto时对应于元素内容的高度。

考虑以下示例：

<div class="wrapper">
  <div class="item">What's my height?</div>
</div>

为了使具有类的元素.item占据容器的整个高度，可以使用以下方法之一：

  1. 您可以使用.wrapper固定高度的类设置元素，然后向元素style添加.item属性height: 100%。
  2. 您可以为元素使用.wrapperflexbox布局，以便.item默认情况下将子元素拉伸到父元素的大小。

这是CSS：

.wrapper {
    height: 200px;
}

.item {
    height: 100%;
}


父子元素

字段和关键字自动


字段（外边距）最常用于宽度已知的元素的水平居中。

考虑一个例子。


要居中的项目，

蓝色矩形需要水平居中。为此，可以使用以下样式：

.element {
    margin-left: auto;
    margin-right: auto;
}

转向CSS规范：

如果'margin-left'和'margin-right'属性设置为'auto'，则边距的宽度相同。这导致该元件相对于包括它的块的边缘水平对齐。


元素的字段具有相同的宽度，

这是此示例的演示。

margin使用边距：绝对位置元素的自动属性



居中元素

应用该值的另一​​种较不常见的情况auto是使用该结构将绝对定位的元素居中margin: auto。如果某个元素需要在水平和垂直方向上位于父元素内部居中，则似乎需要为此使用translateXor属性translateY。

为了使属性margin: auto允许我们正确对齐元素，必须满足以下条件：

  1. 指定了元素的宽度和高度。
  2. item属性已设置position: absolute。

这是HTML标记：

<div class="wrapper">
  <div class="item">I am centered.</div>
</div>

这是样式代码：

.wrapper {
    position: relative;
}

.item {
    width: 200px;
    height: 100px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

这是此对齐技术的演示。

Flexbox布局和自动字段自定义


在某些情况下，使用自动配置的字段可能会证明是非常有用的技巧。如果子元素的字段的尺寸是使用value设置的auto，它将在父元素中最大程度地移动到与已配置的字段相反的一侧。例如，如果将属性分配给flex元素margin-left: auto，则它将最大程度地向右移动。

让我们看一下下面的布局。父级flexbox元素中有两个矩形子元素。


flexbox容器中的一对元素

我们需要将元素2移到容器的右边界。auto为此，使用属性的值非常有用margin-left：

.wrapper {
    display: flex;
}

.item-2 {
    margin-left: auto;
}

这是应用此样式后发生的事情。


编号为2的元素移到容器的右边缘，

应注意的是，此技术也适用于垂直对齐的元素。在此示例中，应用以下样式的元素＃2：

.item-2 {
    margin-top: auto;
}

这是结果。


2号元素移到容器的下边缘，

此外，如果只有一个子元素，则可以使用属性来水平和垂直对齐margin: auto。假设在容器中只有元素编号1，需要像这样对齐。为此，我们使用以下样式：

.item-1 {
    margin: auto;
}

这足以使元素居中。


项目＃1以容器为中心

▍Flex属性和自动值


开发Flexbox布局时，可以将属性用于子元素flex: auto。这种设计是什么意思？事实是，当子元素具有属性时flex: auto，这等效于为元素分配了flex: 1 1 auto类似于以下构造的样式：

    .item {
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: auto;
    }

以下是MDN说这个：“元素的尺寸是根据它的性质决定width和height，但该元素可以被拉伸，占用了在柔性容器提供额外的可用空间。为了装在容器中，一个元件可以并且被压缩到最小尺寸。这类似于设置样式flex: 1 1 auto。”

换句话说，具有属性的元素的大小flex: auto将根据其宽度和高度来设置。但是，此元素可以拉伸或收缩，具体取决于容器中有多少可用空间。在开始研究本文之前，我对此并不了解。

与往常一样，请考虑一个示例。

这是标记：

<div class="wrapper">
  <div class="item item-1">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
</div>

以下是样式：

.wrapper {
    display: flex;
    flex-wrap: wrap;
}

.item {
    width: 120px;
    height: 500px;
}

.item-1 {
    flex: auto;
}

这就是结果。


使用flex：auto

这是此示例的有效版本。

网格布局和自动值


▍使用自动调整列



使用grid-template-columns：auto 1fr 1fr样式开发网格布局

时，可以auto在设置列时使用该值。这意味着列的宽度将取决于其内容的大小。这是我的意思：

.wrapper {
    display: grid;
    grid-template-columns: auto 1fr 1fr;
}

▍网格布局并使用自动值设置字段


使用网格布局时，该值auto可用于自定义元素字段。这样做是为了获得与auto在Flexbox布局中使用时所获得的结果相似的结果。如果我们正在使用网格布局，并且其中一个网格元素具有例如style margin-left: auto，它将被移动到布局的右侧，并且其宽度将根据其内容的大小进行选择。

考虑以下示例。


网格布局

我们需要元素的宽度Item 1取决于元素的内容，而不是取决于元素可用的网格空间。为此，我们可以使用以下样式：

    .item-1 {
        margin-left: auto;
    }

这是应用此样式的结果。


元素的宽度取决于其内容。

▍RTL布局


值得注意的是，对于LTR布局（对于内容从左到右位于其中的布局），例如对于那些用于显示以英语书写的文本而言，属性的使用margin-left: auto或margin-right: auto显示得很好。但是请注意，在多语言站点上，这些含义是相反的。更好的是，我建议这样做，在此类模型中使用Flexbox属性或Grid属性，以在他们的帮助下可以实现目标的情况下进行。如果无法借助此类属性来实现，请求助于auto仅作为最后的手段来设置边距属性。相反，最好使用CSS的逻辑属性。

溢流特性


使用网页元素时，我们需要了解这些元素能够包含的内容的大小。如果内容超出元素可以包含的内容，则需要显示滚动条才能使用此类内容。

若要解决此问题，您可以尝试使用以下样式：

.element {
    overflow-y: scroll;
}

但是，使用这种方法，即使元素显示的内容大小不超过元素的大小，滚动条也可能会出现。这是一个例子。


为其指定溢出-y：滚动样式的元素

在Windows平台上的Chrome浏览器中，始终显示滚动条。这是一个元素行为异常的示例，可能会使用户感到困惑。

使用代替此值auto可以确保仅在内容的高度超过容器的高度时显示滚动条。

在 MDN上声明了以下内容：“取决于用户代理。如果内容放置在与元素内部空间相对应的元素区域中，则其外观与在模式下显示的内容相同visible但这会创建一个新的块格式化上下文。“如果内容大于项目的大小，则桌面浏览器会显示滚动条。”

定位元素的属性


CSS-属性负责元件的定位，如top，right，bottom和left，该值被保持auto。在撰写本文的过程中，我学到了现在要谈论的内容。

考虑以下布局。


演示版式

有一个带有自定义属性的父元素，该元素padding定义了缩进。这个元素还有另一个元素，一个孩子。子元素是绝对定位的，但是负责配置的其属性未配置。以下是样式：

.wrapper {
    position: relative;
    padding: 16px;
}

.item {
    position: absolute;
    width: 100px;
    height: 100px;
}

事实是，在CSS中，每个属性都有一个特定的初始值（默认值）。如果检查子元素并查看计算的样式，其属性值将是什么left？


检查子项的计算样式，

该属性的默认值为leftthis16px。如果我们什至不问他，那是哪里来的？其原因是，绝对定位元素的属性与其设置了属性的最接近的父元素一致position: relative。父元素具有属性padding: 16px。这会使子级从父级的顶部和左侧开始放置16个像素。有趣吧？

现在，您可能有一个疑问，这对我们有什么用。我建议处理这个问题。

想象一个孩子需要被安置100px在小屏幕上和大屏幕上查看页面时，从父元素的左边框开始，可以将元素放置在应用默认值时的位置。

这是适合小屏幕的样式：

.wrapper {
    position: relative;
}

.item {
    position: absolute;
    left: 100px;
    width: 100px;
    height: 100px;
}

left在大屏幕上查看页面时， 如何重置属性值？此外，left: 0此处的值无法使用，因为这将导致以下事实：子元素被压到父元素的边缘，但是我们不需要它。看一下下面显示的页面布局。他阐明了我的观点。


子元素不能正常工作，

要重置子元素的定位属性，必须使用Constructleft: auto。在MDN上的声明如下：“将元素水平放置，因为如果它是静态元素，则必须将其放置。”

这意味着，在放置元素时，将考虑padding父元素的属性，并确保子元素不会“粘在”父元素的边缘。

这是CSS：

.item {
    position: absolute;
    left: 100px;
    width: 100px;
    height: 100px;
}

@media (min-width: 800px) {
    .item {
        /*  -  left: 16px */
        left: auto;
    }
}

同样适用于财产top。默认情况下设置的right和属性的计算值bottom分别等于元素的宽度和高度。

这是此部分的演示项目。

使用自动值的示例


我必须马上说，这里给出的示例并不能涵盖所有意义的可能性auto，但是我希望我告诉您的内容会派上用场。

▍工具提示箭头


创建工具提示时，它们需要具有指向工具提示所引用对象的箭头。因此，这些技巧更容易理解。如果我们正在开发设计系统，则需要提供不同的提示状态。例如，提示带有指向左侧的箭头和带有指向右侧的箭头。


指向不同方向的方向箭头

.tooltip:before {
    /*   */
    position: absolute;
    left: -15px;
}

/*    ,   */
.tooltip.to-right:before {
    /*   */
    position: absolute;
    left: auto;
    right: -15px;
}

请注意，我使用该属性left: auto覆盖left: -15px了原始实现中的属性。因此，您知道，这种用法很常见。因此，我建议使用以下方法代替上述方法：

.tooltip:before {
    position: absolute;
    right: 100%;
}

.tooltip.to-right:before {
    /*   */
    position: absolute;
    right: auto;
    left: 100%;
}

使用一个值100%，我们避免使用一个硬设置的值（箭头宽度），如果箭头的大小发生变化，则可能导致系统故障。该解决方案更适合将来可能发生的变化。

▍组件卡


也许您的项目有一个组件卡，在组件卡的左上角是某种图标。它可以起到装饰作用，也可以是执行动作的按钮。无论图标的作用如何，都需要对组件进行设计，以便可以将图标放置在其左上角和右上角。这是它的外观。


带有位于不同角度的图标的组件卡

使用属性，left: auto您可以轻松重置其基本实现中指定的属性的值。这是CSS：

.card .icon {
    position: absolute;
    left: 15px;
    top: 15px;
}

.card.is-right .icon {
    left: auto;
    right: 15px;
}

▍Flexbox布局和自动边距属性值


Flexbox布局为Web开发人员提供了真正无限的可能性。通过将此类布局的功能与字段（其值用于配置它们）相结合auto，我们可以创建功能非常强大的布局。

考虑以下示例。


自动调整元素字段

右侧有一个垂直容器，其中包含元素标题，其描述和按钮。我们需要将按钮附加到容器的右侧。

这是标记：

<div class="item">
    <div class="item-group">
        <!--    -->
    </div>
    <button class="item__action">Confirm</button>
</div>

以下是样式：

    .item {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .item__action {
        margin-left: auto;
    }

做完了！使用该属性margin-left: auto可以将按钮放置在元素的右上角。更好的是，如果我们正在开发多语言站点，则可以使用逻辑CSS属性。CSS将如下所示：

.item__action {
    margin-inline-start: auto;
}

如果您想了解有关RTL样式的更多信息，这里是专用于此主题的有用资源。

▍网格布局和自动边距值


通过调整Grid元素的字段，可以设置固定值和百分比值，还可以使用value auto。我对这个意思特别感兴趣auto。看一下下面的布局。


网格布局

这是标记的一部分：

<p class="input-group">
    <label for="">Full Name</label>
    <input type="email" name="" id="">
</p>

以下是样式：

.input-group {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1rem;

  @media (min-width: 700px) {
    grid-template-columns: 0.7fr 2fr;
  }
}

我想label在输入数据（元素input）的字段的左侧对齐标签，元素。为此，您需要应用以下样式：

.input-group label {
    margin-left: auto;
}

应用此样式将得到如下图所示的结果。


数据输入的左对齐标题

模态窗设计



模态窗口

在设计模态窗口时，重要的是要考虑需要显示在窗口中的内容可能不完全适合它。为了使窗口在这种情况下能够正常工作，可以使用以下样式：

.modal-body {
    overflow-y: auto;
}

由于这种风格，滚动条仅在窗口内容足够大时显示。

摘要


在本文中，我们研究了auto在CSS 中应用关键字的功能。我们希望您发现今天阅读的内容有用。

亲爱的读者们！在什么情况下，您会auto在CSS中使用价值？

More articles:


All Articles