关于块级元素首先应知道的特点:
1. 默认霸占一行(宽度100%)
2.高度靠子元素撑开(高度auto)
3.当父子皆是100%时,高度靠浏览器屏幕高度决定
4.当父子皆是auto情况下,高度0.
现在研究父子皆是块级元素的情况:
html
<div id="parent">
<div id="children">
</div>
</div>
css
#parent{
background-color:red;
}
#children{
background-color:grey;
}
很明显,页面是空白的。理由是第二点。
改进一下html,
<div id="parent">
<div><div>
<div id="children">
我是子元素
</div>
</div>
父元素高度0,子元素高度为浏览器默认的文本高度。
//先写到这里