文档流：将窗体自上而下分成一行行， 并在每行中按从左至右的顺序排放元素，即为文档流。
自上而下被分成一行行的元素就是指块级元素，而在每行中按照自左至右的顺序排放的元素称为行内元素（有很多种叫法，这里只取一种）：
| 常见的块级元素 | 常见的行内元素 |
| address - 地址 blockquote - 块引用 center - 举中对齐块 dir - 目录列表 div - 常用块级容易，也是css layout的主要标签 dl - 定义列表 fieldset - form控制组 form - 交互表单 h1 - 大标题 h2 - 副标题 h3 - 3级标题 h4 - 4级标题 h5 - 5级标题 h6 - 6级标题 hr - 水平分隔线 isindex - input prompt menu - 菜单列表 noframes - frames可选内容（对于不支持frame的浏览器显示此区块内容） noscript - 可选脚本内容（对于不支持script的浏览器显示此内容） ol - 排序列表 p - 段落 pre - 格式化文本 table - 表格 ul - 非排序列表 | a - 锚点 abbr - 缩写 acronym - 首字 b - 粗体（不推荐） bdo - bidi override big - 大字体 br - 换行 cite - 引用 code - 计算机代码（在引用源码的时候需要） dfn - 定义字段 em - 强调 font - 字体设定（不推荐） i - 斜体 img - 图片 input - 输入框 kbd - 定义键盘文本 label - 表格标签 q - 短引用 s - 中划线（不推荐） samp - 定义范例计算机代码 select - 项目选择 small - 小字体文本 span - 常用内联容器，定义文本内区块 strike - 中划线 strong - 粗体强调 sub - 下标 sup - 上标 textarea - 多行文本输入框 tt - 电传文本 u - 下划线 var - 定义变量 |
我们可以使用display属性改变元素的类型，设置dispaly为block使得行内表现的像块级元素一样，设置display为inline使得块级元素表象的和行内元素一样；还可以通过把 display 设置为 none，让生成的元素根本没有框。这样的话，该框及其所有内容就不再显示，不占用文档中的空间。
Position属性规定元素的定位类型;
| 值 | 描述 |
|---|---|
| absolute | 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
| fixed | 生成绝对定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
| relative | 生成相对定位的元素，相对于其正常位置进行定位。 因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。 |
| static | 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 |
几种定位：
1、普通流定位：除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框（Line Box），行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度。
2、浮动定位：浮动元素可以向左或者向右，知道它的外边缘碰到包含框或者另一个浮动框的边框为止；浮动元素不占任何正常文档流空间，而浮动元素的定位还是基于正常的文档流，然后从文档流中抽出并尽可能远的移动至左侧或者右侧。文字内容会围绕在浮动元素周围。当一个元素从正常文档流中抽出后，仍然在文档流中的其他元素将忽略该元素并填补他原先的空间(即不保留原占位)，clear 属性规定元素的哪一侧不允许其他浮动元素。浮动元素会生成一个块级框，而不论它本身是何种元素；且要指明一个宽度，否则它会尽可能地窄；另外当可供浮动的空间小于浮动元素时，它会跑到下一行，直到拥有足够放下它的空间。。
3、相对定位： 即相对于元素在文档流中位置进行偏移。 但保留原占位，在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框；
4、绝对定位：即完全脱离文档流， 相对于position属性非static值(即已经定位)的最近父级元素进行偏移，可以覆盖页面上的其他元素；
5、固定定位：它可以让HTML元素脱离文档流固定在浏览器的某个位置。
6、Z-index:控制元素的摆放顺序，如果设置其值为-1，可被用于将在一个元素放置于另一元素之后；
小结：
1：相对定位是“相对于”元素在文档中的初始位置，而绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块。父容器使用相对定位，子元素使用绝对定位后，这样子元素的位置不再相对于浏览器左上角，而是相对于父窗口左上角，相对定位和绝对定位需要配合top、right、bottom、left使用来定位具体位置，这四个属性只有在该元素使用定位后才生效，其它情况下无效。另外这四个属性同时只能使用相邻的两个，不能即使用上又使用下，或即使用左，又使用右；
2：实现高度可变的布局；
在布局的时候经常遇到的一个问题就是高度可变，尤其是中间内容部分需要可变：如下面
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div id="header"></div>
<div id="content" style="border:solid 1px blue;background-color:green;">
<div id="left" style="float:left;border:solid 1px red;margin-left:3px;">
左侧
</div>
<div id="middle" style="float:left;border:solid 1px blue;margin-left:3px;">
中间
</div>
<div id="right" style="float:left;border:solid 1px green;margin-left:3px;">
右侧
</div>
</div>
<div id="footer"></div>
</body>
</html>
显示效果：
如图所示，ID为content的层缩成了一条蓝色的线（不是大家想象的被子元素给冲开），而他的子选元素则正常的飘向左侧，如何使content层被冲开呢，就是把它的背景色展开呢，只要把也设置为浮动就可以了，设置为浮动之后该元素就会尽可能的窄，按照自己的需要制定宽度：为content设置浮动之后的效果图如下：
这样以来只要其内部的浮动的子元素高度变化就会影响到content的高度，从而实现高度可变的布局
1288
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
