css定位新发现

最新推荐文章于 2024-03-21 15:08:16 发布

@大熊

最新推荐文章于 2024-03-21 15:08:16 发布

阅读量42

点赞数

分类专栏：笔记 css 文章标签： css3

本文链接：https://blog.csdn.net/qq_51558433/article/details/118529378

版权

笔记同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

css

1 篇文章 0 订阅

订阅专栏

en~~~~~~
定位的元素子元素撑满父元素
新发现，发现一种写法，有两个div，是父子关系，
父元素设置了宽高，以及绝对定位，
子元素如何撑满父元素，不用宽高的情况下，
就是让子元素，也绝对定位，top/left/right/bottom都设置为0就好了，
发现新大陆，哦吼吼~~

<style>
    .box {
      width: 500px;
      height: 500px;
      background-color: #f00;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
    .mask{
      position: absolute;
      left:0;
      top: 0;
      right: 0;
      bottom: 0;
      
     
      background-color: #000;
      opacity: .5;
      color: #fff;

      display: flex;
      justify-content: center;
      align-items: center;
    }
  </style>
</head>

<body>
   <div class="box">
     <div class="mask"></div>
   </div>

优惠劵

@大熊

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css定位新发现

en~~~~~~新发现，发现一种写法，有两个div，是父子关系，父元素设置了宽高，以及绝对定位，子元素如何撑满父元素，不用宽高的情况下，就是让子元素，也绝对定位，top/left/right/bottom都设置为0就好了，发现新大陆，哦吼吼~~<style> .box { width: 500px; height: 500px; background-color: #f00; position: absolute;
复制链接

扫一扫