CSS绝对定位(absolute)同时设定left right,或者top bottom

渲染的时候会尽量满足,相当于设置了width=100%,height=100%,可以利用margin:auto实现水平/垂直居中

<!DOCTYPE html>
<html>
<head>
  <title>document</title>
  <style>
      .container{
          width:100px;
          height:100px;
          position:relative;
      }
      .inner-box{
          background:#000;
          left:0;
          top:0;
          bottom:0;
          right:0;
          position:absolute;
      }
  </style>
</head>
<body>
    <div class="container">
        <div class="inner-box"></div>
    </div>
</body>
</html>

在线看效果

例子效果

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS中的定位属性是布局控制的重要工具,它主要有两种主要方式:绝对定位absolute positioning)和相对定位(relative positioning)。 **1. 相对定位 (Relative Positioning)**: - 原则:相对定位是基于元素的正常文档流来进行定位的。如果设置了`position: relative;`,元素会保持其在文档中的默认位置,然后可以通过`top`, `right`, `bottom`, 和 `left` 属性指定偏移量。 - 行为:相对定位的元素不会影响到其他元素的位置,它会在原位置的基础上移动,同时周围的元素会围绕它移动。 - 示例:你可以使用相对定位来创建一个弹出框或浮动元素。 **2. 绝对定位 (Absolute Positioning)**: - 原则:绝对定位元素会脱离正常的文档流,完全根据`top`, `right`, `bottom`, `left` 属性以及`position: absolute;`声明来定位,与最近的已定位(`position: relative;`)祖先元素相关联,如果没有,则相对于视口(浏览器窗口)定位。 - 行为:绝对定位元素会完全离开其在文档中的原始位置,其他元素也不会因此受到影响,除非它们也设置为绝对定位并覆盖了该元素。 - 示例:通常用于创建固定在页面某个角落的导航菜单或图片,或者是响应式的网页设计中,如轮播图中的图片。 **相关问题**: 1. 相对定位和绝对定位有什么区别? 2. 如何使用`position: relative;`和`position: absolute;`来配合使用? 3. 绝对定位的`z-index`属性有什么作用?

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值