我真的很困惑如何使用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 }
我希望这与单个100×100蓝色方块相似.但是它被移动并且在铬上甚至略微重叠了下面的p元素.此外,检查devtools中#scaled的尺寸显示为蹲下和长时间,似乎超出它的100×100盒子.
最后,添加溢出:隐藏;到#scaled完全疯了.
到底是怎么回事?内容流如何受到影响?
解决方法
CSS Transform不会影响文档流. DOM元素将占用页面流中的原始位置和尺寸.
因此,如果你有3个相同大小的方形div,连续显示内联并将-webkit-transform:scale(2)应用到中心方块,这个方块将扩大到200%,从原来的中心开始缩放位置,并与其他两个方块重叠.
参考示例:
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; }
原文地址:https://www.jb51.cc/css/215122.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。