width:100%和width:inherit (实用，赞）

分手后的思念是犯贱 2022-01-22 02:09 179阅读 0赞

原文出处：[https://www.cnblogs.com/ada-blog/p/7257406.html][https_www.cnblogs.com_ada-blog_p_7257406.html]

前几天遇到过这么一个问题。我想让子盒子的宽度等于父盒子的宽度。  
父盒子宽度为一个具体值比如说200px.我将子盒子宽度设为了100%。按道理说应该是可以等于父盒子的宽度的，但结果并没有，而是通栏了。然后我又将子盒子宽度设为了inherit。结果宽度就是父盒子的宽度了。

HTML结构如下：

<body>
        <div class="parent">
            <div class="child">
                hello world
            </div>
        </div>
    </body>

我想了很久没有想出来，后来请同事帮我一看。原来我的子盒子设了绝对定位，但父盒子没有设置相对定位。所以子盒子脱离了父盒子，导致子盒子的百分之百直接和body的宽度一致了。而子盒子虽然定位上脱离了文档流，但在节点树上他依然是父盒子的儿子，所以如果设置width：inherit的时候，浏览器会将父盒子的宽度赋值给他。

那么解决的办法有两种，一种是像我这样设置成width：inherit。这样的好处是节约代码，但有一点点小小的兼容问题。ie8以下的浏览器不支持inherit属性值。如果你们公司放弃IE8以下的兼容，那我觉得用inherit是很好的一种方式。

.parent{
        width: 300px;
        height: 300px;
        background: deeppink;        
    }
    .child{
        width: inherit;
        position: absolute;     // 子盒子设了绝对定位
        background: pink;
    }

第二种就是在父盒子上加上相对定位，这种方法的好处是兼容性比较好，缺点就是代码量稍微多了两句，而且要细心一些不能像我一样忘记加相对定位

.parent{
              width: 300px;
              height: 300px;
              background: deeppink;
              position: relative;    // 父盒子加上相对定位
        }
    .child{
              width: 100%;
              position: absolute;    // 子盒子设了绝对定位
              background: pink;
    }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZWxlbl9qYWs_size_16_color_FFFFFF_t_70][]  
个人总结：

1、100% 是以参考定位的容器来计算；  
2、inherit 是以DMO节点上的父容器来计算；  
3、被参照盒子要显式声明height或width；  
      例如：孙盒子想通过inherit获得爷爷盒子相同的height，父盒子要有height=100%或height=inherit 声明   
示例：

<div class="box box-1">
      <div class="box box-2">
        <div class="box box-3">
          Hello!
        </div>
      </div>
    <div>
    
    .box-1{
      width: 200px;
      height: 200px;
      background-color: red;
    }
    
    .box-2{
      background-color: yellow;
    
      height: inherit;      // 这行不能少
    }
    
    .box-3{
      background-color: green;
      height: inherit;
    }

如果 .box-2 样式中没有：height: inherit;  ，效果如下左图， 加上如下右图，才是我们想要的效果  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZWxlbl9qYWs_size_16_color_FFFFFF_t_70 1][]

[https_www.cnblogs.com_ada-blog_p_7257406.html]: https://www.cnblogs.com/ada-blog/p/7257406.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZWxlbl9qYWs_size_16_color_FFFFFF_t_70]: /images/20220122/e4492929e6e543219bb38600119117ba.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZWxlbl9qYWs_size_16_color_FFFFFF_t_70 1]: /images/20220122/70037099a5444412afa9e28ddcdce48c.png