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为不显示。