CSS葵花点穴手---基本定位机制

CSS中有三种基本定位机制：普通流，绝对定位和浮动。

 

/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

普通流

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

1，普通流中的元素框位置由元素在HTML中的出现位置决定，是浏览器默认的定位方式。

 

::::》 块级元素 在普通流中是自上而下地排列，元素之间存在垂直间距，垂直的距离由元素的垂直margin决定，元素遵循垂直margin叠加规则。

::::》 行内元素 在一行中水平布置，元素存在水平间距，使用水平的padding、border和margin能够调整它们之间的水平间距。

 

2，普通流是相对定位的特殊形式，相对定位指的是相对于普通流中的位置，元素相对于这个位置作为起点的偏移。

 

 

/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

绝对定位

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

1，有别于相对定位，绝对定位指的是相对于已定位的祖先元素左上顶角位置的偏移，并且元素脱离文档流。

 

 

/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

浮动

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

1，浮动可以是左或右，移动到元素的边框碰到父框或另一个浮动元素的边缘。

2，浮动的元素脱离文档流。