首頁 > 文章 > web前端 > 在CSS中，"margin: 0 auto"中的auto屬性是如何運作的？

在CSS中，"margin: 0 auto"中的auto屬性是如何運作的？

王林轉載: 2023-08-28 10:57:02959瀏覽

在CSS中，"margin: 0 auto"中的auto属性是如何工作的？

「margin: 0 auto」屬性是常用的CSS屬性，它允許開發者在容器內水平居中元素。 margin屬性的「auto」值使得居中效果得以實現。

在本文中，我們將探討在邊距屬性中，"auto" 值是如何運作的，以及如何使用它來實現水平居中。我們還將討論在邊距屬性中使用 "auto" 值時可能出現的一些錯誤和最佳實踐。

CSS中的邊距

在進入這個主題之前，我們應該試著學習一些基礎知識，以便理解這個問題。首先，我們將學習CSS中的margin是什麼意思，然後我們將繼續理解auto屬性。只有在學習了所有這些之後，我們才能得出我們最初問題的答案。

我們知道CSS的目的是設計網頁樣式，使其易於使用且視覺上令人愉悅，從而使用戶的整體用戶體驗更加流暢和更好。這種樣式包括許多內容，例如顏色、字體、字體大小等。其中一種樣式方法是在元素之間使用適當的間距。
每當我們談論的是元素定義邊界之外的空間時，實際上是在談論它的外邊距。外邊距讓我們可以創造一個無形的邊界，將一個元素與其他元素隔離。它有點像內邊距，但內邊距實際上是元素的子元素與周圍元素之間的空間。
CSS允許我們對元素的邊距進行非常高的控制和自定義，我們可以正常使用margin來創建四個邊都相等的邊距，但我們也可以透過指定我們實際上正在引用的邊距來單獨定義特定邊的邊距。例如，

margin : 0 // statement 1
margin top : 25px // statement 2

語句1設定的邊距將把元素的邊距都設為0，而語句2設定的邊距只會修改頂部邊距，並將其設為25像素。

我們可以用不同的方式指定邊距 -

我們可以使用自訂長度。
我們可以指定一個百分比值，該值將根據使用者的螢幕尺寸而變化。
我們也可以讓邊距可繼承，這會將目前元素的邊距設定為其父元素的邊距。

但是如果我們在定義邊距時不知道應該使用什麼值呢。

自動屬性

CSS 為我們提供了一個屬性，以便瀏覽器計算並設定該元素的邊距，該屬性就是 auto 屬性。此屬性使開發人員更容易使用邊距，因為我們不需要事先知道將要使用的實際值，而是讓瀏覽器計算它。

讓我們先了解它是如何運作的。如果我們將元素的邊距指定為auto，則會透過先計算元素的寬度和大小來給出所有邊的相等邊距。

Example

的中文翻譯為：

範例

讓我們考慮一個尺寸為500像素乘以300像素的div。如果我們不指定任何邊距，它將自動對齊到螢幕的左上角。另一方面，將邊距指定為auto將使其在父容器中居中，這裡是body標籤。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Margin: 0 auto example</title>
</head>
<body style="background-color: coral; margin: 0; padding: 0; font-size: larger;
font-weight: bold;">
   <div style="width: 500px; height: 300px; border: 1px solid black; background-color: aqua;">No set margin</div>
   <div style="width: 500px; height: 300px; border: 1px solid black; background-color: burlywood; margin: auto;">Margin set to 0</div>
</body>
</html>

使用邊距：0 自動

現在，如果我們嘗試使用兩個值來設定邊距，會發生什麼事？每當我們嘗試使用邊距並提供兩個值時，第一個值被視為上下邊距的值，而第二個值被用於左右邊距。

我們的問題是解釋，「如果我們將 auto 屬性用作保證金的第二個值，它將如何運作。

答案是，「它會透過自動計算左右邊距，將元素垂直對齊到其父元素的中心。」

Example

的中文翻譯為：

範例

考慮與上述範例相同，但將邊距設定為0 auto。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Margin: 0 auto example</title>
</head>
<body style="background-color: coral; margin: 0; padding: 0; font-size: larger; font-weight: bold;">
   <div style="width: 500px; height: 300px; border: 1px solid black; background-color: burlywood; margin: 0 auto;">Margin set to 0 auto</div>
</body>
</html>

結論

在本文中，我們了解了 CSS 中 margin 的含義、CSS 中的 auto 屬性的作用以及當我們將其用作 margin 的第二個值時它的行為如何變化。我們最初的答案是，透過自動計算左右邊距，將元素與其父元素垂直對齊。

以上是在CSS中，"margin: 0 auto"中的auto屬性是如何運作的？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：利用WordPress媒體上傳工具新增和刪除圖片下一篇：利用WordPress媒體上傳工具新增和刪除圖片

看更多