复制代码

如下图所示,首先我们有一个图片被两层div给包裹,而body有一个margin,图片宽度为50%,最外层的div有一个最小高度(用于后面的测试,当img设置了其他position之后可能高度塌陷);

1.当不设置position的时候,img的50%是相对父元素(也就是第二层的div)的宽度的50%;因为最外层和第二层的宽度未设置,就是auto,就是自动铺满的

2.对img的position进行修改,发现当为relative的时候,宽度不变(仍相对于父元素),但当position为fixed和absolute的时候宽度变大了(因为这时候不是相对父元素了);经验证当为fixed的时候,相对于body;当为absolute的时候宽度是相对于祖辈元素中第一个非static元素的宽度百分比直到body;

上面只是确定了是基于哪个元素的百分比.其实position为fixed和absolute时,可能还会影响到其他的,先看第二点.

    
         
                 
     
        
      
    
     
复制代码

1.如下图所示,当div都为border-box;时,计算子元素的100%宽度,是相对于父元素的内容的宽度;

即: 子元素content width + 子元素padding width + 子元素border = 父元素content width * 百分比;(440px + 10px * 2 + 0 = 460px * 100%)

所以当都为border-box的时候,子元素在设置了width为100%,在不设置margin的情况下,子元素不会溢出父元素;

额外补充,当元素为border-box时,设置的宽度为内容宽度+padding宽度+border宽度的总和,所以parent元素的总宽度为500px,内容宽度为460px,padding宽度为40px;

2.如下图,当div都为content-box时,子元素计算的100%宽度,是相对于仍然为父元素的内容的宽度;虽然都是内容的宽度并且width都通过样式设置为了500px,但border-box设置的是盒子除去margin所占的总宽度(内容宽度需要用500px减去padding),而content-box时设置的宽度为盒子的内容宽度,所以child的宽度直接就为500px,但child所占的总宽度为600px(内容宽度+padding宽度,为了更明显padding设为了50px),导致child溢出

额外补充,,当元素为content-box时,设置的宽度为内容宽度宽度,所以Parent元素的总宽度需要计算:内容宽度+padding宽度+border宽度的总和,就是500px+40px+0=540px. 对content-box的盒子设置width时,设置的是内容宽度,而对border-box的盒子设置width时,设置的是总的宽度(内容宽度+padding宽度+border宽度)

3.最后再声明一点,宽度的计算方式都是根据父元素的内容宽度来计算的,至于这个百分比宽度是否包括padding,就只和子元素的box-sizing有关了,父元素的box-sizing不同也没有关系(但父元素的自身的box-sizing和自身宽度计算有关,所以算是间接关系吧,也可以说没关系);比如上面那个例子,如果我把child设置为border-box,那么child的宽度为500px,因为是border-box,所以设置的是总的宽度,即500px=内容宽度+padding宽度,所以可以推出内容宽度为400px

我们通过做第二个实验的时候,重新做第一个例子

    
         
                 
     
        
      
            
       
        
      
    
     
复制代码

我们发现child元素的总宽度为500px,内容宽度为而Parent的总宽度为500px,内容宽度却只有460px,所以child的宽度不是我们说的集成父元素的内容宽度,而是父元素的总的宽度

0.什么时候起作用?

   子元素肯定要是块级元素或则display为block等情况.

1.基于谁?

   基于父元素或祖辈元素(跟当前元素的position有关),position为absolute则基于第一个非static祖辈元素,为fixed则基于body

2.子元素的宽度是基于父元素(或者说目标元素)的内容宽度还是总的盒子的宽度?

    当子元素的position为absolute或fixed的时候,width为总的宽度(padding宽度+ 内容宽度+border宽度),而其他情况都是基于目标元素的内容宽度

3.子元素的百分比宽度样式设置的是子元素的内容宽度还是总的宽度?

    这个只跟子元素的box-sizing有关,当为border-box的时,设置的是盒子的总宽度,当为content-box是设置的盒子的内容宽度

4.若父元素宽度固定,子元素的宽度怎么计算?若不固定怎么计算?

    当父元素宽度确定时,子元素的宽度百分比能很好计算出来(包括父元素宽度固定,子元素设置为float),只用根据上面三点计算;当父元素的宽度不确定时,父元素会自动铺满上层元素,但当父元素position为absolute或fixed或浮动时,父元素的宽度会缩到最小,这时子元素的宽度不好计算,有可能为0,有可能其他子元素把父元素的宽度撑开,这时子元素也有宽度