<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标签