在CSS中，我們有auto值，它可以用于像margin，position，height，width等屬性。在本文中，會先解釋auto的工作方式以及如何最大程度地利用auto的技術(shù)細(xì)節(jié),當(dāng)然，會配合一些用例和示例。

簡介

auto關(guān)鍵字的使用因?qū)傩远悺?對于本文，我將在每個屬性的上下文中解釋值。

width: auto

塊級元素(如<div>或<p>)的初始寬度是auto，這使得它們占據(jù)了包含它們的塊的整個水平空間。

根據(jù)CSS規(guī)范：

‘margin-left’ + ‘border-left-width’ + ‘padding-left’ + ‘width’ +‘padding-right’ + ‘border-right-width’ + ‘margin-right’ = 塊的寬度

當(dāng)一個元素的寬度值為auto時，它包含margin、padding和border，不會變得比它的父元素大。其中 content 的寬度將是content本身減去margin、padding和border。

我們以上面的模型為例。

html

<div class="wrapper">   <div class="item">     <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eos maxime cum non cupiditate, perferendis saepe vitae fugiat id exercitationem officiis voluptate sint ducimus commodi reiciendis error itaque dolores ipsam? Ea!</p>   </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; }

一切都好，元素 item 被限制在其父項(xiàng)中。

是，如果我們將元素item的寬度更改為100％而不是auto會發(fā)生什么？ 該元素將占用其父項(xiàng)的100％，加上左側(cè)和右側(cè)的邊距。

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

該元素的寬度為568px，是以下各項(xiàng)的總和：

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

如果方向是ltr，則完全忽略margin-right。在我們的例子中，這種情況發(fā)生了。但是，如果布局是rtl，那么margin-left將被忽略。

事例源碼：https://codepen.io/shadeed/pen/f305220fbd4b444371bdef11dad014ec?editors=0100

width 用例: auto

僅僅解釋基礎(chǔ)知識不足以使我們掌握這一概念，因此需要一些事例來說明。

手機(jī)和 PC 之間的寬度不同

我們有一組按鈕。在移動設(shè)備上，我們希望它們彼此相鄰(每個按鈕包裝器占據(jù)其父元素的50%)，而在桌面設(shè)備上，每個按鈕都應(yīng)該占據(jù)其父元素的全部寬度。該怎么做?

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>

這里使用 flex 布局將按鈕排列在一起。

CSS

.group {     display: flex; }  .group__item {     width: 50%; }

對于 PC，我們每個項(xiàng)需要都取全寬。在這種情況下，你可能傾向于使用width: 100%，對嗎?下面是一個更好的解決方案。

CSS

@media (min-width: 800px) {     /* Revert the wrapper to a block element instead of flex */     .group {         display: block;     }      .group__item {         width: auto;     } }

由于.group是一個塊元素，因此使用width: auto可以很好地填充其父元素的可用空間。

事例源碼：https://codepen.io/shadeed/pen/399de6d9d473137998f87f957cfdfa03?editors=1100

height: auto

說到height，情況就不一樣了。元素的高度等于默認(rèn)值為auto的內(nèi)容。

考慮下面的例子

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

要使.item獲得其容器的全部高度，我們可以使用以下方法之一:

1. 給.wrapper一個固定的高度，然后為.item元素添加height: 100%

2. 對.wrapper使用 flex 布局，默認(rèn)情況下它將拉伸子項(xiàng).item

CSS

.wrapper {     height: 200px; }  .item {     height: 100%; }

margin 和 auto 關(guān)鍵字

對于margin，最常見的用例是將已知寬度的元素水平居中。

請考慮以下示例：

要讓上面的藍(lán)色矩形居中，可以使用下面的方法：

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

根據(jù)CSS規(guī)范：

如果margin-left和margin-right值均為auto，則它們的使用值相等。 這使元素相對于包含塊的邊緣水平居中。

具有絕對定位元素的 margin:auto

另一個不太常見的將絕對定位元素居中的用例是margin: auto。當(dāng)我們有一個元素應(yīng)該在它的父元素內(nèi)部水平和垂直居中時，我們可能會傾向于使用translateX或translateY。

我們可以使用下面方法讓具有絕對定位元素居中：

1. 設(shè)置的寬度和高度。

2. 元素應(yīng)具有position: absolute

HTML

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

CSS

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

事例源碼：https://codepen.io/shadeed/pen/b086f8402be981e871ac5db15495dec8?editors=0100

Flexbox

在某些情況下，在flexbox中使用自動頁邊距非常有用。當(dāng)一個子項(xiàng)目有一個margin是auto 時，它將被推到遠(yuǎn)的另一邊。例如，如果一個flex項(xiàng)目的左邊是margin-left: auto，那么它將被推到最右邊。

考慮下面的模型，父級元素是一個 flex 布局：

我們想把第二項(xiàng)推到最右邊，自動邊距就派上用場了。

CSS

.wrapper {     display: flex; }  .item-2 {     margin-left: auto; }

不僅如此，它還可以在水平或垂直方向工作。參見下面的示例

CSS

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

另外，如果只有一個子元素，則可以使用margin：auto將其水平和垂直居中。

CSS

.item-1 {     margin: auto; }

flex 屬性和 auto 關(guān)鍵字

在flexbox中，我們可以使用flex: auto作為子項(xiàng)目。這是什么意思?當(dāng)一個子項(xiàng)目有flex: auto時，它等價于flex: 11 auto，與下面等價：

CSS

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

MDN 描述

該項(xiàng)目根據(jù)其寬度和高度屬性調(diào)整大小，但會增長以吸收flex容器中的任何額外自由空間，并會收縮到其最小尺寸以適合該容器，這等效于設(shè)置“ flex：1 1 auto”。

具有flex：auto的項(xiàng)目將根據(jù)其寬度和高度來調(diào)整大小，但它可以根據(jù)可用的額外空間來增大或縮小。 在研究本文之前，我不知道這一點(diǎn)！

HTML

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

CSS

.wrapper {     display: flex;     flex-wrap: wrap; }  .item {     width: 120px;     height: 500px; }  .item-1 {     flex: auto; }

事例源碼：https://codepen.io/shadeed/pen/4914b4517b858f0fcf0f8acd07c64b1e?editors=1100

CSS grid 和自動設(shè)置一個 auto 列

在CSS Grid中，我們可以設(shè)置一個列為auto，這意味著它的寬度將基于它的內(nèi)容長度。看看下面，你就知道我的意思了:

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

grid 和 auto 邊距

使用CSS網(wǎng)格時，可以使用自動頁邊距實(shí)現(xiàn)類似于 flexbox 的結(jié)果。 當(dāng)我們有一個網(wǎng)格，并且其中的網(wǎng)格項(xiàng)目具有margin-left: auto時：該項(xiàng)目將被推到右邊，其寬度將基于其內(nèi)容長度

考慮下面的例子：

當(dāng)我們希望item1的寬度基于其內(nèi)容，而不是網(wǎng)格區(qū)域。 通過使用margin-left: auto，可以通過下面代碼實(shí)實(shí)現(xiàn)：

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

從右向左布局

值得一提的是，使用margin-left: auto或margin-right: auto對于從左到右的布局（例如英語）可能效果很好。 但是，在多語言網(wǎng)站上工作時要當(dāng)心顛覆這些價值觀。 更好的是，使用flexbox或grid屬性，以防使用它們完成工作。 如果沒有，那么請使用自動頁邊距作為最后的選擇，而應(yīng)使用CSS邏輯屬性。

overflow 屬性

當(dāng)我們有一個元素時，我們應(yīng)該考慮它應(yīng)該包含的最小和最大內(nèi)容。如果內(nèi)容超過了最大值，那么我們需要顯示一個滾動條。

你可能想使用以下內(nèi)容：

element {   overflow-y: scroll; }

然而，這可能會顯示一個滾動條，即使內(nèi)容高度很短。參見下面的示例

在 Chrome 窗口中，滾動條總是顯示出來，這是不正確和令人困惑的行為。

通過使用auto關(guān)鍵字，我們可以確保滾動條不會顯示，除非內(nèi)容高度大于它的容器。

根據(jù)MDN：

取決于用戶代理。 如果內(nèi)容適合填充框內(nèi)部，則它看起來與可見內(nèi)容相同，但仍會建立新的塊格式化上下文。 如果內(nèi)容溢出，桌面瀏覽器會提供滾動條。

.element {   overflow-y: auto; }

position 屬性

對于CSS定位屬性top，right，bottom和left，我們可以使用auto關(guān)鍵字作為它們的值。 接下來我要解釋的是對我來說是新的，我在研究本文時學(xué)到了它。

考慮下面的模型:

我們有一個有內(nèi)邊距的 wrapper 元素，還有一個子項(xiàng)。子項(xiàng)目是絕對定位的，但沒有任何定位屬性。

.wrapper {     position: relative;     padding: 16px; }  .item {     position: absolute;     width: 100px;     height: 100px; }

在CSS中，每個屬性都有一個初始值/默認(rèn)值。 如果我檢查了子項(xiàng)并轉(zhuǎn)到computed styles，你猜下left屬性的值會是什么？

