精品伊人久久大香线蕉,开心久久婷婷综合中文字幕,杏田冲梨,人妻无码aⅴ不卡中文字幕

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

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

塊級元素(如<div>或<p>)的初始寬度是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

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

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

HTML

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

CSS

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

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

CSS

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

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

說到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

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

請考慮以下示例：

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

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

根據CSS規范：

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

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

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

1. 設置的寬度和高度。
2. 元素應具有position: absolute

HTML

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

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

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

CSS

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

CSS

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

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

CSS

在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

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，這意味著它的寬度將基于它的內容長度?？纯聪旅妫憔椭牢业囊馑剂?

使用CSS網格時，可以使用自動頁邊距實現類似于 flexbox 的結果。當我們有一個網格，并且其中的網格項目具有margin-left: auto時：該項目將被推到右邊，其寬度將基于其內容長度

考慮下面的例子：

當我們希望item1的寬度基于其內容，而不是網格區域。通過使用margin-left: auto，可以通過下面代碼實實現：

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

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

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

你可能想使用以下內容：

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

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

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

根據MDN：

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

.element {  overflow-y: auto;}

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

考慮下面的模型:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

考慮下面的例子

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

HTML

CSS

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

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

在向網格項目添加邊距時，它可以是固定值，百分比或自動值。我對auto更感興趣?？紤]以下：

HTML

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

CSS

我想將label 與input的左邊緣對齊。為此，我需要應用以下內容：

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

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

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