width：100%是相对于谁的？

width：100%是相对于谁的？

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

今天在接触到移动端的时候，遇到了⼀个⽐较常⽤的属性设置：。因为对这个属性的⽤法有些困惑，所以简单地总结了⼀下。

width: 100%;

总结：属性 使⽤情况主要有以下⼏种。

width:100%；

前提条件：

1. ⼦元素必须是块级元素才能实现宽度的继承

2. ⽗级元素设置了宽度

1. 当⽗级元素和⼦元素只是⼀般嵌套关系的时候，⼦元素继承⽗元素的宽。

2. 当⼦元素浮动时，也可以完整的继承⽗元素的宽。

3. 当⼦元素为的时候，这个时候⼦元素会逐级向上寻找是否有的元素。如果有，则继承该元素；如果没有则宽

position: absolute;position: relative;

度是相对于body⽽⾔。

4. 当⼦元素为时，是基于⽗级元素，⽽不是找的元素

position: relative;width:100%position: relative;

5. --------特殊--------当元素被设置了的时候，是⼀直基于body的，其宽度就是body的宽度

postion: fixed

补充⼀点：不论设置为还是,继承的都是‘⽗’级元素的内容区的宽度

box-sizingborder-boxcontent-boxwidth

参考:

width: 100%是相对于谁的?

如何让 height:100% 起作⽤?

html body width height 100%使⽤