在CSS中，'margin: 0 auto'中的auto属性是如何工作的？-html教程-PHP中文网

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

王林

发布： 2023-08-28 10:57:02

转载

1013 人浏览过

在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>

登录后复制