gpt4 book ai didi

css - css scale transform如何影响文档流?

转载 作者:技术小花猫 更新时间:2023-10-29 11:08:45 24 4
gpt4 key购买 nike

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

Consider this jsbinthis 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 蓝色方 block 的方式显示。但是它被移动了,在 chrome 上什至与下面的 p 元素稍微重叠。此外,在 devtools 中检查 #scaled 的尺寸显示为又短又长,似乎超出了它的 100x100 框。

最后,将 overflow: hidden; 添加到 #scaled 会做一些疯狂的事情。

这是怎么回事?内容流应该如何受到影响?

最佳答案

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 - css scale transform如何影响文档流?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14386948/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com