文档流:将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流。
自上而下被分成一行行的元素就是指块级元素,而在每行中按照自左至右的顺序排放的元素称为行内元素(有很多种叫法,这里只取一种):
常见的块级元素 | 常见的行内元素 |
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的高度,从而实现高度可变的布局