css 定位

谈谈定位
CSS 定位机制:
CSS 有三种基本的定位机制:普通流、浮动和绝对定位。
1, 普通流:除非专门指定,否则所有框都在普通流中定位。(元素根据自己的display类型,长宽,等属性顺序排列在z-index:0这一层的。就是普通流也可以是文档流。)
2, 浮动:就是通过float:left;float:right;来控制元素在同层里的左浮和右浮。Float,会改变正常的文档流的排列但是他仍然还是在z-index:0层里。
3, 定位:
Position:relative(翻译相对)
Position:absolute(翻译绝对)
Position:fixed(翻译固定)
Position:static(翻译静态默认值无特殊定位)
他们都可以改变元素在文档流中的位置。并且可以让元素激活left,right,top,bottom和z-index属性。
    例子

CSS hack
css hack的方式有很多种
1, IE条件注释法:
<!--[if IE]>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<style type="text/css"></style>
<script type="text/javascript"></script>
(可以针对不同ie版本分别导入不同样式)
<![endif]-->
<!--[if gt IE6]>只在ie6以上版本生效<![endif]-->
<!--[if ! IE7]>只在ie7上不生效<![endif]-->


2, 选择符前缀法:
*html{}/*只对ie6生效*/
*+html{}/*只对ie7生效*/
*{}/*作为通配符表示所有这个不是hack*/


3, 样式属性前缀法:
.test{ margin-top:10px; *margin-top:8px; _margin-top:8px;}/**在ie6和ie7下生效,_只在ie6下生效*/

相关推荐