主页 / 问题 / 947552
Accepted
MaximPro
Asked:2020-02-21 18:25:39 +0000 UTC2020-02-21 18:25:39 +0000 UTC

转换容器内的内容

  • 772

问题是在使用属性时，transform父元素忽略了子元素大小的增加。

示例 1：使用宽度和高度的子容器

.main {
  display: inline-flex;
  background: green;
  padding: 10px;
}

.element {
  display: block;
  background: red;
  width: 100px;
  height: 100px;
}
<div class="main">
  <div class="element"></div>
</div>

示例 2：使用变换的子容器

.main {
  display: inline-flex;
  background: green;
  padding: 10px;
}

.element {
  display: block;
  background: red;
  width: 100px;
  height: 100px;
  transform: scale(1, 2);
}
<div class="main">
  <div class="element"></div>
</div>

如何让它考虑transform到父容器？

html

2 个回答

  1. 问题是转换不会增加元素 - 只会发生视觉变化。如果我们使用 js 请求转换后元素的尺寸，结果发现它们保持不变：

    let elem = document.getElementsByClassName('element')[0];
let styles = getComputedStyle(elem);
console.log('ширина: '+styles.width);
console.log('высота: '+styles.height);
    .main {
  display: inline-flex;
  background: green;
  padding: 10px;
  margin: 50px;
}

.element {
  display: block;
  background: red;
  width: 100px;
  height: 100px;
  transform: scale(1, 2);
}
    <div class="main">
  <div class="element"></div>
</div>

    因此，如果父元素需要对子元素的变化做出反应，要么尺寸本身必须改变，要么父元素也必须与“女儿”同时发生变化。

    • 1
  2. Best Answer

    CSS 转换模块级别 1规范说明如下：

    对于布局由 CSS 框模型控制的元素，transform 属性不会影响转换后元素周围的内容流

    对于布局受 CSS 盒子模型控制的元素，transform 属性不会影响转换后元素周围内容的流动

    PS 为了拉伸父容器，你将不得不使用 js。

    • 1

相关问题