美文网首页我爱编程
width: 100%是相对于谁的?

width: 100%是相对于谁的?

作者: promise96319 | 来源:发表于2018-06-21 19:45 被阅读0次

问题:width: 100%是相对于谁的?

今天在接触到移动端的时候,遇到了一个比较常用的属性设置:width: 100%;。因为对这个属性的用法有些困惑,所以简单地总结了一下。

总结:属性 width:100%;使用情况主要有以下几种。

前提条件

  1. 子元素必须是块级元素才能实现宽度的继承
  2. 父级元素设置了宽度
  1. 当父级元素和子元素只是一般嵌套关系的时候,子元素继承父元素的宽。
  2. 当子元素浮动时,也可以完整的继承父元素的宽。
  3. 当子元素为position: absolute;的时候,这个时候子元素会逐级向上寻找是否有position: relative;的元素。如果有,则继承该元素;如果没有则宽度是相对于body而言。
  4. 当子元素为position: relative;时,width:100%是基于父级元素,而不是找position: relative;的元素
  5. --------特殊--------当元素被设置了postion: fixed的时候,是一直基于body的,其宽度就是body的宽度

补充一点:不论box-sizing设置为border-box还是content-box,width继承的都是‘父’级元素的内容区的宽度

参考:
width: 100%是相对于谁的?
如何让 height:100% 起作用?
html body width height 100%使用

相关文章

网友评论

    本文标题:width: 100%是相对于谁的?

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