DIV与CSS知识点搜集

DIV是标签 ，CSS是层叠样式表。DIV+CSS是网站标准（或称“WEB标准”）中常用术语之一，DIV+CSS 是一种网页的布局方法,这一种网页布局方法有别于传统的HTML网页设计语言中的表格（table）定位方式,真正地达到了w3c内容与表现相分离。通常为了说明与HTML网页设计标记中的表格（table）定位方式的区别，因为现行企业网站设计过程中大多是采用DIV+CSS的方式来代替表格实现各种定位，将页面内容与样式分离。虽然DIV+CSS高级布局已逐渐流行，但是DIV+CSS实现起来要相对复杂一些，所以在可以预计的将来，表格的地位依然十分重要，但是DIV代表的是网页设计的发展方向发展的方向。它们一个简单，一个先进，至于网页设计中选择哪种布局模式，就看设计者个人的偏好和设计要求了。
DIV+CSS网页布局的意义体现在如下方面：由于将大部分页面代码写在了CSS当中，使得页面体积容量变得更小,使得页面载入得更快、降低流量费用；跟据区域内容标记，到CSS里找到相应的ID，使得修改页面的时候更加方便，也不会破坏页面其他部分的布局样式；由于将大部分的HTML代码和内容样式写入了CSS文件中，这就使得网页中正文部分更为突出明显，便于被搜索引擎采集收录；由于CSS富含丰富的样式，使页面更加灵活性，它可以根据不同的浏览器，而达到显示效果的统一和不变形的目的。
几种常用CSS+DIV排版技术
用DIV把元素定义为块对象，用CSS设置对象的格式和位置。CSS+DIV排版方式是目前应用很广的排版方式，它的使用非常灵活，可制作非常复杂的版面。以下是几种常用的CSS+DIV排版技术。
纵向排列元素
此类CSS+DIV排版技术用

标签定义块对象，由于

标签本身有换行作用，各元素自然排成一列。用CSS的margin属性设置对象间的距离，用padding属性调整对象的宽度和高度。
横向排列元素
用

标签定义块对象，用CSS的float属性设置对象的浮动，此为CSS+DIV排版中的横向排列。
用列表排列元素
用ul或ol标签制作列表，用CSS设置列表项目的效果。这种CSS+DIV排版技术主要用于规则排列的文本块、图片、控件等。
用绝对坐标定位元素
浏览器窗口的左上角坐标为(0,0)，x坐标向右，y坐标向下，此为CSS+DIV排版技术之绝对坐标定位。CSS提供了几个位置属性，可以设置对象在页面中的位置。
position：当它取值为absolute时，表示对象使用绝对坐标定位。
left、top：对象的左上角坐标。
right、bottom：对象的右下角坐标。
z-index：对象的层叠顺序。取值为一个整数。
用绝对坐标定位的对象是可以发生重叠的，如果没有指定层叠顺序，则后定义的对象位于上层，如果指定了“z-index”值，则值大的位于上层。
我们一般不推荐使用这种方法制作网页，这种网页调整起来非常困难，只是在一些特殊情况下使用。
DIV+CSS页面布局常见错误分析
1、检查HTML元素是否有拼写错误、是否忘记结束标记。即使是老手也经常会弄错div的嵌套关系。可以用dreamweaver的验证功能检查一下有无错误。　　
2、检查CSS是否正确。检查一下有无拼写错误、是否忘记结尾的 “}” 等。可以利用CleanCSS来检查 CSS的拼写错误。CleanCSS本是为CSS减肥的工具，但也能检查出拼写错误。
3、确定错误发生的位置。如果错误影响了整体布局，则可以逐个删除div块，直到删除某个div块后显示恢复正常，即可确定错误发生的位置。　　
4、利用border属性确定出错元素的布局特性。使用float属性布局一不小心就会出错。这时为元素添加border属性确定元素边界，错误原因即水落石出。　　
5、float元素的父元素不能指定clear属性。MacIE下如果对float的元素的父元素使用clear属性，周围的float元素布局就会混乱。这是MacIE的著名的bug，倘若不知道就会走弯路。　　
6、float元素务必指定width属性。很多浏览器在显示未指定width的float元素时会有bug。所以不管float元素的内容如何，一定要为其指定width属性。另外指定元素时尽量使用em而不是px做单位。　
7、float元素不能指定margin和padding等属性。IE在显示指定了margin和padding的float元素时有bug。因此不要对float元素指定margin和padding属性(可以在float元素内部嵌套一个div来设置margin和padding)。也可以使用hack方法为IE指定特别的值。　　
8、float元素的宽度之和要小于100%。如果float元素的宽度之和正好是100%，某些古老的浏览器将不能正常显示。因此请保证宽度之和小于99%。　　
9、是否重设了默认的样式?某些属性如margin、padding等，不同浏览器会有不同的解释。因此最好在开发前首先将全体的margin、padding设置为0、列表样式设置为none等。

拓展阅读：
http://developer.51cto.com/art/201008/220838.htm