css父子盒子的width问题

width属性是不可继承的。一般情况下，子盒子的宽度默认与父盒子的宽度一样，但也有别的情况会导致子盒子的宽度为0

一、一般情况（子盒子是块级元素，他的宽度默认等于父盒子的宽度）

展示效果：子盒子直接占满父盒子的宽度

二、子盒子是行内元素（子盒子的宽度有其里面的内容撑起，默认情况下宽度为0

）（这里的行内元素可以通过display:inline或者display:inline-block转化而来）

（默认情况）

效果展示（子盒子宽度为0，图中已经看不到了）

当给子盒子里面放点内容后，子盒子就被撑开了一定宽度

 

效果展示：

 

 三、几种特殊情况

1.子盒子是块级div，且加浮动（任何元素都可以加浮动特性，浮动之后就具有行内块的特性，同时脱离文档流）

 效果展示：（子盒子宽度默认为0，除非有内容撑开它）

 子盒子有内容撑开时：

 2.给子盒子添加position属性，当属性值是absolute/fixed时，会使元素脱离文档流（可以看作是转成了行内块display：inline-block，所以默认情况下也不会占有宽度，除非被子盒子里面的内容撑开了宽度）

（下面代码展示的是：给子盒子添加了绝对定位，且子盒子里面没有内容时）

 效果展示（子盒子里面没有内容，所以宽度为0）

 当子盒子里面有内容时（子盒子的宽度就等于内容的宽度）

 3.还有使用flex布局时，如果父盒子 flex-direction: row;

也会使元素变成inline-block 同样也会使得子元素不占宽度

4.总结起来，就是看子盒子是不是块级元素，如果是，就会占满父盒子的宽度