css盒模型是重点。如果您会用表格布局的话，就非常好理解和掌握了。这里的盒模型是和table布局的一个不同点。学 习web标准，首先要弄懂的就是这个盒模型，这就是DIV排版的核心所在。传统的表格排版是通过大小不一的表格和表格嵌套来定位排版网页内容，改用CSS 排版后，就是通过由CSS定义的大小不一的盒子和盒子嵌套来编排网页。这种排版方式的网页代码简洁，表现和内容相分离，维护方便，能兼容更多的浏览器，比如PDA设备也能正常浏览。
那么它为什么叫盒子呢？先说说我们在网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)，CSS盒子模式都具备这些属性。
我们可以把它想像成现实中上方开口的盒子，然后从正上往下俯视，边框相当于盒子的厚度，内容相对于盒子中所装物体的空间，而填充呢，相当于为防震而在盒子内填充的泡沫，边界呢相当于在这个盒子周围要留出一定的空间，方便取出。是不是这样就很容易理解盒模型了。
所以整个盒模型在页面中所占的宽度是由左边界+左边框+左填充+内容+右填充+右边框+右边界组成，而css样式中weight所定义的宽度仅仅是内容部分的宽度，这是许多朋友容易搞混的地方
这里的边界我们也称之为：外边距、外补丁；填充也叫：内边距、内补丁。
<html><head>
<title></title>
<style type="text/css">
<!--
#div {
background-color:#CCCCCC /*这是div背景色！可以不要~这里仅便于你区别*/
margin-top: 20px /*div离页面面顶部的距离为20像素*/
margin-left: 50px /*div离页面面左端的距离为50像素*/
/*这里若设置了顶部和左部就不用设置右和下了~因为2个位置就能把div定位
margin-right: 30px
margin-bottom: 40px */
border:#0099FF 10px solid /*div边框为10像素*/
padding-top: 20px /*内容与div边框顶部的距离为20像素！这里“内容”的位置=20+10+20的像素*/
padding-left: 90px/*内容与div边框左边的距离为90像素！这里“内容”的位置=50+10+90的像素*/
padding-right: 30px /*同上*/
padding-bottom: 50px /*同上*/
}
-->
</style>
</head>
<body>
<div id="div">此处显示 id "div" 的内容这些内容！其实是显示在div的center里！是个隐藏的框框~需要去理解</div>
</body>
</html>
box 模型就能做出来
你可以把3个图片看成一个div ，然后在div里面套用无序列表。
<div><ul>
<li><img src="#"/></li>
<li><img src="#"/></li>
<li><img src="#"/></li>
</ul>
</div>
也可以把一个图片看成一个div .
<div><img src="#"/></div><div><img src="#"/></div>
<div><img src="#"/></div>
大致框架就是这样，具体的css就要自己去编译了。当然html可以有很多种布局，也可以不按我的来，这个东西不是死的。
