您的位置：首页 > Web前端 > CSS

学习CSS定位（布局）

2010-12-17 12:46 176 查看

文档流：将窗体自上而下分成一行行，并在每行中按从左至右的顺序排放元素，即为文档流。

自上而下被分成一行行的元素就是指块级元素，而在每行中按照自左至右的顺序排放的元素称为行内元素（有很多种叫法，这里只取一种）：

常见的块级元素

常见的行内元素

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的高度，从而实现高度可变的布局

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

学习CSS定位（布局）

文档流：将窗体自上而下分成一行行， 并在每行中按从左至右的顺序排放元素，即为文档流。

小结：

2：实现高度可变的布局；

文档流：将窗体自上而下分成一行行，并在每行中按从左至右的顺序排放元素，即为文档流。