数据结构
网络
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+ 阅读量
