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)