資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究CSS 中 `margin: 0 auto` 的 `auto` 屬性是如何工作的？
“margin: 0 auto” 屬性是 CSS 中常用的屬性，它允許開發者將元素在其容器內水平居中。`margin` 屬性的 `auto` 值正是實現這種居中效果的關鍵。
在本文中，我們將深入瞭解 `margin` 屬性中 `auto` 值的工作原理，以及如何使用它來實現水平居中。我們還將討論使用 `margin` 屬性中 `auto` 值時的一些潛在錯誤和最佳實踐。
CSS 中的邊距
在深入主題之前，我們先學習一些基礎知識，以便理解這個問題。首先，我們將學習 CSS 中 `margin` 的含義，然後，我們將瞭解 `auto` 屬性。只有學習了這些，我們才能回答最初的問題。
我們知道 CSS 用於為網頁新增樣式，使其易於使用和視覺上更美觀，從而改善使用者的整體體驗。這些樣式包括許多方面，例如顏色、字型、字型大小等。其中一種樣式方法是使用元素之間的適當間距。
當我們談論元素定義邊框之外的空間時，實際上是在談論它的邊距。`margin` 允許我們建立無形的邊框，將一個元素與另一個元素隔開。它有點像填充，但填充實際上是元素的子元素與其周圍元素之間的空間。
CSS 允許我們對設定元素的邊距進行高度控制和自定義。我們可以正常使用 `margin` 建立四面等大的邊距，但我們也可以透過指定要引用的邊距來單獨定義特定側面的邊距。例如，
margin : 0 // statement 1 margin top : 25px // statement 2
語句 1 設定的邊距將元素的所有四側邊距設定為 0，而語句 2 設定的邊距只會修改頂部邊距，並將其設定為 25 畫素。
我們可以透過多種方式指定邊距：
我們可以使用自定義長度。
我們可以指定百分比值，該值會根據使用者的螢幕尺寸而變化。
我們還可以使邊距可繼承，這將使當前元素的邊距等於其父元素的邊距。
但是，如果我們不知道在定義邊距時應該使用什麼值呢？
`auto` 屬性
CSS 提供了一個屬性，它可以讓瀏覽器計算並設定該元素的邊距，這個屬性就是 `auto` 屬性。此屬性使開發人員更容易使用邊距，因為我們不需要預先知道將使用的實際值，而是讓瀏覽器代為計算。
讓我們先了解一下它的工作原理。如果我們將元素的邊距指定為 `auto`，它會先計算元素的寬度和大小，然後為所有邊設定相等的邊距。
示例
假設一個 `div` 的尺寸為 500 畫素乘 300 畫素。如果我們不為它指定任何邊距，它將對齊到螢幕的左上角。另一方面，將邊距指定為 `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>
使用 `margin: 0 auto`
現在，如果我們嘗試使用兩個值來設定邊距會發生什麼情況？當我們嘗試使用 `margin` 併為其提供兩個值時，第一個值將作為頂部和底部邊距的值，而第二個值將用於左和右邊距。
我們的問題是解釋“如果我們將 `auto` 屬性用作 `margin` 的第二個值，它將如何工作”。
答案是：“它將透過自動計算左右邊距，將元素垂直對齊到其父元素的中心。”
示例
考慮與上面相同的示例，但邊距設定為 `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` 的第二個值時它的行為如何變化。我們最初問題的答案是：透過自動計算左右邊距，將元素垂直對齊到其父元素。
2K+ 閱讀量
