css 常用技巧

1:<div id="container"> <div id= "content"> </div> </div> 设置content的margin-top 这个时候container和content会共用，除非设置container 的padding属性

 

2:Absolute，CSS中的写法是：position:absolute; 他的意思是绝对定位，他是参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位，在没有设定TRBL，默认依据父级的做标原始点为原始点。如果设定TRBL并且父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由TRBL决定。会脱离文档流

 

Relative，CSS中的写法是：position:relative;  他的意思是绝对相对定位，他是参照父级的原始点为原始点，无父级则以BODY的原始点为原始点，配合TRBL进行定位，当父级内有padding等CSS属性时，当前级的原始点则参照父级内容区的原始点进行定位。未脱离文档流

 

3: <div >

<div id = "div1" style="height:100px; width:100px; background-color:#e9e9e9;"> </div> 

<div id = "div2" style="height:100px; width:100px; background-color:#e9e9e9; float:left;"></div>

</div>

div1占用了空间,div2会在div1的下方开始显示

 

<div >

<div id = "div1" style="height:100px; width:100px; background-color:#e9e9e9;"> </div> 

<span id = "sp">test</span>

<div id = "div2" style="height:100px; width:100px; background-color:#e9e9e9; float:left;"></div>

</div>

 

div2 会左上角对齐sp,sp会自动围绕div2显示（所以float为left的div会挤开/无视span贴到父级的左边界，而行框(span)不同于块框，是会识别脱流的浮动框并围绕着它）

 

4: 内联元素不能设置width,height, margin-top, margin-bottom

任何元素，只要设置了float，那么他就变成了块级元素

一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float,因为已经被重置成了块状元素,div会换行，span不会换行

relative : 原来是什么类型的依旧是什么类型。