1、position用于对元素进行定位,position属性规定了元素的定位类型,使用left、right、bottom、left进行具体位置的调整,position属性有absolute、relative、fixed、static等属性。
使用的时候有以下几点需要注意:
- absolute 是相对于声明了relative的父元素来进行定位的,父元素不局限于浏览器窗口
- fixed只能相对于浏览器窗口进行定位。
- 当子元素设置position: absolute;并且他的父元素没有设置position: relative;时(之前的理解是,这时候子元素应该自动相对于body定位的)这时如果没有设置left、top、right、bottom等值的话,子元素依然还会位于他的父元素的(0,0)的位置,即子元素这时的位置默认不是(0,0)而是他自己在原来文档流中的位置。
.position-box{position: absolute;}/*子元素如果不设置left、top、bottom等值的时候
元素默认是在原来的位置,而不是相对于body定位在(0,0)的位置*/
2、float 定义元素在哪个方向浮动,元素的浮动只能在父元素范围内浮动,使用很普遍,如横向菜单栏的实现。
使用的时候有以下几点需要注意:
- 布局的时候,float和position以及margin、padding可以同时使用不存在冲突(前提是下一个元素已经清除了浮动,否则设置间距无效)。
- 元素使用float之后,元素会脱离文档流,这时候父元素会不占高度,下面的元素则默认会在使用float元素的文档位置,如果想让父元素占高度,可以给父元素添加属性display: table;即可还可以写一个空的公共div,专门用来清除浮动。如:
.clear-float{clear: both;}/*可以作为公共样式使用*/
.parent{display: table;}/*这时父元素的高度会被撑开,设置背景颜色可以看得到*/
- 给父元素添加属性display: table;之后,父元素才可以具有高度,所以如果在需要给父元素设置特殊颜色的时候,可以使用display: table;其他情况使用clear来清除浮动。