left的默認(rèn)值為16px，即使沒有設(shè)置。為什么會發(fā)生這種情況？ 好吧，原因是絕對定位的元素相對于其最接近的父元素具有position：relative。 該父項(xiàng)具有padding: 16px，因此子項(xiàng)位于頂部和左側(cè)的16px處。 有趣，不是嗎？

現(xiàn)在，你可能會問，這樣做有什么好處?好吧，讓我繼續(xù)。

假設(shè)子項(xiàng)必須在較小的視口中位于距左側(cè)100像素的位置，對于桌面，它應(yīng)恢復(fù)為默認(rèn)位置。

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

如何在較大的視口中重設(shè)left？ 我們不能使用left:0，因?yàn)檫@會將子元素粘到邊緣，這不是我們想要的。 請參閱下面的模型，以了解我的意思。

要以正確的方式重置子項(xiàng)，我們應(yīng)該使用left: auto。 根據(jù) MDN：

如果元素是靜態(tài)元素，則將定位在它應(yīng)該水平定位的位置

這意味著，它會尊重padding，而不會將子條目粘貼到其父條目的邊緣。

.item {     position: absolute;     left: 100px;     width: 100px;     height: 100px; }  @media (min-width: 800px) {     .item {         /* This is equivalent to left: 16px */         left: auto;     } }

top屬性也是如此。 對于right和bottom屬性，其默認(rèn)計算值分別等于元素的寬度和高度。

事例源碼：https://codepen.io/shadeed/pen/d062539938346e5458f769cbc08833e1?editors=0100

用例和示例

值得一提的是，下面的用例可能還不夠，但是我嘗試添加一些用例，希望它們對你們有用。

提示箭頭

對于提示框，我們需要一個指向箭頭，以使其對用戶更加清晰。 如果我們正在設(shè)計系統(tǒng)上，則應(yīng)該考慮多個狀態(tài)。 例如，提示的箭頭指向左側(cè)，另一個箭頭指向右側(cè)。

.tooltip:before {     /* 箭頭代碼 */     position: absolute;     left: -15px; }  /* 這是一個箭頭指向右側(cè)的版本*/ .tooltip.to-right:before {     /* 箭頭代碼 */     position: absolute;     left: auto;     right: -15px; }

請注意，在初始實(shí)現(xiàn)中，我使用left: auto來覆蓋left: -15px。 供您參考，這是非常常用的，我建議改用以下內(nèi)容：

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

通過使用100%，我們避免了使用硬編碼的值(箭頭寬度)，如果我們改變箭頭的大小，這個值可能會失敗。這是一個更經(jīng)得起時間考驗(yàn)的解決方案。

卡片組件

你可能有一個card組件，其左上角有一個操作，它可能僅用于裝飾，也可能是一個有用的操作。不管是什么，你都應(yīng)該考慮到它是雙向的。

通過使用left:auto，我們可以很容易地重置它的基本實(shí)現(xiàn)。

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

Flexbox 和 自動邊距

當(dāng)談到flexbox時，它有無限的可能性。 通過將其與自動邊距相結(jié)合，我們可以構(gòu)建功能強(qiáng)大的布局。

考慮下面的例子

我們在右側(cè)包含一行標(biāo)題，描述和一個操作按鈕的行。 我們希望操作按鈕貼在右側(cè)。

HTML

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

CSS

.item {   display: flex;   flex-wrap: wrap;   justify-content: space-between; }  .item__action {   margin-left: auto; }

就是這樣！ 通過使用margin-left: auto，將動作推到最右角。 更好的是，如果您要構(gòu)建多語言網(wǎng)站，我們可以使用CSS邏輯屬性。 CSS將如下所示：

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

CSS grid 和自動邊距

在向網(wǎng)格項(xiàng)目添加邊距時，它可以是固定值，百分比或自動值。 我對auto更感興趣。 考慮以下：

HTML

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

CSS

.input-group {   display: grid;   grid-template-columns: 1fr;   grid-gap: 1rem;    @media (min-width: 700px) {     grid-template-columns: 0.7fr 2fr;   } }

我想將label 與input的左邊緣對齊。 為此，我需要應(yīng)用以下內(nèi)容：

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

模態(tài)設(shè)計

在進(jìn)行模態(tài)設(shè)計時，重要的是要考慮內(nèi)容高度很大時會發(fā)生的情況。 對于這種情況，我們可以使用以下代碼：

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

這樣，只有當(dāng)內(nèi)容高度足夠大時，它才會顯示滾動條。

英文原文地址：https://css-tricks.com/almanac/properties/o/overflow/

作者：shadeed