2021.11.18 每天进步一点点：由left:50%引发的盒子宽度问题及解决
这里写目录标题
- 发现问题
- 分析问题
- 分析思路
- 锁定问题
- 说说包含块：关于包含块的那些事儿
- 包含块的四种情况
- 包含块对绝对定位的子盒子做了什么
- 解决问题
- 设置固定宽度
- 内容为文字时设置为不换行
- 用魔法打败魔法的方法
- 设置全偏移法
- 参考文档
发现问题
有这么个例子：
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>Documenttitle><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>Documenttitle><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>Documenttitle><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>Documenttitle><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>Documenttitle><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>
这样， 内容盒子不就达到了预想中的最大宽度了么？
这个例子还可以根据实际业务需要，做相应的改善。
设置全偏移法
https://blog.csdn.net/tuzi007a/article/details/121420238
参考文档
https://developer.mozilla.org/zh-CN/docs/Web/CSS/Containing_blockhttps://www.cnblogs.com/sammiyu/p/my_tech1.htmlhttps://www.cnblogs.com/liuhao-web/p/7404619.html
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！