“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属性是如何工作的？的详细内容，更多请关注双恒网络其它相关文章！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，请使用WINRAR解压,如遇到无法解压的请联系管理员！
8. 精力有限，不少源码未能详细测试（解密），不能分辨部分源码是病毒还是误报，所以没有进行任何修改，大家使用前请进行甄别
9.本站默认解压密码为:www.sudo1.com
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的。
不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站信息来自网络收集整理，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。
如果您喜欢该程序和内容，请支持正版，购买注册，得到更好的正版服务。
我们非常重视版权问题，如有侵权请邮件与我们联系处理。敬请谅解！
云资源网 » 在CSS中，”margin: 0 auto”中的auto属性是如何工作的？
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 你们有qq群吗怎么加入？
