css之width继承

1.只有块元素才可以默认“继承”其父元素的width.
2.浮动元素和定位元素也是不默认（不自动）“继承”其父元素宽度的。

width的单位有固定单位和相对单位，你可以把它设置称一个固定值（200px）,也可以把它设置为一个百分数（100%）。

百分数是一个相对单位，它的基准是什么呢？是相对于谁的百分比呢？

如果子元素是一个内联元素,或内联块元素，其就是默认相对于其父元素.father的宽度。

如果子元素是定位元素或浮动元素，float的子元素其width 百分数也是始终相对于其父元素.father而言， 但定位的子元素就比较特殊了：

position为absolute的子元素：

(1) 如果.father是一个static的元素，则.son的宽100%是基于body说的。跟body的宽度一样大。

(2) 但是如果.father也是一个定位的元素，设置了relative或absolut或fixed，则.son的width100%就是相对于.father而言的。否则就是相对于离其最近的一个拥有定位元素的父元素而言。

position为fixed的子元素：

其width的100%是相对于浏览器视窗而言。
如果没有设置left、top属性的时候，会相对于父级元素进行定位，但仅仅只是定位相对于父元素，设置宽度为100%时还是基于浏览器视窗来说的。如果设置了left、top才会相对于窗口进行定位。可以相对父元素使用margin定位，且父元素的padding也是有用的，不同的是，该元素脱离了文档流。
　　position为relative的子元素：

不管直接其父元素是否为定位元素，其width100%始终是相对于其直接父元素而言的。

总结：

1.当符合css默认“继承”的情况下（子元素必须是块级元素且无定位或浮动），是不需要写width属性，就可以默认“继承”的。

否则就要特殊声明一下width属性。

2.当使用width:100%的时候 也要注意其基准点到底是谁：

（1）对于使用position:relative的子元素或浮动的子元素,其基准点始终是基于其直接父元素而言的，跟其父元素是否有定位无关。

（2）对于绝对定位position:absolute的子元素，其基准点是相对于离其最近的一层定位父元素而言。如果其所有父级元素均无定位，则是相对于body而言。

（3）对于使用position:fixed的子元素，其基准点就是浏览器视窗。跟父元素无关。