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的子元素,其基准点就是浏览器视窗。跟父元素无关。