css 关于auto那些事

最新推荐文章于 2024-01-04 09:52:19 发布

cyadyx

最新推荐文章于 2024-01-04 09:52:19 发布

阅读量330

点赞数

分类专栏： css 文章标签： css 关于auto

本文链接：https://blog.csdn.net/cyadyx/article/details/79309108

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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）

cyadyx

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css 关于auto那些事

css 关于auto那些事对于auto属性很多人还是不陌生，很久没有写博客，年底到来，是该粗劣的发表一下个人成长，仅供自己后期学习：将一个元素属性设置为auto，或不设置，又有何区别块类元素属性为auto时，将占满剩余空间行内和行内块元素属性设置auto，设置margin=auto 不起作用绝对定位如果只有一个属性为auto，侧占满剩余空间如果将一个替换元素的宽度设置为auto，...
复制链接

扫一扫

专栏目录