CSS布局及定位

一、常见的三种布局模型

1.流动模型（Flow）

对元素没有进行特殊设置，块元素自上而下排列，内联元素在一行逐个进行显示

2.浮动模型（float)

通过设置float属性来进行页面布局

a）float对块元素的影响：

块元素设置float后脱离了默认文档在一行显示

b) float对内联元素的影响

内联元素设置float后就可以设置宽高以及border,padding和margin

3.层模型（Layer）

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

二、定位

1.绝对定位

语法：position:absolute;

参照物：必须满足以下两个条件：

a)参照物和绝对定位元素必须是包含与被包含的关系

b)参照物必须具有定位属性

如果找不到满足条件的父包含块，那么相对于浏览器窗口进行定位

注：通过left,right,top,bottom四个属性来决定定位的具体位置，给正值在参照物之内，给负值在参照物之外

2.相对定位

语法：position:relative;

参照物：元素偏移前的位置

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

I.参照物不同

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

II.是否会脱离文档流

绝对定位会脱离默认的文档流，原来的位置会被其他元素占据，相对定位不会脱离文档流，原来的位置保留，不会被其他元素占据

3.固定定位

语法：position:fixed;

参照物：屏幕窗口

注：当固定定位和绝对定位的参照物都为浏览器窗口时，出现滚动条后，固定定位不会跟随滚动条滚动，绝对定位会跟随滚动条滚动
注：固定定位会脱离文档流

三、透明度的设置

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

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

filter:alpha(opacity=数值); （取值范围0-100）

四、定位元素层叠属性

语法：z-index:auto|number;

number取值为正整数值，也可为负值

注：没有设置z-index时，最后写的对象优先显示在上层，设置后，数值越大，层越靠上；

五、锚点链接

作用：实现在本页面内不同位置的跳转

语法：
命名锚记名：<标记 id="锚记名"></标记>
连接锚记名：<a href="#锚记名"></a>

eg:
<h1 id="one">第一章 html基础</h1>
<a href="#one">学习第一章</a>

---

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

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

扩展二：滚动字幕

语法：<marquee behavior="scroll|alternate" width="数值" height="数值" ``direction="left|right|up|down" scrollamount="数值">滚动的内容</marquee>
注：scrollamount 设置滚动的速度，值越大速度越快