css的auto值是什么意思

原创已于 2023-05-22 22:30:53 修改 · 2.6k 阅读

19 ·

CC 4.0 BY-SA版权

文章标签：

#依赖倒置原则 #css #css3

于 2022-03-05 13:09:26 首次发布

css 专栏收录该内容

15 篇文章

订阅专栏

本文详细解读了auto值在文档流、浮动模型和定位模型中的行为，包括块级元素、行内元素、浮动元素和相对/绝对定位中的应用，以及为何它会导致元素的自适应和居中效果。

auto值的介绍

auto表表示自适应，由浏览器去自动计算auto值，auto在不同的环境下表示不同的意思。

在文档流模型中的auto值:

块级元素的auto:
可以设置auto值的属性: width、height、margin。
当以上这些水平方向的属性设置为auto时，表示计算包含块的剩余可用空间。
当以上这些垂直方向上属性设置为auto时，height会自适应内容，margin上下会计算为0，原因是块级元素在垂直方向上并不要求占满一行，原理可以看我这篇博客: https://blog.youkuaiyun.com/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，表示的不都是同一个位置，所以当然不会冲突了。
在这里插入图片描述