网页的定位与布局

定位方式

定位属性

如下表：

定位属性	含义
position	定义位置
left	指定元素横向距左部距离
right	指定元素横向距右部距离
top	指定元素纵向距顶部距离
bottom	指定元素纵向距底部距离
z-index	设置元素的层叠顺序
width	设置元素框宽度
height	设置元素宽高度
overflow	内容溢出控制
clip	剪切

position定位

语法格式如下：

position：static|absolute|fixed|relative

属性参数如下表：

参数名	说明
static	元素定位的默认值，无特殊定位。对象遵循HTML定位规则，不能通过z-index进行层次分级
relative	相对位置，对象不可重叠，可以通过left，right，bottom和top等属性在正常的文档中偏移位置，可以通过z-index进行层次分级
absulute	生成绝对定位元素，相对static定位以外的第一个父元素进行定位。元素的位置通过“left”，“top”，“right”，“bottom”属性进行规定。
fixed	fixed生成绝对定位元素，相对于浏览器窗口进行定位。元素的位置通过“left”，“top”，“right”，“bottom”属性进行规定。

层叠顺序z-index

z-index用来设置元素层叠的次序，其方法是每个元素指定一个数字，数字较大的元素将叠加在数字较小的元素之上。语法格式如下：

z-index：auto|number

float浮动定位

语法格式如下：

float：none|left|right

属性值如下表：

属性值	说明
none	元素不浮动
left	浮动在左面
right	浮动在右面

使用clear属性可以清除这些浮动元素。语法格式如下：

clear：none|left|right|both

overflow溢出定位

语法格式如下：

overflower：visible|auto|hidden|scroll

属性参数如下表：

属性值	说明
visible	若内容溢出，则溢出内容可见
hidden	若内容溢出，则溢出内容隐藏
scroll	保持元素框大小，则框内应用滚动条显示内容
auto	等于scroll，他表示在需要时使用滚动条

overflow属性适用于以下情况：

1. 当元素有负边界时。
2. 元素框宽于上级元素内容区，换行不被允许。
3. 元素框宽于上级元素区域宽度。
4. 元素框高于上级元素区域高度。
5. 元素定义了绝对定位。

visibility隐藏定位

visibility属性指定是否显示一个元素生成的元素框。这意味着元素仍占据其本来的空间，不过可以完全不可见。即设置元素的可见性。
语法格式如下：

visibility：inherit|visible|collapse|hidden

属性说明如下表：

属性值	说明
visible	元素可见
hidden	元素隐藏
collapse	主要用来隐藏表格的行或列。隐藏的行或列能够被其他的内容使用。对于表格外的其他对象，起作用等于hidden。

块和行内元素display

块元素

display属性控制元素显示，即元素显示方式。语法格式如下：

display：block|none|inline|compact|marker|inline-table|list-item|run-in|table|table-caption|table-cell|table-column|table-column-group|table-footer-group|table-header-group|table-row|table-row-group

属性说明如下表：

属性值	说明
block	以块元素方式显示
inline	以内联元素方式显示
none	元素隐藏
list-item	以列表方式显示
compact	CSS2分配对象为块对象或基于内容之上的内联对象
marker	CSS2指定内容在容器对象之前或之后，要使用此参数，对象必须与：after及：before伪元素一起使用
inline-table	CSS2将表格显示为无前后换行的内联对象或内联容器
list-item	CSS1将块对象指定为列表项目，并可以添加可选项目标志
run-in	CSS2分配对象为块对象或基于内容之上的内联对象
table	CSS2将对象作为块元素级的表格显示
table-caption	CSS2将对象作为表格标题显示
table-cell	CSS2将对象作为表格单元格显示
table-column	CSS2将对象作为表格列显示
table-column-group	CSS2将对象作为表格列组显示
table-header-group	CSS2将对象作为表格标题组显示
table-footer-group	CSS2将对象作为表格脚注组显示
table-row	CSS2将对象作为表格行显示
table-row-group	CSS2将对象作为表格行组显示

行内元素

当display的值设置为inline时，可以将元素设置为行内元素，并在浏览器中同一行显示。inline元素决定与其他的HTML元素同一行上，其行高，顶部和底部边距都可以改变，而宽度是不可以改变的。