width：100%是相对于谁的？
问题：width: 100%是相对于谁的？
今天在接触到移动端的时候，遇到了⼀个⽐较常⽤的属性设置：width: 100%;。因为对这个属性的⽤法有些困惑，所以简单地总结了⼀下。
总结：属性 width:100%；使⽤情况主要有以下⼏种。
前提条件：
box sizing1. ⼦元素必须是块级元素才能实现宽度的继承
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%使⽤

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。