关于设置百分比宽高失效的问题

有时候在写页面样式会设置百分比来控制一个元素的宽高.

我们也都知道百分比是从父元素的宽高计算而来的.

但有时候,结构写的太多了,复杂了,偶尔会出现设置百分比失效的情况.

由于界面结构太复杂了,一时半会也找不到为什么百分比会失效.

也没有总结过一些规律.所以趁着这会儿有时间,专门研究了了一下.

什么情况下会导致百分比失效的问题.

---

当父元素的宽高都是写死的常量时

 <h3>情况一:父元素的高度宽度显式写出</h3>
  <div class="parent">
    <div class="child"></div>
  </div>

 .parent {
      /* w & h 显式写出了 */
      width: 200px;
      height: 200px;
      background: yellow;
    }

    .parent .child {
      width: 50%;
      height: 50%;
      background-color: black;
    }

image.png

结论:

当父级元素的宽高是以常量的方式显式的写出时,设置百分比是有效的.

---

当父级的宽高并没有写死,而是根据内部的内容撑开时

<h3>情况二:父元素的宽高没有显式写出,而是被内容撑大,是动态的.</h3>
  <div class="parent1">
    adjlsaj
    asdlsajdjsald
    AAAAAA
    <div class="child1"></div>
  </div>

 .parent1 {
      width: 200px;
      background: black;
      color: #fff;
      font-size: 50px;
      word-wrap:break-word;
    }
    .parent1 .child1 {
      /* 有效 */
      width: 100%;
      /* 无效 */
      height: 50%;
      background-color: pink;
      opacity: 0.3;
    }

image.png

发现只有宽度有效(因为父级显式的设置了200px).

而高度无效(高度是动态的,根据内部内容撑开,而非显式写出)

结论:

当父级的某个尺寸是动态计算,或者根据内容撑开,子元素设置这个尺寸的百分比就无效.

---

如果子元素从直接父级拿不到显式的宽高来计算自己的百分比,它会继续往上一层去拿吗?

<h3>情况三:直接父元素找不到确定的宽高,是否继续往上一级找?</h3>
  <div class="p">
    <div class="c">
      直接父级用内容撑开!
      直接父级用内容撑开!
      直接父级用内容撑开!
      直接父级用内容撑开!
      直接父级用内容撑开!
      直接父级用内容撑开!
      <div class="b"></div>
    </div>
  </div>

.p {
      width: 200px;
      height: 200px;
      background: black;
    }

    .p .c {
      width: 100%;
      /* 高度不设置,用内容撑开 */
      color: #fff;
      background: red;
    }

    .p .c .b {
      /* 有效 */
      width: 50%; 
      /* 找谁拿? .p 的 200px * 0.5 吗? */
      height: 100%;
      background: blue;
    }

image.png

发现并不会.

设置百分比,只会往上找一级,从自己的直接父元素来获取并计算.

百分比计算只涉及父子两层

---

设置百分比总结:

• 子元素只会从自己直接的父级找宽高数据来计算自己的百分比.
• 如果父级(非block.block宽度默认就是当前视口宽度,所以也相当于显式写出了.)没有显式的写出宽高,那么子元素计算百分比就会无效.

补充:

• 很多情况下,我们元素的宽高是不设置的,而是用内容撑开.所以,这种情况下,子元素利用百分比计算自己的高度基本是没戏的.
• 有时候,一些block元素,在加载到页面上时,浏览器会追加默认样式 display:block.所以,大多数情况下,block元素内部的子元素利用百分比计算自己的width都是有效的.之所以大多数情况下看不到,是因为此时子元素的高度为0