定位样式

Web页面中的特殊效果，如菜单效果，对话框效果都需要通过定位属性来实现。

定位样式
position属性可以控制元素的定位类型
position属性值可以为sataic、fixed、absolute、relative
position属性的语法结构
- position:value;

定位属性static
默认值。没有定位，元素出现在正常文档流中

#box{
position:static;
width:100px;
height:100px;
border:2px solid #f00;
}

定位属性fixed
生成固定定位的元素，相对于浏览器窗口进行定位。
元素的位置通过位置偏移属性进行设置。
元素的Z轴叠放顺序通过z-index属性进行设置。
元素从正常文档流中完全移除，不占用页面空间
当用户向下滚动页面时元素框并不随着移动

#topNav{
position:fixed;
width:100%;
left:0;
top:0;
right:0;
background-color:#000;
}

定位属性absolute
生成绝对定位元素，相对于static定位以外的第一个父元素进行定位
元素的位置通过位置便宜属性进行规定
元素的Z轴叠放顺序通过z-index属性进行设置
将元素的正常文档流中完全移除，不占据空间

#mask{
position:absolute;
width:100%;
height:100%;
left:0;
top:0;
right:0;
bottom:0;
background-color:#000;
}

定位属性relative
生成相对定位元素，相对于其正常位置进行定位
元素的位置通过位置便宜属性进行设置
元素的Z轴叠放顺序通过z-index属性进行设置
元素原本所占的空间仍保留
元素框会相对与它原来的位置偏移某个距离
-设置垂直或水平位置，让元素相对于它的起点进行移动

位置偏移
left属性设置对象相对于父元素/窗口的左侧偏移距离
right属性设置对象相对于父元素/窗口的右侧偏移距离
top属性设置对象相对于父元素/窗口的顶部偏移距离
bottom属性设置对象相对于父元素/窗口的底部偏移距离

Z轴叠放顺序
HTML元素的Z轴地方顺序可以通过z-index属性实现
Z轴的数值越打、其位置靠上，反之靠下

透明处理
通过CSS样式可以设置HTML元素的透明度
在chrome、firefox等浏览器中采用opacity属性实现
在IE浏览器中采用filter属性实现

#mask{
position:absolute;
width:100%;
height:100%;
left:0;
top:0;
right:0;
bottom:0;
background-color:#000;
opacity: .3;
filter: alpha(opacity=30);
}

CSS Hacks
为了解决不同浏览器之间CSS支持的不同

浏览器的类型及版本的不同会造成CSS效果的不尽相同

CSS Hack区分IE6、IE7、firefox
区别不同浏览器，CSS Hack写法
区别IE6与Firefox

background:orange;*background:blue;

区别IE6与IE7

background:green!impartant;background:blue;

区别IE7与Firefox

background:orange;*background:green;

区别FF、IE6、IE7

background:orange;
*background:green;
_background:blue;
background:orange;
*background:green!important;
*background:blue;

CSS优化
减轻服务器压力

缩短服务器响应时间
提高用户的体验度

CSS优化原则
尽量减少HTTP请求个数

80%的最终用户响应时间花在前端程序上，而其大部分时间则花在各种页面元素，如图像、样式表、脚本和Flash等的下载。减少页面元素将会减少HTPP请求的次数。这是快速显示页面的关键所在。常用的方法包括：
- CSS sprites，合并多个背景图像到一个单独图像，然后通过background-image和background-position进行调整
- image maps，结合堆个图像到一个单独图像。其总体规模大致是想当的，但是减少HTTP请求的数量，从而加快页面显示的速度。图像银蛇只工作在页面中的图像是连续的，如导航栏

把CSS放到顶部
将CSS样式表放置在文档头部后，可以提高页面加载速度。
这是因为样式表放在头部后允许页面逐步显示

避免使用CSS表达式
CSS表达式是一个强大（也是危险）的方式来动态设置CSS属性。他们从IE5开始支持，但IE8正式终止了对这种功能的支持。使用CSS表达式的问题在于，计算机会计算高于预期的频率。如果在CSS中要使用表达式的话，则可以通过：
- 使用一次性表达式，在第一次计算表达式设置为一个显示的值，取代CSS表达式
- 如果样式属性必须设置动态页面的整个生命周期中，使用事件处理程序来替代CSS表达式

避免空的src和href
当link标记的href属性为空、script标记的src属性为空的时候，浏览器渲染的时候会把当前页面的URL作为它们的属性值，从而把页面的内容加载进来作为它们的值

将CSS和JS放到外部文件中
通常在现实世界中使用外部文件产生更快的速度，因为JavaScript和CSS文件将由浏览器缓存
这样的技术在页面内引用外部的JavaScript和CSS文件后续页会引用外部文件应该已经在浏览器中缓存

压缩CSS或JavaScript
压缩的做法是把不必要的字符从代码来减小其大小，从而提高加载时间
两个流行的工具：JSMin和YUI Compressor，其中YUI Compressor也可以压缩CSS

不要再HTML中缩放图像
因为尽管通过HTML标记的width、height属性缩放了图像，但是图像在网络传输时仍然保持原来图像的字节数