css 关于auto那些事
对于auto属性很多人还是不陌生，很久没有写博客，年底到来，是该粗劣的发表一下个人成长，仅供自己后期学习：
- 将一个元素属性设置为auto，或不设置，又有何区别
- 块类元素属性为auto时，将占满剩余空间
- 行内和行内块元素属性设置auto，设置margin=auto 不起作用
- 绝对定位如果只有一个属性为auto，侧占满剩余空间
- 如果将一个替换元素的宽度设置为auto，宽度等于内在宽度
1 有何不同
如果只有一个值设置为auto，那么它的计算值为剩余的空间，例如：
<style>
body,div{
margin:0;
padding:0;
}
div{
width:100px;
margin:0 auto;
background:#ddd;
}
</style>
<div class='box'>
CYZ
</div>
如果修改代码:
div{
width:100px;
margin-right:auto;
background:#ddd;
}
相当于对于margin-right右边的空间自动填充满的效果，
2 行内元素和行内块元素，auto不受影响
<style>
span{
margin-left:auto
}
<span>cyz</span>
</style>3设置元素水平和垂直居中效果
body,div{
margin:0;
padding:0;
}
div{
position:absolute;
width:100px;
left:0;
right:0;
margin:0 auto;
background:#ddd;
}
<div>cyz</div>
如果让元素水平居中left:0;right:0;
<style>
body,div{
margin:0;
padding:0;
}
div{
position:absolute;
width:100px;
left:0;
right:0;
margin: auto;
background:#ddd;
top:0;
bottom:0;
height:100px;
}
</style>
<body><div>cyz</div></body>
如果top:0;bottom:0;margin:auto;元素就是水平垂直居中。
提示：绝对定位元素包含块的宽=（left+margin-left+border-left-width+padding-left+width+padding-rigth+border-right-width+margin-right+right）