css中 top, right, bottom, left设置为0有什么用？css中，width: 100% 和 width: auto的区别？

. . . . .

已于 2024-04-27 20:29:56 修改

阅读量8.5k

点赞数 22

分类专栏：前端开发文章标签： css 前端

于 2019-10-07 17:37:47 首次发布

本文链接：https://blog.csdn.net/yexudengzhidao/article/details/102314727

版权

前端开发专栏收录该内容

350 篇文章 19 订阅

订阅专栏

css中 top, right, bottom, left设置为0有什么用？

一. 引言

当我们使用position属性时，总免不了与top，left，right，bottom四个属性打交道，那么这四

个属性都设置为0时有什么用，与宽高设置100%又有什么区别？本文对此展开讨论。

二. 关于top left right bottom

position定位属性大家都不会陌生，添加position属性的元素可以定位，而top，left，right，

bottom属性决定元素定位后所在的位置，而在使用定位属性需要注意两点：

top，left, right, bottom 此类定位属性只对添加了position属性且值为非static的元素生效，即值为fixed，absolute，relative 其一。
在使用top，left，right与bottom属性时一般只设置两个属性进行定位，比如常见的top与left为一对，设置了top一般不会再设置bottom。

而四个同时设置时，我们常见就是值为0，那么四个值设置0有哪些使用场景，一般有两种：

1.让明确宽高的盒子垂直水平居中

<div class="parent">
    <div class="child"></div>
</div>

.parent {
    width: 200px;
    height: 200px;
    background: #ffb6b9;
    position: relative;
}

.child {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #8ac6d1;
    margin: auto;
}

在这里插入图片描述

注意：
通过设置top，left四属性为0居中元素的做法有个前置条件，就是需要居中的盒子必须有固定的宽高(px)，否则会失效。这就像四个方向有相同的力在拉这个盒子，配上margin:auto让这个盒子的位置保持中立，来达到盒子处于正中心的目的。

2. 让无宽高的盒子填满父容器

在做弹窗或者loading效果时，我们往往会给弹窗加一个半透明的黑色遮罩，用于凸显核心内

容；当父容器宽高不确定时，遮罩的宽高也无法确定，除了设置width:100%，height:100%

外，设置top，right四属性为0就是第二做法。

.child {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.2);
}

在这里插入图片描述

也可以不拉满，会有更好玩的效果：

<style>
    .parent {
        width: 200px;
        height: 200px;
        background: #ffb6b9;
        position: relative;
    }
    .child {
        position: absolute;
        top: 10px;
        left: 10px;
        right: 10px;
        bottom: 10px;
        /*width: 80%;*/
        /*height: 80%;*/
        background: green;
    }
</style>
<body>
<div class="parent">
    <div class="child"></div>
</div>
</body>

在这里插入图片描述

css中，width: 100% 和 width: auto的区别

CSS 中 width: 100% 和 width: auto 有以下区别:

填充可用空间
- width: 100%: 将元素的宽度设置为父容器的 100%,即占满父容器的宽度。
- width: auto: 根据元素的内容自动调整宽度,不会占满整个父容器。
响应性
- width: 100%: 当父容器的宽度改变时,子元素的宽度也会相应变化。
- width: auto: 当父容器的宽度改变时,子元素的宽度不会随之变化,而是保持原有的宽度。
最大宽度
- width: 100%: 元素的宽度会被限制在父容器的宽度之内。
- width: auto: 元素的宽度不会被限制,可能会超出父容器的宽度。
默认值
- 对于块级元素,width 属性的默认值是 auto。
- 对于内联元素,width 属性的默认值也是 auto。

总的来说:

width: 100% 用于填充父容器的宽度,通常用于响应式布局中。
width: auto 允许元素根据内容自适应宽度,通常用于内联元素或不需要限制宽度的情况。

选择使用哪种方式,取决于您的具体需求和设计要求。在某些情况下,可能需要结合使用这两种方式来实现理想的布局效果。

. . . . .

关注

22
点赞
踩
59

收藏

觉得还不错? 一键收藏
打赏
1
评论
css中 top, right, bottom, left设置为0有什么用？css中，width: 100% 和 width: auto的区别？

一. 引言当我们使用position属性时，总免不了与top，left，right，bottom四个属性打交道，那么这四个属性都设置为0时有什么用，与宽高设置100%又有什么区别？本文对此展开讨论。二. 关于top left right bottomposition定位属性大家都不会陌生，添加position属性的元素可以定位，而top，left，right，bottom属性决定元素定位...
复制链接

扫一扫