首页 > 代码库 > 关于css布局的定位问题

关于css布局的定位问题

虽然职位说是PHP程序,但实际上什么都要做些,排版当然也免不了了,以前自己做网站时就能排出网页了,但是很多东西不系统,有点走马观花,例如关于这个css布局定位的问题就是,今天特意总结了一下,
知识这东西,只有记住了,才是自己的,不能老是再这么查手册,必须记住,而不是理解了就算了。

第一关于标准文档流
1.默认不用定位的话,所有元素都是在同一个平面,既然在同一个平面就要有互相挤的概念。
2.inline-block元素和block元素是有区别的,例如span,a等就是inline-block内联元素,默认不会换行,设置宽高也没用(以前用span排版就觉得奇怪,原来是这样),而div,p,ul等元素是block块元素,默认会换行,宽度不指定会填满到父元素边界。
3.float元素是针对block块元素而言的,float后,块元素会脱离标准流,紧挨着最近的包裹元素或浮动元素边界。


absolute和relative定位的规律:

relative相对定位的规律
1.使用相对定位的块,会相对于它原本的位置,通过偏移,到达新的位置,所以如果指定了relative但是没有指定偏移,看不出有什么变化。
2.使用相对定位的块仍在标准流中(会占据原来的位置),它对父亲和兄弟盒子都没有任何影响。


absolute绝对定位的规律
1.使用绝对定位的块以它的“最近”的一个“已经定位”的“祖先元素”为基准进行定位。如果没有已经定位的祖先元素,那么会以浏览器窗口为基准进行定位
注意:这里如果指定了一个块属性为absolute,没指定top数值,并且父元素就是浏览器窗口,浏览器给了算出了一个默认top值,只是这个值没显示出来。 2.绝对定位的框从标准流中脱离,这意味着他们对其后的兄弟盒子的定位没有影响,其他的盒子好像就好像这个盒子不存在一样。

关于css布局的定位问题