css中的定位机制有3中,分别是标准文档流、浮动定位和绝对定位
1.标准文档流(Normal flow)
(1)对于行级元素,比如span,strong(字体加粗),img,input等,都是按照从左到右的方式进行排版;
(2)对于块级元素,比如div,ul,li,di,dt,p等,都是按照从上往下的方式进行排版;
(3)盒子模型:边框(border),外边框(margin),内边距(padding);
(4)盒子3D模型:由顶到底为border,content+padding(内容+内边距),background-image,background-color,margin;
注意:margin的属性,三个值:第一个值表示top,第二个值表示left和right,第三个值表示bottom;
两个值:第一个值表示top和bottom,第二个值表示left和right;
一个值:表示四个方向属性值相同。
2.浮动定位(Float)
float有两个属性值,left表示向左浮动,right表示向右浮动,一般设为float属性,会影响紧随其后的元素的位置以及父包含块的位置,以此必须要有清除浮动的措施。
清除浮动措施:(1)clear属性——常用clear:both; 或clear:left; 或clear:right;
(2)width:100%(或固定宽度)+overflow:hidden(两个要同时写才起作用)
3.绝对定位(Absolute positioning)
position的4个定位属性值有:静态定位static(默认状态,处于标准文档流中),相对定位relative,绝对定位absolute,固定定位fixed。
(1)相对定位relative:相对于自身原有位置进行偏移,仍处于标准文档流中,想要设置相对偏移基准,则将父级元素设为相对定位。
(2)绝对定位absolute:建立了以包含块为基准的定位,完全脱离了标准文档流,如果没有已经定义的祖先元素,则以<html>为偏移参照基准,有已定位祖先元素,以距其最近 的元素为参照基准。
(3)固定定位fixed:若要元素固定不动,不随着鼠标的上下滑动或左右滑动而移动,则设为fixed属性。