Question

我真的很困惑如何使用css转换来缩放元素会影响文档流。

我有

Consider this jsbin或this codepen since jsbin seems to have gone down

p{slipsum text}
#scaled
  #scaled-content{some text}
p{slipsum text}

使用样式表

#scaled-contents {
  height: 400px;
  width: 400px;
  background-color: blue;
  color: red;
  font-size: 3em;
}

#scaled {
  transform: scale(0.25, 0.25); //browser prefixes...
  width: 100px;
  height: 100px
}

我希望这与单个100x100蓝色方块相似。但是它被移动并且在铬上甚至略微重叠了下面的p元素。此外，检查devtools中#scaled的尺寸显示为蹲下和长时间，似乎突破了100x100的盒子。

最后，将overflow: hidden;添加到#scaled会让事情变得疯狂。

发生了什么事？内容流如何受到影响？

Answer 1

CSS变换不会影响文档流。 DOM元素将占用页面流中的原始位置和尺寸。

因此，如果你有3个相同大小的方形div，连续显示内联并将-webkit-transform：scale（2）应用到中心方块，这个方块将扩大到200％，从中心开始缩放它的原始位置，并与其他正方形重叠。

参考例：

http://jsfiddle.net/ypnEk/

HTML：

<div class="square one"></div>
<div class="square two"></div>
<div class="square three"></div>

CSS：

.square{
  margin-top:50px;
  width:50px;
  height:50px;
  display:inline-block;
}

.one{
  background:#222;
}

.two{
  background:#888;
  -webkit-transform: scale(2);
}

.three{
  background:#ccc;
}

css规模变换如何影响文档流？

1 个答案: