CSS转换为什么会影响站点宽度？
鲨鱼
我一直给人的印象是CSS转换是纯粹的视觉效果，不会以任何方式影响实际的网站布局。我最近在我的项目中发现了一个怪异的错误，其中一个从视口转换出来的图像（以后飞进去）改变了页面的宽度。
我和我的同事对此感到非常困惑。我在下面提供了一个示例（也在此处托管：https : //transform-confusion.netlify.app/），该示例显示了transform: scale(2)将div应用于div完全改变浏览器宽度的现象。
我是否只是误解了CSS的工作原理，这是一个奇怪的浏览器错误还是这里发生了什么？
此处和视频中使用的源代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<style>
body {
border: 2px dotted black;
}
.scale {
transform: scale(2);
transform-origin: top left;
}
.scalable{
background: lightblue;
padding: 5px;
}
</style>
</head>
<body>
<h1>This is a test</h1>
<button>Toggle transform</button>
<div class="scalable">
Why does the Site start scrolling horizonally from a simple transform?
<pre>transform: scale(2)</pre>
</div>
<script>
const scalable = document.querySelector(".scalable");
document.querySelector("button").addEventListener("click", () => {
scalable.classList.toggle("scale");
})
</script>
</body>
</html>
陪同Afif
我总是给人一种印象，即CSS转换纯粹是视觉上的，不会以任何方式影响实际的网站布局
这是正确的，因为变换不会影响任何其他元素的位置，并且布局将保持不变。
您面临的问题与溢出有关：
框的可滚动溢出是延伸到框的填充边缘外部的一组东西，为此需要提供滚动机制。
可滚动溢出区域是可滚动溢出所占据的非矩形区域，可滚动溢出矩形是其轴与框的轴对齐且包含可滚动溢出区域的最小矩形。
..所有包含边框的框的边框，其边框不完全位于其框起始或行内填充边缘之外，通过将每个框投影到所建立元素的平面上来解决转换问题其3D渲染上下文。参考
因此，变换是Scrollable Overflow的一部分
您会发现某些属性是墨水溢出的一部分，并且该属性不会产生滚动：
盒子的墨水溢出是该盒子及其内容的一部分，可在盒子的边框之外创建视觉效果。墨水溢出是指定义的绘画效果溢出，不会影响布局或以其他方式扩展可滚动溢出区域，例如框阴影，边框图像，文本装饰，悬空字形（带有负侧轴承，或在em外部延伸的上升/下降通道）框），轮廓等。
例如box-shadow永远不会创建滚动
.box {
width:100px;
height:100px;
background:red;
box-shadow:0 0 0 1000vmax blue;
}<div class="box"></div>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
编辑于
相关文章
TOP 榜单
- 1
计算数据帧R中的字符串频率
- 2
Android Studio Kotlin：提取为常量
- 3
Excel 2016图表将增长与4个参数进行比较
- 4
获取并汇总所有关联的数据
- 5
如何使用Redux-Toolkit重置Redux Store
- 6
http：// localhost：3000 /＃！/为什么我在localhost链接中得到“＃！/”。
- 7
将加号/减号添加到jQuery菜单
- 8
算术中的c ++常量类型转换
- 9
TYPO3：将 Formhandler 添加到新闻扩展
- 10
TreeMap中的自定义排序
- 11
如何开始为Ubuntu开发
- 12
在 Python 2.7 中。如何从文件中读取特定文本并分配给变量
- 13
无法使用 envoy 访问 .ssh/config
- 14
在Ubuntu和Windows中，触摸板有时会滞后。硬件问题？
- 15
遍历元素数组以每X秒在浏览器上显示
- 16
在Jenkins服务器中使用Selenium和Ruby进行的黄瓜测试失败，但在本地计算机中通过
- 17
警告消息：在matrix（unlist（drop.item），ncol = 10，byrow = TRUE）中：数据长度[16]不是列数的倍数[10]>？
- 18
未捕获的SyntaxError：带有Ajax帖子的意外令牌u
- 19
如何使用tweepy流式传输来自指定用户的推文（仅在该用户发布推文时流式传输）
- 20
尝试在Dell XPS13 9360上安装Windows 7时出错
- 21
如果从DB接收到的值为空，则JMeter JDBC调用将返回该值作为参数名称
我来说两句