CSS的定位机制

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属性。

-------------本文结束感谢您的阅读-------------