美文网首页
关于设置百分比宽高失效的问题

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

作者: 人话博客 | 来源:发表于2019-03-26 00:52 被阅读0次

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

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

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

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

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

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


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

     <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

    相关文章

      网友评论

          本文标题:关于设置百分比宽高失效的问题

          本文链接:https://www.haomeiwen.com/subject/iyqwvqtx.html