css定位

一、常见的三种布局模型

1.Flow(流动模型)

html元素根据本身的特点显示在浏览器中，块元素自上而下排列，内联元素在一行逐个进行显示

2.Float(浮动模型)

通过float属性进行页面布局

3.Layer(层模型)

通过定位来进行页面布局

语法：position:static(默认值，无特殊定位)|absolute(绝对定位)|relative(相对定位)|fixed(固定定位);

二、定位

1.绝对定位

语法：position:absolute;

参照物：离绝对定位元素最近的具有定位属性的父包含块

如果找不到满足条件的父包含块，那么参照物为浏览器窗口

注：元素绝对定位的位置通过left,right,top,bottom四个属性来设置

2.相对定位

语法：position:relative;

参照物：相对于元素偏移前的位置进行定位

注：也是通过left,right,top,bottom四个属性来设置具体的位置

★ 相对定位和绝对定位的区别

a) 参照物不同

相对定位的参照物是元素偏移前的位置，绝对定位的参照物是离它最近的具有定位属性的父包含块

b) 是否脱离文档流

相对定位不会脱离文档流，偏移前的位置保留，不会被其他元素占据。

绝对定位会脱离文档流，位置不保留，会被其他元素占据

3.固定定位

语法：position:fixed;

参照物：屏幕窗口(浏览器窗口)

注：a) 当绝对定位和固定定位参照物都为浏览器窗口时，固定定位的元素不会跟随滚动条滚动，固定在一个位置上

b) 固定定位会脱离文档流，原来位置会被其他元素占据

三、透明度的设置

语法：opacity:数值; (取值范围0~1,0为完全透明，1为完全不透明)

eg:  opacity:0.5;   也可以简写为 opacity:.5;

注：IE8及以下浏览器不能识别opacity属性，兼容写法如下：

filter:alpha(opacity=数值);  (取值范围0~100,0为完全透明，100为完全不透明)

四、定位层叠属性

语法：z-index:整数值;

注：a) 只有具有定位属性的元素设置z-index才能生效

b) z-index允许设置负值

c) 没有设置z-index时，最后写的元素优先显示在上层，设置z-index后，值越大，层越靠上

五、锚点链接

语法：

<标记 id="锚记名"></标记>     (命名锚记名)
  

<a href="#锚记名"></a>        (连接锚记名)

eg:

<h1 id="one">好好学习html和css的内容</h1>
      <a href="#one">第一章 html基础</a>

注：锚点链接的作用是实现在本页面内不同位置的跳转

扩展一：如何在网页中插入flash

语法：

<object width="数值"  height="数值">
	<param name="movie" value="flash文件路径"/>
    <embed width="数值" height="数值" src="flash文件路径"></embed>
</object>

扩展二：滚动字幕

语法：

<marquee width="数值" height="数值" behavior="scroll(滚动)|alternate(正反方向交替运动)" direction="left|right|up|down" scrollamount="数值">滚动内容...</marquee>