div+css盒模型

盒模型可以说是div+css中的精髓了

我们平时设置的div{width:200px;height:200px} 属性时,设置的都是content的宽和高，当你做站时开始确定好了宽高，写了进去。

后期增大margin或padding的时候，你的宽高就会增大，这样可能挤破盒子，把别的地方内容挤走。

这里有另一种思想，即盒嵌套模型。外部一个div设置宽高，内部一个div写内容，内部div不用写宽高，因为是块级元素，他会自动填充满这个父盒子。然后设置宽高的时候仅需在内部盒中设置即可，这样你可以随便更改了。

<div id="outer_box">
	<div id="inner_box">
        <h4>An h4 heading</h4>
        <p>The heading and this paragraph sit in a column with a width of 170px. Because they are block level elements, their boxes expand horizontally to fill their containing element. Adding 10 pixels of padding to the container makes the container wider by 20px.</p>
	</div>
</div>

div#outer_box {width:170px; background:#FCC;}
div#inner_box {padding:10px;}