<html><head><title>盒子模型简单布局</title><meta charset="UTF-8"/></head><style type="text/css">div{width: 300px;height: 300px;}/*设置上下两个大的盒子*/#header,#bottom{width: 650px;margin-top: 20px;margin: auto;}/*两个大盒子里分别套两个左右相邻的小盒子*/#div01{border: solid 1px blue;float: left;margin-right: 20px;}#div02{ border: solid 1px yellow;float: left;}#div03{border: solid 1px red;float: left;margin-right: 20px;}#div04{border: solid 1px blueviolet;float: left;}</style><body><div id="header"><div id="div01">我是01</div><div id="div02">我是02</div></div><br /><div id="bottom"><div id="div03">我是03</div><div id="div04">我是04</div></div></html>
效果展示：
注意：CSS中很多时候会用到浮动来布局，也就是经常见到的float:left或者float:right，简单点来说，前者是左浮动(往左侧向前边的非浮动元素飘，全是飘得元素的话，就按照流式来浮动从左到右，放不下则换行)，后者是右浮（往右飘）动。
盒子模型中用的最多的一般是margin和padding标签
