父子元素的宽度

最新推荐文章于 2022-10-30 21:14:02 发布

lamCCH

最新推荐文章于 2022-10-30 21:14:02 发布

阅读量1.9k

点赞数 1

分类专栏： css 文章标签： css css3

本文链接：https://blog.youkuaiyun.com/chenlim87/article/details/108976347

版权

css 专栏收录该内容

17 篇文章

订阅专栏

父子元素的宽度

1.正常情况

<style>
    .parent{
      width: 200px;
      height: 300px;
      background-color: aquamarine;
    }
    .child{
      width: 100%;
      background-color: red;
    }
</style>
 
<div class="parent">
    <div class="child">
      hello world
    </div>
</div>

在这里插入图片描述

此时,子元素宽度等于父元素宽度,正是我们要的效果。

2.有定位的情况

<style>
    .parent{
      width: 200px;
      height: 300px;
      background-color: aquamarine;
      position:relative;
    }
    .child{
      width: 100%;
      background-color: red;
      position:absolute;
    }
</style>
 
<div class="parent">
    <div class="child">
      hello world
    </div>
</div>

此时，子元素宽度也是正常的，等于父元素宽度。

3.父元素无定位，子元素是绝对定位

<style>
    .parent{
      width: 200px;
      height: 300px;
      background-color: aquamarine;
    }
    .child{
      width: 100%;
      background-color: red;
      position:absolute;
    }
</style>
 
<div class="parent">
    <div class="child">
      hello world
    </div>
</div>

此时，子元素的宽度发生了变化，宽度等于body的宽度了。这是因为子元素设置了绝对定位，它脱离了父元素文档流，所以宽度直接和body一样了。
在这里插入图片描述

解决方法：

1.给父元素加上相对定位；

2.将子元素的width:100%;改成width:inherit;，表示继承父元素的宽度。注意：IE8不支持inherit属性

<style>
    .parent{
      width: 200px;
      height: 300px;
      background-color: aquamarine;
    }
    .child{
      width: inherit;
      background-color: red;
      position:absolute;
    }
</style>
 
<div class="parent">
    <div class="child">
      hello world
    </div>
</div>