TL;博士

Question

我有一个包含其他几个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>

Answer 1

转换会影响可视化渲染，但除了影响溢出之外，不会影响CSS布局。

来自W3.org《The Transform Rendering Model》标准

并在此演示：

console.log('getComputedStyle:height: ' + getComputedStyle(box).height);
console.log('getComputedStyle:width: ' + getComputedStyle(box).width);

#box {
  width: 100px;
  height: 100px;
  background: pink;
  transform: scale(2, 2);
}

<div id="box">
  box
</div>

但是当我使用它时，一切看起来都很好，除了边距内部div的大小保持相同但内部元素的宽度是改变

你可以使用getComputedStyle来发现内部元素宽度没有改变;

Answer 2

您的第一个屏幕截图似乎显示transform-orginin的问题，默认情况下为50% 50% 0（元素的中心）。将其更改为top left，您的元素将按左上角缩放，因此边距将减少。

关于您分享的代码，这与规模无关，但您面临 margin-collapsing 问题。儿子的边缘与其父母的边缘一起崩溃，同样的事情发生，直到这个边缘被body边缘折叠。换句话说，边距不再属于缩放元素。

以下是带有margin-collpasing的初始代码：

body {
  background:linear-gradient(to bottom,#000 50%,transparent 0) 0 0/100% 100px;
}

.holder {
  animation:anim 3s infinite linear;
  transform-origin:top;
}

#son {
  margin-top: 100px;
  padding: 20px;
  background: green;
}

@keyframes anim {
  from {
    transform:scale(1);
  }
  to {
    transform:scale(0.3);
  }

}

<div class="holder">
  <div id="son">
    dontcare
  </div>
</div>

如果我们通过添加小填充来删除边距折叠，则使用相同的代码：

body {
  background:linear-gradient(to bottom,#000 50%,transparent 0) 0 0/100% 100px;
}

.holder {
  padding-top:1px;
  animation:anim 3s infinite linear;
  transform-origin:top;
}

#son {
  margin-top: 100px;
  padding: 20px;
  background: green;
}

@keyframes anim {
  from {
    transform:scale(1);
  }
  to {
    transform:scale(0.3);
  }

}

<div class="holder">
  <div id="son">
    dontcare
  </div>
</div>

您可以清楚地看到它们之间的差异。在第二个例子中，与第一个例子不同，边际被认为是比例。

以下是一些有用的链接以获取更多详细信息：

CSS margin terror; Margin adds space outside parent element

https://stackoverflow.com/a/9519933/8620333

What is the point of CSS collapsing margins?

https://css-tricks.com/what-you-should-know-about-collapsing-margins/

Answer 3

TL;博士

转换相对于由reference box设置的transform-box property，默认为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

如果你总计除了边距之外的所有内容，你将获得元素宽度。保证金不包括在内。这是因为浏览器将元素框定义为内部和包括边框的所有内容。此行为由设置为border-box的{{3}}规则指定。

那么这如何影响scale转换功能而不缩放保证金？

相对于box-sizing发生转换。引用框由reference box定义，默认情况下其值为border-box。因此，边框，填充和内容框尺寸将缩放2，而边距不是。

可以在第二个按钮中观察到此行为，该按钮已缩放：

transform-box property

再次，查看水平轴的属性和值：

    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转换功能不会影响保证金？

3 个答案:

TL;博士

长答案

进一步阅读