日期:2014-05-17  浏览次数:20690 次

css笔记-浮动与定位

boby的margin默认是不为0的。

浮动与定位。

浮动

css中float默认为none。设置为left或right,元素就会向其父元素的左侧或右侧靠紧,同时默认情况下,盒子的宽度不再伸展,而是根据盒子的内容来确定。浮动的元素将脱离标准流,后面的元素若不浮动,就会当前面面浮动的元素不存在一样,但文字会围绕前面的浮动元素。若前后两个元素都浮动,它们一起脱离标准流,它们之间的margin就会起作用。

通过浮动,可以调换页面上元素的显示位置。

?

关于clear属性:

  • 如果不希望文字围绕浮动的盒子,可以在后面的元素中增加一行clear属性
  • clear属性可以设置为left、right、both,表示清除哪边浮动的影响
  • clear属性是设置在文字所在盒子里面,而不是浮动盒子里
  • 如果某个div内的元素都是浮动盒子,那么div自身显示就会缩成一条,可以在div里面最后加一个空div,将其margin/padding/border设为0,clear设为both,来扩展其高度。

float:left

float:right

定位

position有4个可选值:

static

  • 默认值,按照标准流(包括浮动方式)进行布局

relative

  • 相对定位,相对盒子原来的位置,通过偏移指定距离,到达新的位置。(指定top/left/bottom/right,top优先于right,top优先于bottom)
  • 其仍在标准流中,对父块与兄弟盒子没有影响,即以为它还在原来的位置。
  • 对浮动的盒子,使用相对定位也是一样的。

absolute

绝对定位,盒子以它的“最近”一个“已经定位”的祖先元素为基准进行偏移,不存在这种元素时,就以浏览器窗口为基准进行定位。

  • 从标准流中脱离出来,意味着对其后的兄弟盒子,就好像它不存在一样。
  • 所谓“已经定位”元素的含义是,position属性被设置为不是static的任意一种方式。
  • 如果希望某个元素脱离标准流,又保持在原来的位置,可以不设置偏移属性。

fixed

固定定位,脱离标准离,以浏览器窗口为基准定准,但IE6不支持。

?

z-index

设置了position属性时,便可以通过z-index设置各块之间的重叠高低关系。

display属性

盒子有两种类型,一种是div这样的块级元素,一种是span这样的行内元素。其实可以通过display属性设置为inline、block来修改原来的属性,none为不显示。