为什么scale CSS 变换函数不影响margin？
Tzo*_*Noy 6 css margin scale css-transforms
我有一个包含其他几个 div 和元素的 div。
现在我想用 transform: scale(n)
但是当我使用它时，一切看起来都很好，除了内部div的边距保持相同的大小但是内部元素的宽度发生了变化
正如您所看到的，div 的大小减少了一半......但边距是相同的：/
例如代码，您在父级中有一个 div。这个子 div 的边距为 100px
如果我更改父级的比例，子级的边距保持不变，但大小不变。您可以看到孩子在改变比例时没有移动。
.holder {
background: pink;
transform: scale(0.5);
}
#son {
margin-top: 100px;
padding: 20px;
background: green;
}<div class="holder">
<div id="son">
dontcare
</div>
</div>太长了；博士
变换与参考框相关，参考框由默认为 的transform-box属性设置border-box。边框由边框界定。因此，缩放转换将缩放边框内并包括边框（边框、填充、内容框）的所有内容。
长答案
我将从以下示例开始我的回答：
button {
padding: 10px;
margin: 10px;
}
.scaled {
transform: scale(2);
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<button class="default">Button</button>
<button class="scaled">Button</button>
</body>
</html>有两个按钮。两者都给出了 10px 的内边距和 10px 的边距（以及默认的浏览器样式）。第二个缩放因子为 2。
在 Firefox 58 中，第一个按钮呈现以下属性：
我们将重点关注水平轴的属性和值：
34.7167 // Content box width
10 // Padding left
10 // Padding right
7 // Border left
7 + // Border right
------------
68.7167
------------
10 // Margin left
10 // Margin right
如果将除边距之外的所有内容相加，您将得到元素宽度。不包括保证金。这是因为浏览器将元素框定义为内部的所有内容（包括边框）。此行为由box-sizing规则集指定border-box。
那么，这如何影响scale变换函数而不缩放边距呢？
变换是相对于参考框发生的。参考框由默认值为 的transform-box属性定义border-box。因此，边框、内边距和内容框尺寸将缩放 2，而边距则不会。
可以在第二个按钮中观察到此行为，该按钮已缩放：
再次查看横轴的属性和值：
34.7167 * 2 = 69.4334 // Content box width
10 * 2 = 20 // Padding left
10 * 2 = 20 // Padding right
7 * 2 = 14 // Border left
7 * 2 = 14 + // Border right
-----------------------------
68.7167 * 2 = 137.4334
-----------------------------
10 // Margin left
10 // Margin right
进一步阅读
转换确实会影响视觉渲染，但除了影响溢出之外，对 CSS 布局没有任何影响。
\n\n来自W3.org\xe3\x80\x8a变换渲染模型\xe3\x80\x8b标准
\n\n和演示在这里：
\n\nconsole.log(\'getComputedStyle:height: \' + getComputedStyle(box).height);\r\nconsole.log(\'getComputedStyle:width: \' + getComputedStyle(box).width);#box {\r\n width: 100px;\r\n height: 100px;\r\n background: pink;\r\n transform: scale(2, 2);\r\n}<div id="box">\r\n box\r\n</div>\n\n\n但是当我使用它时，一切看起来都很好，除了内部 div 的边距\n 保持相同的大小，但内部元素的宽度\n 发生了变化
\n
可以使用getComputedStyle发现内部元素宽度没有改变；
\n| 归档时间： |
|
| 查看次数： |
4971 次 |
| 最近记录： |