auto值的介绍
auto表表示自适应,由浏览器去自动计算auto值,auto在不同的环境下表示不同的意思。
在文档流模型中的auto值:
块级元素的auto:
可以设置auto值的属性: width、height、margin。
当以上这些水平方向的属性设置为auto时,表示计算包含块的剩余可用空间。
当以上这些垂直方向上属性设置为auto时,height会自适应内容,margin上下会计算为0,原因是块级元素在垂直方向上并不要求占满一行,原理可以看我这篇博客: https://blog.csdn.net/androidioskl/article/details/122857240?spm=1001.2014.3001.5501
案例
.parent{
width: 300px;
height: 300px;
background: green;
}
<div class="parent">
<div style="width: 100px;
height: auto;
margin: auto;
background: red;">
我是块级元素</div>
</div>
我们可以看到块级元素是居中,高度是由内容撑起的,首先子元素占据width占据包含块100px,因此父元素的可用空间还有200px,根据上面水平方向上的margin表示计算包含块的可用空间,因此margin左右会均分父元素的剩余空间被计算为100px,所以就导致元素居中了。而height是自适应内容的因此有内容撑起,垂直方向上的margin被计算为0,所以没有垂直居中。
行内元素的auto:
可用设置auto值的属性: margin,因为行内元素不能设置宽高而且垂直方向上的margin都失效,所以我们不考虑宽高和垂直方向上的属性。
当以上这些属性设置水平方向上的值为auto时,计算为0,原因和块级元素的height的一样元素在垂直方向上不要求占满一行。
案例
<span style="margin: auto; background:red">我是行内元素</span>
可以看到水平方向上的margin没有居中,所以被计算为0;
行内块元素:
可以设置auto值的属性: width、height、margin。
这不用多说了,结合了块级元素和行内元素的特性。
当以上这些水平方向的上属性设置值为auto时,width会自适应内容,margin计算为0。
当以上这些垂直方向上的属性设置值为auto时,height会自适应内容,margin计算为0,
在浮动模型中的auto值:
可以设置auto值的属性: width、height、margin。
由于浮动脱离文档流因此并不要求占满一行,所以margin:auto计算为0,width和height为auto时是自适应内容。
案例
.parent{
width: 300px;
height: 300px;
background: lightblue;
}
.child{
float: left
width: auto;
height: auto;
margin: auto;
background: red;
}
在定位模型中的auto值:
这里首先理解一下什么叫静态位置,表示计算为文档流的位置,比如元素的left为静态位置,表示的就是元素原来在文档流中的位置到包含块左边缘的位置。
相对定位:
可以设置auto值的属性: width、height、margin、left、right、bottom、top。
width、height、margin和上面文档流的情况一样。
当left和right都为auto时,left和right计算为0px;
当left(right)为固定值时,right计算为负left(left为负right)
以上bottom和top的情况一样。
案例
.parent{
width: 300px;
height: 300px;
background: lightblue;
}
.child{
position: relative;
left: 10px;
right: auto;
width: 200px;
background: red;
}
</style>
<div class="parent">
<div class="child">我是相对定位</div>
</div>
我们可以看到,当left为10px时,right为auto时,right被计算为负left,所以right计算为-10px;
为什么这么做?是为了解决left、top、bottom、top同时设置时的冲突。
你想想啊,为什么left=10px和right=-10px,可以同时设置不会冲突,当然不会冲突了,向自身位置的左边偏移10px和向自身位置的右边偏移负10px,表示的不都是同一个位置,所以当然不会冲突了。
绝对定位
待更新