2021.11.18 每天进步一点点：由left:50%引发的盒子宽度问题及解决

最新推荐文章于 2023-04-25 15:14:17 发布

新生代农民工官方认证码农小拽

最新推荐文章于 2023-04-25 15:14:17 发布

阅读量1k

点赞数

分类专栏： CSS 文章标签：其他 css3 javascript

本文链接：https://blog.csdn.net/tuzi007a/article/details/121397686

版权

CSS 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

这里写目录标题

发现问题

有这么个例子：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      position: relative;
      width: 300px;
      height: 500px;
      margin: auto;
      margin-top: 20px;
      background-color: pink;
    }
    .box1 {
      position: absolute;
      top: 50%;
      left: 50%;
      text-align: center;
      background-color: cadetblue;
    }
    .box2 {
      position: absolute;
      top: 10px;
      left: 10px;
      width: 50px;
      height: 50px;
      background-color: blue;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="box1">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</div>
  </div>
</body>
</html>

显示在浏览器里的样式为：

在这里插入图片描述

子盒子是绝对定位，给定子盒子向左偏移量为父盒子宽度的50% ，

子盒子不设置固定宽度，

可以看到一个现象：

内容超过一行后开始换行，子盒子宽度为父盒子宽度的一半。

那么，我们再验证一下，子盒子和父盒子宽度的关系。

只需要把字数减少，看下子盒子宽度的变化：

在这里插入图片描述
此时，子盒子宽度是刚好包裹住字数的宽度。

所以，可以得出一个结论：

当子盒子为绝对定位absolute, fixed等，子盒子不设置固定宽度，

此时子盒子的最小宽度就是自身内容的宽度， 最大宽度就是 父盒子宽度 - left偏移量。

在不设置子盒子固定宽度的情况下，子盒子内容不会超出父盒子的范围。

但是，在平时业务需求中，我们需要的是如果子盒子内容较多，他的宽度应该和父盒子一样的宽度。

这时不免会有疑问：

为啥会出现这种情况？

该怎么解决？

分析问题

分析思路

最初，我认为是left属性有什么特殊，比如继承百分比宽度。

所以，我查了很多关于left的文档。

但是并没有发现什么问题。

然后，我考虑到了定位情况下，会出现BFC，即块级格式化上下文，

会不会是BFC产生了什么影响呢？

回顾了一下BFC概念，也没发现什么问题。

还有哪种可能呢？

又仔细写了几个demo，

发现了子盒子和父盒子宽度的变化规律，

于是有个猜想：会不会是父盒子有什么特殊性？

于是，多番查找资料后，最终锁定问题，

是出现在了包含块上。

锁定问题

为了理解这个问题，

这里不得不提一个css布局的重要概念： 包含块（即定位上下文）

简单来说，就是我们写的css盒子，都是由另一个块级盒子包裹住的，

正如我们上面的例子里，box1的包含块是box， box的包含块是body 。

里面的盒子，正是受到了包含块的影响，才会出现如上问题。

说说包含块：关于包含块的那些事儿

包含块的四种情况

html的包含块document 。可以由开发人员决定，因为html也可以放在iframe里。
浮动元素的包含块是最近的块级父元素。
相对定位relative或静态定位static元素包含块由最近的块级框、表单元格、或行内块框祖先元素（任何类型）内容边界构成。
绝对定位元素absolute fixed sticky包含块设置为最近的定位不是static的祖先元素（任何类型）的边框界定（对块级父元素）或内容边界界定（对行内父元素）。

包含块对绝对定位的子盒子做了什么

根据包含块的四种情况可以发现，

子盒子被包含块给限定了边界，

而且，子盒子的宽度和位置，是取决于包含块的，

这才导致了我们最初提到的情况。

也就是说，子盒子在没有设置固定宽度时，

子盒子的宽度已经被包含块给限定了，

不管子盒子怎么移动，怎么偏移，最终都要被限定在包含块的边界内。

这像极了逃不出如来佛祖手掌心的孙猴子。。

为了更好的理解这个概念，这里写几个demo看下。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      position: relative;
      width: 300px;
      height: 500px;
      margin: auto;
      margin-top: 20px;
      background-color: pink;
    }
    .box1 {
      position: absolute;
      top: 100px;
      left: 50px;
      text-align: center;
      background-color: cadetblue;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="box1">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</div>
  </div>
</body>
</html>

看下效果图：

在这里插入图片描述
此时包含块的宽度是300px，

给子盒子设置偏移量为50px时，

子盒子的最大宽度是250px。

因为偏移后的位置到包含块的右侧边界，最大是250px。

现在把子盒子的偏移量设置为100px，

包含块宽度不变，

在这里插入图片描述
可以发现，

子盒子宽度最大值相应的变成了200px。

到此，我们验证了子盒子和包含块的一些逻辑关系。

解决问题

既然了解了这个问题及其背后逻辑，

那么解决问题就简单了。

设置固定宽度

首先，

给子盒子设置固定宽度。

比如，我们给子盒子宽度设置为200px，

然后修改demo，重新测试：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      position: relative;
      width: 300px;
      height: 500px;
      margin: auto;
      margin-top: 20px;
      background-color: pink;
    }
    .box1 {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 200px;
      text-align: center;
      background-color: cadetblue;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="box1">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</div>
  </div>
</body>
</html>

看下结果：

在这里插入图片描述

这时，就解决了宽度问题。

但是，实际开发中，我们可能不希望有固定的宽度，这要怎么做呢？

内容为文字时设置为不换行

即不设置固定宽度，但是不让文字内容换行：

white-space: nowrap;

如下完整代码测试：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      position: relative;
      width: 300px;
      height: 500px;
      margin: auto;
      margin-top: 20px;
      background-color: pink;
    }
    .box1 {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      white-space: nowrap;
      text-align: center;
      background-color: cadetblue;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="box1">哈哈哈哈哈哈哈哈哈哈哈哈哈哈</div>
  </div>
</body>
</html>

可以看到如下效果：

在这里插入图片描述

这样也可以达到目的。

但是，这个方法仍然有局限性。当文字比较多时，或者内容不是文字时，

这种方法就不能用了。

用魔法打败魔法的方法

既然以上两个方法都有局限性，主要是宽度的问题，

那么我们反过来思考一下：

包含块不是对子盒子有影响吗，

那么我们为何不用一个更大的盒子作为包含块呢，

比如说

我们的内容盒子需要100px的宽度，

那么我们让包含块的宽度达到200px甚至更多，不就可以了吗？

写个demo测试一下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      position: relative;
      width: 300px;
      height: 500px;
      margin: auto;
      margin-top: 20px;
      background-color: pink;
    }
    .box1 {
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background-color: rgba(95, 158, 160, .4);
      pointer-events: none;
    }
    .box2 {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: blueviolet;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="box1">
      <div class="box2">
        哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
      </div>
    </div>
  </div>
</body>
</html>