auto是什么意思
-建材店
2023年2月16日发(作者：乙炔站设计规范)cssmargin外边距塌陷问题
⼀，margin外边距塌陷问题
当时说到了盒模型，盒模型包含着margin，为什么要在这⾥说margin呢？因为元素和元素在垂直⽅向上margin⾥⾯有坑。
我们来看⼀个例⼦：
html结构：
css样式：
*{
padding:0;
margin:0;
}
.father{
width:400px;
overflow:hidden;
border:1pxsolidgray;
}
.box1{
width:300px;
height:200px;
background-color:red;
margin-bottom:20px;}
.box2{
width:400px;
height:300px;
background-color:green;
margin-top:50px;
}
当给两个标准流下兄弟盒⼦设置垂直⽅向上的margin时，那么以较⼤的为准，那么我们称这种现象叫塌陷。我们称为这种技巧叫“奇淫技
巧”。记住这种现象，在布局垂直⽅向盒⼦的时候主要margin的⽤法。
当我们给两个标准流下的兄弟盒⼦设置浮动之后，就不会出现margin塌陷的问题。
1）margin：0auto;
div{
width:780px;
height:50px;
background-color:red;
/*⽔平居中盒⼦*/
margin:0pxauto;
/*⽔平居中⽂字*/
text-align:center;
}
当⼀个div元素设置margin：0auto;时就会居中盒⼦，那我们知道margin:0auto;表⽰上下外边距离为0，左右为auto的距离，那么auto是什么
意思呢？
设置margin-left:auto；我们发现盒⼦尽可能⼤的右边有很⼤的距离，没有什么意义。当设置margin-right:auto；我们发现盒⼦尽可能⼤的左
边有很⼤的距离。当两条语句并存的时候，我们发现盒⼦尽可能⼤的左右两边有很⼤的距离。此时我们就发现盒⼦居中了。
另外如何给盒⼦设置浮动，那么margin:0auto失效。
使⽤margin：0auto;注意点：
1.使⽤margin:0auto;⽔平居中盒⼦必须有width，要有明确width，⽂字⽔平居中使⽤text-align:center;
2.只有标准流下的盒⼦才能使⽤margin:0auto;
当⼀个盒⼦浮动了，固定定位，绝对定位(后⾯会讲)，margin:0auto;不能⽤了
：0auto;居中盒⼦。⽽不是居中⽂本，⽂字⽔平居中使⽤text-align:center;
另外⼤家⼀定要知道margin属性是描述兄弟盒⼦的关系，⽽padding描述的是⽗⼦盒⼦的关系
⼆，善于使⽤⽗亲的padding，⽽不是margin
如果让⼤家实现如图的效果，应该有不少的同学做不出来。
那么我们来看看这个案例，它的坑在哪⾥？
下⾯这个代码应该是⼤家都会去写的代码。
margin塌陷
*{
padding:0;
margin:0;
}
.father{
width:300px;
height:300px;
background-color:blue;
}
.xiongda{
width:100px;
height:100px;
background-color:orange;
margin-top:30px;
}
因为⽗亲没有border，那么⼉⼦margin-top实际上踹的是“流”踹的是⾏,所以⽗亲掉下来了，⼀旦给⽗亲⼀个border发现就好了。
那么问题来了，我们不可能在页⾯中⽆缘⽆故的去给盒⼦加⼀个border，所以此时的解决⽅案只有⼀种。就是使⽤⽗亲的padding。让⼦盒
⼦挤下来。