DIV+CSS第二天 定位

很好的学习网站，总结来源于http://www1.qdfuns.com/
1.定位
position的属性值是static。
position:absolute
绝对定位，他默认参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位。
绝对定位具有以下属性：（下面的这些属性大家自己证明，对于下面说的“父级”，就是在原有的盒子外面，在套一层宽度和高度大于原有盒子尺寸的


盒子）




如果没有TRBL，以父级的左上角，在没有父级的时候，他是参照浏览器左上角,如果在没有父级元素的情况下，存在文本，则以它前面的最后一个文字


的右上角为原点进行定位但是不断开文字，覆盖于上方。
如果设定TRBL，并且父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由TRBL决定。
如果设定TRBL，并且父级设定position属性(无论是absolute还是relative)，则以父级的左上角为原点进行定位，位置由TRBL决定。即使父级有


Padding属性，对其也不起作用，说简单点就是：它只坚持一点，就以父级左上角为原点进行定位，父级的padding对其根本没有影响。


以上三点可以总结出，若想把一个定位属性为absolute的元素定位于其父级元素内，必须满足两个条件：




设定TRBL
父级设定Position属性
【position:relative】
意思是：相对定位，他是默认参照父级的原始点为原始点，配合TRBL进行定位，当父级内有padding等CSS属性时，当前级的原始点则参照父级内容区的


原始点进行定位。
相对定位有以下属性：（同样大家在下面自己证明）




如果没有TRBL，以父级的左上角，在没有父级的时候，他是参照浏览器左上角(到这里和absolute第一条一样)，如果在没有父级元素的情况下，存在文


本，则以文本的底部为原始点进行定位并将文字断开(和absolute不同)。
如果设定TRBL，并且父级没有设定position属性，仍旧以父级的左上角为原点进行定位(和absolute不同)
如果设定TRBL，并且父级设定position属性(无论是absolute还是relative)，则以父级的左上角为原点进行定位，位置由TRBL决定(前半段和absolute


一样)。如果父级有Padding属性，那么就以内容区域的左上角为原点，进行定位(后半段和absolute不同)。


以上三点可以总结出，无论父级存在不存在，无论有没有TRBL，均是以父级的左上角进行定位，但是父级的Padding属性会对其影响。
总结：如果用定位来布局页面，父级元素的position属性必须为relative，而定位于父级内部某个位置的元素，最好用absolute，因为它不受父级元素


的padding的属性影响，当然你也可以用relative，计算的时候不要忘记计算padding的值。




图标不会根据浏览器的大小而改变大小就用绝对定位。
2.CSS Hack是解决页面不能很好兼容多种浏览器的技巧方法，是一种方法。
!important


作用：用来解决一些在IE6上显示的效果与IE7/IE8/IE9/FireFox上的效果不一样的情况。比如有下面的一段代码：


#content{
      height:960px !important;
      height:900px;
}
*(星号)


作用：用来解决一些在IE6/IE7上显示的效果与IE8/IE9/FireFox上的效果不一样的情况。比如有下面的一段代码：


#content{
      height:960px;
     *height:900px;
}
IE8/IE9/FireFox不能识别附加有*的CSS属性语句
E6/IE7可以识别附加有*的CSS属性语句
 #thelink:hover{background:url("images/3.gif")no-repeat 0 -41px; }
第一个数字是X轴上的偏移量，也就是横向的偏移量，正表示向右，负表示向左！
第二个数字是Y轴上的偏移量，也就是横向的偏移量，正表示向下，负表示向上！


3.CSS初体验之首行文字缩进
直接在CSS代码中加入text-indent:2em;