css button自動調整位置_你不一定知道的CSS 中的auto

在CSS中，我們有

auto

值，它可以用于像

margin

，

position

，

height

，

width

等屬性。在本文中，會先解釋

auto

的工作方式以及如何最大程度地利用

auto

的技術細節,當然，會配合一些用例和示例。

簡介

auto

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

width: auto

塊級元素(如

或

)的初始寬度是

auto

，這使得它們占據了包含它們的塊的整個水準空間。

根據CSS規範:

‘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

css

一切都好，元素

item

被限制在其父項中。

是，如果我們将元素

item

的寬度更改為

100％

而不是

auto

會發生什麼？該元素将占用其父項的

100％

，加上左側和右側的邊距。

該元素的寬度為

568px

，是以下各項的總和：

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

568px

如果方向是

ltr

，則完全忽略

margin-right

。在我們的例子中，這種情況發生了。但是，如果布局是

rtl

，那麼

margin-left

将被忽略。

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

width 用例: auto

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

手機和 PC 之間的寬度不同

我們有一組按鈕。在移動裝置上，我們希望它們彼此相鄰(每個按鈕包裝器占據其父元素的

50%

)，而在桌面裝置上，每個按鈕都應該占據其父元素的全部寬度。該怎麼做?

HTML

class="group">

class="group__item">class="c-button">Sign In

class="group__item">class="c-button c-button--ghost">Register

這裡使用

flex

布局将按鈕排列在一起。

CSS

對于 PC，我們每個項需要都取全寬。在這種情況下，你可能傾向于使用

width: 100%

，對嗎?下面是一個更好的解決方案。

CSS

由于

.group

是一個塊元素，是以使用

width: auto

可以很好地填充其父元素的可用空間。

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

height: auto

說到

height

，情況就不一樣了。元素的高度等于預設值為

auto

的内容。

考慮下面的例子

要使

.item

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

給

.wrappe

r一個固定的高度，然後為

.item

元素添加

height: 100%

對

.wrapper

使用

flex

布局，預設情況下它将拉伸子項

.item

CSS

margin 和 auto 關鍵字

對于

margin

，最常見的用例是将已知寬度的元素水準居中。

請考慮以下示例：

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

根據CSS規範：

如果

margin-left

和

margin-right

值均為

auto

，則它們的使用值相等。這使元素相對于包含塊的邊緣水準居中。

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

另一個不太常見的将絕對定位元素居中的用例是

margin: auto

。當我們有一個元素應該在它的父元素内部水準和垂直居中時，我們可能會傾向于使用

translateX

或

translateY

。

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

設定的寬度和高度。

元素應具有

position: absolute

HTML

class="wrapper">

class="item">I am centered.

CSS

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

Flexbox

在某些情況下，在flexbox中使用自動頁邊距非常有用。當一個子項目有一個

margin

是

auto

時，它将被推到遠的另一邊。例如，如果一個

flex

項目的左邊是

margin-left: auto

，那麼它将被推到最右邊。

考慮下面的模型，父級元素是一個

flex

布局：

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

CSS

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

CSS

另外，如果隻有一個子元素，則可以使用

margin：auto

将其水準和垂直居中。

CSS

flex 屬性和 auto 關鍵字

在

flexbox

中，我們可以使用

flex: auto

作為子項目。這是什麼意思?當一個子項目有

flex: auto

時，它等價于

flex: 11 auto

，與下面等價：

CSS

MDN 描述

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

flex：1 1 auto

”。

具有

flex：auto

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

HTML

class="wrapper">

class="item item-1">Item

class="item">Item

class="item">Item

CSS

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

CSS grid 和自動設定一個 `auto` 列

在CSS Grid中，我們可以設定一個列為

auto

，這意味着它的寬度将基于它的内容長度。看看下面，你就知道我的意思了:

grid 和 auto 邊距

使用CSS網格時，可以使用自動頁邊距實作類似于 flexbox 的結果。當我們有一個網格，并且其中的網格項目具有

margin-left: auto

時：該項目将被推到右邊，其寬度将基于其内容長度

考慮下面的例子：

當我們希望

item1

的寬度基于其内容，而不是網格區域。通過使用

margin-left: auto

，可以通過下面代碼實實作：

從右向左布局

值得一提的是，使用

margin-left: auto

或

margin-right: auto

對于從左到右的布局(例如英語)可能效果很好。但是，在多語言網站上工作時要當心颠覆這些價值觀。更好的是，使用

flexbox

或

grid

屬性，以防使用它們完成工作。如果沒有，那麼請使用自動頁邊距作為最後的選擇，而應使用CSS邏輯屬性。

overflow 屬性

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

