所谓div+css，也就是结构和表现。是相对于以前的表格布局来说的。但现在div+css又趋向于语义化了。也就是说，不要一布局就想到table，而是要想到div，更要想到主义，而现在的html5提供了更具有主义的标签。
工具/原料
1
理解
2
实践
方法/步骤
2
然后就是盒子模型。盒子模型—网页布局的基石,由4部分组成边框（border）外边距（margin） 内边距（padding）盒子中的内容（content）css3的阴影也能给盒子表现出一种外边样式，但他不计入占位。尺寸计算：盒子模型尺寸=边框+外边距+内边距+盒子中的内容尺寸一个div的边框为3px，内边距为2px，右外边距为10px，往它的内部插入一张宽度为120px的图片，该div的宽度是多少？div宽度=2xborder+2xpadding+margin+图片宽度=140px
3
学习了上面的知识，就可以开始动手布局了。网页布局的基础，也是最常见的布局方式之一主要应用技能标准文档流块级元素margin属性设置自动居中下图列出常用几种布局方式的搭配手段。
4
网页布局最常见的方式之一 主要应用技能float属性—使纵向排列的块级元素，横向排列margin属性—设置两列之间的间距
5
还有一种是通过多列实现。 能够实现横向多列布局及较为复杂的定位 通过设置position属性实现 拥有3种定位形式：1.静态定位、2.相对定位、3.绝对定位 可设置4个属性值 static（静态定位） relative（相对定位） absolute（绝对定位） fixed（固定定位）
6
作为入门了解，这里给出两张能提供想像的参考图。
注意事项
1
上面仅以PPT部分内容带大家走一小段，前端的路还很长。
2
边看边学边做，可以记得快能上手记得牢。
上一篇：Html5和Html的区别
下一篇：前端开发需要注意的seo设置