欢迎光临
我们一直在努力

CSS | magin:auto表现方式及常见用法

在平时写代码时,很喜欢通过 margin: auto 让页面居中,但是 margin :auto 的工作原理究竟是怎么样的,它为什么偶尔会罢工呢?

margin: auto 表现方式

auto会因为所在元素、元素类型和上下文的有不同不一样的表现。但是在margin(外边距)中,auto只有两种选择:占据可用的空间(take up the available space)或者等同于0px(这就决定了元素会有不同的布局)。 再看下面几个例子时注意这两种选择,有助于帮助我们理解。

auto平分可用的空间

这是我们在使用margin:auto;中最常见的用法。它给一个元素的左外边距和右外边距赋予同样的auto值,那么这个元素的左、右外边距就会平分所占据的可用空间(父元素宽度的1/2),因此我们会看到在元素表现水平居中。

然而它仅仅能在水平的auto(外边距)中起作用,在浮动元素(float)和内联元素(inline)中是不起作用的。在块级元素中,如果position的属性设置了absolute或者fixed值,它也不会起到作用。

<div class="father">
   <div class="son"></div>
</div>
  <style>
    .father{
      width: 200px;
      height: 200px;
      background: pink;
    }
    .son {
      width: 100px;
      height: 100px;
      background: gray;
      margin: auto;
    }
  </style>

auto代替float:right实现右对齐

<div class="father">
    <div class="son"></div>
</div>
.father {
      width: 300px;
      background-color: #f0f3f9;
    }
.son {
      width: 200px;
      height: 120px;
      margin-left: auto;
      background-color: #cd0000;
    }

auto配合绝对定位实现水平和垂直方向居中

<div class="father">
    <div class="son"></div>
</div>
.father {
      width: 300px;
      height: 150px;
      background-color: #f0f3f9;
      position: relative;
    }

.son {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      width: 200px;
      height: 100px;
      background-color: #cd0000;
      margin: auto;
    }

auto占用可用的空间

解析: son宽度是200px,容器是300px,总剩余空间大小是100px,当我们对其son的margin-right使用了80px,那么son的 margin-left: auto 就会占用剩余的20px。

<style>
    .father {
      width: 300px;
      background-color: #f0f3f9;
    }
.son {
      width: 200px;
      height: 120px;
      margin-right: 80px;
      margin-left: auto;
      background-color: #cd0000;
    }
</style>

<div class="father">
    <div class="son"></div>
</div>

auto实现垂直居中

解析:如同第三个例子,当我们为top和bottom设置0后,设置margin:auto 0;那么中间的盒子就会垂直居中。

<style type="text/css">
	.father{
		position: relative;
		height: 300px;
		width: 300px;
		background-color: lightblue;
		
	}
	.son{
		position: absolute;
		height: 100px;
		width: 100px;
		background-color: lightcoral;
		top: 0;
		bottom: 0;
		margin:auto 0;
	}
</style>

<div class="father">
	<div class="son"></div>
</div>
赞(1) 打赏
未经允许不得转载:散人研 » CSS | magin:auto表现方式及常见用法
分享到: 更多 (0)

评论 抢沙发

1 + 7 =
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