你可能想使用以下内容：

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

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

通過使用

auto

關鍵字，我們可以確定滾動條不會顯示，除非内容高度大于它的容器。

根據MDN：

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

position 屬性

對于CSS定位屬性

top

，

right

，

bottom

和

left

，我們可以使用

auto

關鍵字作為它們的值。接下來我要解釋的是對我來說是新的，我在研究本文時學到了它。

考慮下面的模型:

我們有一個有内邊距的

wrapper

元素，還有一個子項。子項目是絕對定位的，但沒有任何定位屬性。

在CSS中，每個屬性都有一個初始值/預設值。如果我檢查了子項并轉到computed styles，你猜下

left

屬性的值會是什麼？

left

的預設值為

16px

，即使沒有設定。為什麼會發生這種情況？好吧，原因是絕對定位的元素相對于其最接近的父元素具有

position：relative

。該父項具有

padding: 16px

，是以子項位于頂部和左側的

16px

處。有趣，不是嗎？

現在，你可能會問，這樣做有什麼好處?好吧，讓我繼續。

假設子項必須在較小的視口中位于距左側

100

像素的位置，對于桌面，它應恢複為預設位置。

如何在較大的視口中重設

left

？我們不能使用

left:0

，因為這會将子元素粘到邊緣，這不是我們想要的。請參閱下面的模型，以了解我的意思。

要以正确的方式重置子項，我們應該使用

left: auto

。根據 MDN：

如果元素是靜态元素，則将定位在它應該水準定位的位置

這意味着，它會尊重

padding

，而不會将子條目粘貼到其父條目的邊緣。

top

屬性也是如此。對于

right

和

bottom

屬性，其預設計算值分别等于元素的寬度和高度。

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

用例和示例

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

提示箭頭

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

請注意，在初始實作中，我使用

left: auto

來覆寫

left: -15px

。供您參考，這是非常常用的，我建議改用以下内容：

通過使用

100%

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

卡片元件

你可能有一個

card

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

通過使用

left:auto

，我們可以很容易地重置它的基本實作。

Flexbox 和 自動邊距

當談到

flexbox

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

考慮下面的例子

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

HTML

CSS

就是這樣！通過使用

margin-left: auto

，将動作推到最右角。更好的是，如果您要建構多語言網站，我們可以使用CSS邏輯屬性。CSS将如下所示：

CSS grid 和自動邊距

在向網格項目添加邊距時，它可以是固定值，百分比或自動值。我對

auto

更感興趣。考慮以下：

HTML

class="input-group"><label for="">Full Namelabel>"email" name="" id="">p>

CSS

我想将

labe

l 與

input

的左邊緣對齊。為此，我需要應用以下内容：

模态設計

在進行模态設計時，重要的是要考慮内容高度很大時會發生的情況。對于這種情況，我們可以使用以下代碼：

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

 其他推薦

可以任意插拔随意組合的業務級前端子產品化神器！

超詳細webpack建構方式補給！

超詳細webpack基礎補給！

當你更新到前端的TL時，如何快速打造用于中小團隊的前端基建

CommonJS和ES6子產品規範很多時候并不是你想象的那麼回事

線上項目出現問題時如何快速調試定位問題？

帶你一起寫一遍 React Hooks，讓你更深入了解hooks大法的原理

Debug 也有等級的，調試技巧傳授(浏覽器-基礎篇)

學習 React Hooks 可能會遇到的五個靈魂問題

你确定你真的懂CSS嗎？

太齊了！前端的學習及工作資料隻收藏這份就夠了！

Vue3.0 年中上？聽說已跳出了virtual dom性能的瓶頸！！

大廠都在用的進階緩存方案

最佳日志實踐 - 碼農周刊選最受歡迎幹貨之一

我這個頁面居然用了10G的GPU？！！

微前端深入解析！(微前端架構qiankun以及源碼講解)

微前端在企業級應用中的實踐(華為項目經驗傳授)

微信小程式如何更好的做自動化性能監測？

原來微信支付軟體架構是這樣哒！！！

有這個！你還愁不會寫正則嗎？

看我如何把node接口耗時降低23%！

進階前端工程師是怎樣高效部署前端應用？

Webpack 4 如何幫你删除無效代碼？Tree Shaking 終極優化指南

進階進階前端工程師需要了解的資料結構和算法

【撩妹教程】如何教公司新來的女實習生小姐姐什麼是閉包？

前端如何在繁忙的業務中提升自己全鍊路日志如何實作？大廠的高性能小程式原來是這樣弄的！感覺可能會改變未來幾年的打包方式！應用秒開方案改進測試一下你離前端專家這個稱号還有多遠？

點在看的人特别帥/美