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

簡介

auto關鍵字的使用因屬性而異。 對于本文，我將在每個屬性的上下文中解釋值。

width: auto

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

根據CSS規(guī)范：

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

當一個元素的寬度值為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 被限制在其父項中。

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

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

該元素的寬度為568px，是以下各項的總和：

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

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

width 用例: auto

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

手機和 PC 之間的寬度不同

我們有一組按鈕。在移動設備上，我們希望它們彼此相鄰(每個按鈕包裝器占據其父元素的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>

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

CSS

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

對于 PC，我們每個項需要都取全寬。在這種情況下，你可能傾向于使用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，情況就不一樣了。元素的高度等于默認值為auto的內容。

考慮下面的例子

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

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

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

2. 對.wrapper使用 flex 布局，默認情況下它將拉伸子項.item

CSS

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

margin 和 auto 關鍵字

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

請考慮以下示例：

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

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

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

1. 設置的寬度和高度。

2. 元素應具有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中使用自動頁邊距非常有用。當一個子項目有一個margin是auto 時，它將被推到遠的另一邊。例如，如果一個flex項目的左邊是margin-left: auto，那么它將被推到最右邊。

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

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

CSS

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

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

CSS

.item-1 {     margin: auto; }

flex 屬性和 auto 關鍵字

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

CSS

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

MDN 描述

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

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

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 和自動設置一個 auto 列

從右向左布局

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

overflow 屬性

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

你可能想使用以下內容：

element {   overflow-y: scroll; }

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

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

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

根據MDN：

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

.element {   overflow-y: auto; }

position 屬性

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

考慮下面的模型:

我們有一個有內邊距的 wrapper 元素，還有一個子項。子項目是絕對定位的，但沒有任何定位屬性。

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

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

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

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

假設子項必須在較小的視口中位于距左側100像素的位置，對于桌面，它應恢復為默認位置。

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

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

要以正確的方式重置子項，我們應該使用left: auto。 根據 MDN：

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

這意味著，它會尊重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屬性，其默認計算值分別等于元素的寬度和高度。

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

用例和示例

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

提示箭頭

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

.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 {     /* Arrow code */     position: absolute;     right: auto;     left: 100%; }

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

卡片組件

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

通過使用left:auto，我們可以很容易地重置它的基本實現。

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

Flexbox 和 自動邊距

當談到flexbox時，它有無限的可能性。 通過將其與自動邊距相結合，我們可以構建功能強大的布局。

考慮下面的例子

我們在右側包含一行標題，描述和一個操作按鈕的行。 我們希望操作按鈕貼在右側。

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，將動作推到最右角。 更好的是，如果您要構建多語言網站，我們可以使用CSS邏輯屬性。 CSS將如下所示：

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

CSS grid 和自動邊距

在向網格項目添加邊距時，它可以是固定值，百分比或自動值。 我對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的左邊緣對齊。 為此，我需要應用以下內容：

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

模態(tài)設計

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

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

這樣，只有當內容高度足夠大時，它才會顯示滾動條。

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

作者：shadeed