DIV的概念
- DIV 全称 division 意为“区分”使用 DIV 的方法跟使用其他 tag 的方法一样。
- 如果单独使用 DIV 而不加任何 CSS，那么它在网页中的效果和使用 是一样的。
- DIV本身就是容器性质的，你不但可以内嵌table还可以内嵌文本和其它的HTML代码
- 注意：
标签可以用来组合其它的HTML元素，但不能嵌套在段落元素中，例如，
<p>aa<div>bb</div>cc</p>的结果是不确定的。
CSS中的块元素和行内元素
块级元素：就是一个方块，像段落一样，默认占据一行出现；
内联元素：又叫行内元素，顾名思义，只能放在行内，就像一个单词，不会造成前后换行，起辅助作用。
一般的块级元素诸如段落<p>、标题<h1><h2>...、列表,<ul><ol><li> 、表格<table>、表单<form>、<div></div>和<body></body>等元素。
内联元素则如: 表单元素<input>、超级链接<a>、图像<img>、<span> … 块级元素的显著特点是：每个块级元素都是从一个新行开始显示，而且其后的无素也需另起一行进行显示。
块级元素的宽度(width)、高度(height)、内边距(padding)、外边距(margin) 都是可以控制的。
内联元素的 宽度(width)、高度(height)、 内边距(padding-top、padding-bottom)、外边距(margin-top、margin-botom)都是不能改变的
页面布局方法
(1)确定版心：网页的主体内容,在页面中水平居中显示
(2)分析页面中的模块
(3)控制页面中各个模块
基本布局方式有很多
按外观分，有单列布局、两列布局、三列布局等
按实现技术分，有基于自动空白边的布局、浮动布局等
按适应性分，有固定宽度布局、流式布局，弹性布局等
使用CSS布局技术可以完成页面整体布局，实现各种布局样式。
CSS布局技术都基于三个基本概念：定位、浮动和空白边操纵。
CSS的定位机制
(1)普通流方式：有元素在html文件中的位置决定(由标签在文件中的位置来决定)
(2)浮动方式：元素在页面中可以左右移动,直到碰到包含框或其他浮动框
(3)绝对定位：直接将元素定位到页面的任何位置(设置元素在页面中的位置坐标)
浮动属性
(1)浮动：元素脱离原有的标准文档流,移动到其父元素中指定的位置
(2)浮动的实现：在元素的CSS中添加float属性
left：向左浮动
right：向右浮动
none：不浮动(默认值)
浮动元素不占据空间的意思:以两个div为例， 正常是俩都显示出来，占据2空间，加浮动后，div就会叠加显示在一个位置, 此时要想让两个div正常显示一般使用到margin-left：浮动div的宽度,或者也是使用浮动。如果不设置，div叠加在一个位置时，只是位置叠加，但div中的内容不会被覆盖, 如果后面的div没有指定宽度则自动横向填充完整，文字过多则会跑到第一个div下面形成文字环绕效果。如果指定宽度则去掉被覆盖的宽度显示，其它的文字到浮动div下面显示，即产生文字环绕效果。
常见的浮动布局
(1)一列固定宽度并自动居中：当设置一个盒模型的margin:auto;时，可以让这个盒模型居中。
(2)一列自适应宽度：自适应宽度是相对于浏览器而言，盒模型的宽度随着浏览器宽度的改变而改变。这时要用到宽度的百分比,当一个盒模型不设置宽度时，它默认是相对于浏览器显示的。
(3)两列自动居中：两列固定宽度居中，需要在两列固定宽度的基础上改进，在学一列固定宽度居中时，我们知道让它居中的方法，所以这里需要在这两个div 之外再加一个父div 。
(4)三列自适应宽度:一般常用的结构是左列和右列固定，中间列根据浏览器宽度自适应。
清除浮动
当属性设置float（浮动）时，他所在的物理位置已经脱离文档流了，但是大多时候我们希望文档流能识别float（浮动）,或者是希望float（浮动）后面的元素不被float（浮动）所影响，这个时候我们就需要用clear来清除.如果要为浮动元素留出垂直空间，使其它的元素不在其两侧显示，可以对其周围的元素使用清理属性
clear : none | left |right | both
添加了clear属性的元素，通过自动增加空白边，达到留出垂直空间的效果
left：清除左侧的浮动影响
right：清除右侧的浮动影响
both：清除左右两侧的浮动影响
定位属性
(1)相对定位：相对于元素在普通文本流中的初始位置
如果一个元素进行相对定位，它将以它所在的位置(即它在普通流中的位置)为初始点，然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的初始点进行移动。
position: relative; /*相对定位*/
top:150px;
left: 150px;
(2)绝对定位：可以把元素精确定位到页面中的某个地方。
绝对定位使元素的位置与文档流无关，因此不占据普通流中的空间，普通文档流中其他元素的布局就像绝对定位的元素不存在时一样
绝对定位的元素的位置是相对于最近的父元素而言的
因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素并可以通过z-index 来控制它层级次序。z-index 的值越高，它显示的越在上层。
position: absolute;
top:30px;
left: 45px;
z-index: -1;
特别注意：
（1）只有父容器使用相对定位，子元素使用绝对定位后，这样子元素的位置不再相对于浏览器左上角，而是相对于父容器左上角。
（2）相对定位和绝对定位需要配合top、right、bottom、left 使用来定位具体位置，这四个属性只有在该元素使用定位后才生效，其它情况下无效。另外这四个属性同时只能使用相邻的两个，不能即使用上又使用下，或即使用左，又使用右。
在页面布局中常用的CSS属性
（1）Visibility－设置对象是否可见。
定义这个层级是不是要在画面上显示出功能来，最常利用java script来动态控制某个层级的显示状况，进而达到动态的效果。
默认值是visible，不显示则设定成hidden。
（2）display：元素的显示方式。
none：不显示。
block：块状显示。
inline：显示在一行。
visibility: hidden; 隐藏元素后，保留元素所占有的物理空间。
display: none;隐藏元素后，不保留元素所占有的物理空间。
注意：display=none;与visibility=hidden;是不一样的
后者为隐藏的对象保留其占据的物理空间，而前者则不保留。
Div+CSS常见错误总结
- 检查HTML元素是否有拼写错误、是否忘记结束标记
- 检查CSS是否正确
- 确定错误发生的位置
如果错误影响了整体布局，则可以逐个删除div块，直到删除某个div块后显示恢复正常，即可确定错误发生的位置。 - 利用border属性确定出错元素的布局特性
使用float属性布局一不小心就会出错。这时为元素添加border属性确定元素边界，错误原因即水落石出。 - float元素的父元素不能指定clear属性
MacIE下如果对float的元素的父元素使用clear属性，周围的float元素布局就会混乱。这是MacIE的著名的bug，倘若不知道就会走弯路。 - float元素务必指定width属性
很多浏览器在显示未指定width的float元素时会有bug。所以不管float元素的内容如何，一定要为其指定width属性。
另外指定元素时尽量使用em而不是px做单位。 - float元素不能指定margin和padding等属性
IE在显示指定了margin和padding的float元素时有bug。因此不要对float元素指定margin和padding属性(可以在float元素内部嵌套一个div来设置margin和padding)。也可以使用hack方法为IE指定特别的值。 - float元素的宽度之和要小于100%
如果float元素的宽度之和正好是100%，某些古老的浏览器将不能正常显示。因此请保证宽度之和小于99%。 - 是否重设了默认的样式?
某些属性如margin、padding等，不同浏览器会有不同的解释。因此最好在开发前首先将全体的margin、padding设置为0、列表样式设置为none等。 - 是否忘记了写DTD?（ DTD 是一套关于标记符的语法规则 ）
如果无论怎样调整不同浏览器显示结果还是不一样，那么可以检查一下页面开头是不是忘了写下面这行DTD：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
5151
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
