簡介

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

width: auto

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

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

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

當(dāng)一個(gè)元素的寬度值為auto時(shí)，它包含margin、padding和border，不會(huì)變得比它的父元素大。其中 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會(huì)發(fā)生什么？ 該元素將占用其父項(xiàng)的100％，加上左側(cè)和右側(cè)的邊距。

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

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

width 用例: auto

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

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

我們有一組按鈕。在移動(dòng)設(shè)備上，我們希望它們彼此相鄰(每個(gè)按鈕包裝器占據(jù)其父元素的50%)，而在桌面設(shè)備上，每個(gè)按鈕都應(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%; }

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

CSS

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

由于.group是一個(gè)塊元素，因此使用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一個(gè)固定的高度，然后為.item元素添加height: 100%

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

CSS

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

margin 和 auto 關(guān)鍵字

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

請(qǐng)考慮以下示例：

具有絕對(duì)定位元素的 margin:auto

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

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

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)頁邊距非常有用。當(dāng)一個(gè)子項(xiàng)目有一個(gè)margin是auto 時(shí)，它將被推到遠(yuǎn)的另一邊。例如，如果一個(gè)flex項(xiàng)目的左邊是margin-left: auto，那么它將被推到最右邊。

考慮下面的模型，父級(jí)元素是一個(gè) flex 布局：

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

CSS

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

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

CSS

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

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

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

CSS

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

MDN 描述

該項(xiàng)目根據(jù)其寬度和高度屬性調(diào)整大小，但會(huì)增長以吸收flex容器中的任何額外自由空間，并會(huì)收縮到其最小尺寸以適合該容器，這等效于設(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 和自動(dòng)設(shè)置一個(gè) auto 列

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

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

grid 和 auto 邊距

使用CSS網(wǎng)格時(shí)，可以使用自動(dòng)頁邊距實(shí)現(xiàn)類似于 flexbox 的結(jié)果。 當(dāng)我們有一個(gè)網(wǎng)格，并且其中的網(wǎng)格項(xiàng)目具有margin-left: auto時(shí)：該項(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對(duì)于從左到右的布局（例如英語）可能效果很好。 但是，在多語言網(wǎng)站上工作時(shí)要當(dāng)心顛覆這些價(jià)值觀。 更好的是，使用flexbox或grid屬性，以防使用它們完成工作。 如果沒有，那么請(qǐng)使用自動(dòng)頁邊距作為最后的選擇，而應(yīng)使用CSS邏輯屬性。

overflow 屬性

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

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

element {   overflow-y: scroll; }

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

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

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

根據(jù)MDN：

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

.element {   overflow-y: auto; }

position 屬性

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

考慮下面的模型:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

用例和示例

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

提示箭頭

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

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

請(qǐng)注意，在初始實(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%，我們避免了使用硬編碼的值(箭頭寬度)，如果我們改變箭頭的大小，這個(gè)值可能會(huì)失敗。這是一個(gè)更經(jīng)得起時(shí)間考驗(yàn)的解決方案。

卡片組件

你可能有一個(gè)card組件，其左上角有一個(gè)操作，它可能僅用于裝飾，也可能是一個(gè)有用的操作。不管是什么，你都應(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)邊距

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

考慮下面的例子

我們在右側(cè)包含一行標(biāo)題，描述和一個(gè)操作按鈕的行。 我們希望操作按鈕貼在右側(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，將動(dòng)作推到最右角。 更好的是，如果您要構(gòu)建多語言網(wǎng)站，我們可以使用CSS邏輯屬性。 CSS將如下所示：

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

CSS grid 和自動(dòng)邊距

在向網(wǎng)格項(xiàng)目添加邊距時(shí)，它可以是固定值，百分比或自動(dòng)值。 我對(duì)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的左邊緣對(duì)齊。 為此，我需要應(yīng)用以下內(nèi)容：

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

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

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

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

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

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

作者：shadeed