code前端网css绝对定位和溢出的可见与不可见
我在为首页创建周年纪念主题皮肤时遇到了问题。写了个demo，然后又遇到了问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.main {
width: 1200px;
height: 900px;
margin: auto;
position: relative;
}
.main-banner {
width: 1200px;
height: 100%;
background: pink;
}
.banner-plugins {
position: absolute;
top: 0;
}
.banner-bg-left {
left: -311px;
}
.banner-bg-right {
right: -293px;
}
</style>
</head>
<body>
<div class="main">
<img class="banner-plugins banner-bg-left">
<img class="banner-plugins banner-bg-right">
<div class="main-banner"></div>
</div>
</body>
</html>
复制代码效果如下
但是也有类似的问题。问题是，当视口宽度小于内容宽度时，会出现水平滚动条↓
这对用户体验影响较大，不是我们想要的效果。我们想要的效果应该是当宽度不够的时候，就应该进行修剪。两侧图像的宽度填充内容的宽度。这个位置是一个知识点，为什么会出现滚动条呢？ W3C 标准规定： 通常，盒子的内容仅限于盒子的边界。但有时会发生溢出，即部分或全部内容超出了框架的边界。当满足以下任一条件时，就会发生溢出：
- 展开的线元素的宽度超过容器框的宽度。
- 将一个固定宽度的块元件放入比这个窄的容器盒中。
- 元素的高度超过容器盒的高度。
- 一个后代元素，其中一些内容由于负边距值而落在框外。
- text-indent 属性导致内联元素位于框的左右边界之外。
- 绝对定位的后代元素，其某些内容位于框外。但多余的部分并不总是被剪掉。后代元素的内容不会被父元素在后代元素及其关联块之间的溢出设置截断。
我们看到的是第6条，感觉很难发音。大致意思是，如果我来自火星，那么秀恩爱并不违法。你来到地球后，有规则，表达爱意是违法的，但是嘿，这不关我的事。那就是我的意思。 （包含有积木的知识点）
找到问题的原因，就能找到解决办法。目标是当内容区域超过可见区域时隐藏它！
想到添加一个overflow-x:隐藏在body上很正常。当然，效果确实达到了。但是，如果中心的主要部分是1200px，我希望如果可见区域小于1200px，就会出现水平滚动条。但将其添加到体内后，却无法达到这样的效果。可以做什么？最好的方法是将其更改为背景图像。
以上就是这次皮肤更新的陷阱。听说duty也陷入了陷阱，所以我想分享一下。
好吧，我在编写演示时遇到了问题。还是一开始的代码。当可视区域的宽度小于内容的宽度时，会出现水平滚动条。这时我就会发现一个问题。当我缩小并且查看区域的宽度到达滑块时，您会发现左侧的图像被截断，但右侧的图像会溢出，拉动滑块就可以看到所有图像。为什么左边被切掉了？
当我将可见区域的宽度调整到刚好1200时，我发现body + 溢出的内容正好等于粉色部分+右侧图像的宽度 我想了很久，个人的评价是：因为绝对定位是和文档流分开了。 嗯，怎么理解呢。文档流就是当元素被打字和格式化的时候，元素会自动从左到右，从上到下排列，现在是这样排列的没有css的顺序，但是脱离了文档流就不一样了，脱离了文档流之后，不一定和文档的写入顺序以及原来正常文档占用的空间一致流量消失了。 结合上图来理解，我的想法是这样的： Element Layout 在布局时，因为可见区域的宽度正好等于文档流中粉色部分的宽度，所以有绝对定位的左边部分没有空间了，粉红色的部分靠近浏览器边缘，再看看绝对定位在文档流之外的部分。左边的部分被CSS推到了左边，但是在可见区域你只能看到粉红色的部分。粉色部分已经接近边缘，滚动条也接近左侧。即使当滚动条出现后，你就不能再向左滑动了，对吗？因此，左侧部分是看不见的，但大教堂结构仍然存在。换句话说，即使我们看不到左边的部分，它仍然在我们身边。 浏览器不断渲染，当涉及到右块的绝对定位时，我们仍然看不到这一点，因为宽度不允许。但由于溢出，会出现滚动条，所以滑动滚动条将其移动到可见的位置。在观看区域中可见。 如果可视区域大一点，增加粉色部分的宽度，看看效果如何 根据上面的说法，从左到右显示时，粉色部分排列在可视区域内这已经足够了 在内部，渲染绝对定位的元素时，可见区域除了正常的文档流宽度 1291-1200=91 之外，还有 91px 的宽度。这个宽度是留给文档流外的元素平均划分可见区域的（因为粉色居中），这样在CSS的影响下左边的部分占据了粉色部分的左边位置，可见宽度为46px（为什么它不是 45.5，那是另一回事）。同样，只能看到右边的。在某个时刻，由于溢出而出现滚动条，并且滚动可见。 作者：二姑娘是个好姑娘”data-src =“https://user-gold-cdn.xitu.io/2019/2/14/168eb037054c9dcd?imageView2/0/w/1280/h/960/format/webp/ignore- error/ 1" height="20" data-width="1280" data-height="668" />
链接：https://juejin.im/post/5c64ff216fb9a049fd105ae6
来源：掘金
版权归作者所有。商业转载请联系作者获得许可。非商业转载请注明出处。
版权声明
本文仅代表作者观点，不代表Code前端网立场。
本文系作者Code前端网发表，如需转载，请注明页面地址。
