1.浮动
浮动早期作用是图文环绕,现在是用于布局,让垂直的盒子变成垂直布局.如一个在左,一个在右.会依次排序.
1.1 float属性
left:左浮动
right:右浮动
1.2 浮动的特点
浮动的元素会脱离标准流
浮动的元素比标准流高出半个级别
浮动找浮动:下一个浮动元素会在上一个浮动元素后面左右浮动
浮动会受到上面元素边界的影响
2.定位
定位:是相对于父元素进行定位的两个盒子 ,两个盒子位置之间没有关系,两个盒子甚至可以重叠。
2.1 position属性
position: static 静态定位
position: relative 相对定位
position: absolute 绝对定位
position: fixed 固定定位
2.2特点
相对定位特点
1 需要配合方位属性来移动位置
2 想对于自身原来的位置进行移动
3 在页面中占位置-没有脱标
绝对定位特点
1 需要配合方位属性来移动位置
2 祖先元素如果没有定位,默认相对于浏览器进行移动;祖先元素有定位,
相对于最近一级带有定位的祖先元素移动位置.
3 在页面中不占位置-已经脱标
固定定位特点
1 需要配合方位属性来移动位置
2 相对于浏览器的可视区域进行移动位置
3 不占位置-脱标
2.3子绝父相
子绝父相:
子元素用绝对定位,父元素使用相对定位,让子元素相对于父元素进行移动.
那父元素是相对定位,对网页的布局影响比较小.