浮动与定位
文档流和文本流
文档流是相对于盒子来说
文本流相对文字段落来说
元素浮动会跳出正常的文档流 也就是它后面的元素时,会无视它占据的区域
直接在身下布局。但是没有文字认同它占据的位置,围绕在身边布局,也就是
说脱离文档流,但是没有脱离文本流。
定位和浮动不同 定位不但脱离文档流 还脱离文本流
float:
1.left
2.right
3.none 取消浮动
clear:
1.left
2.right
3.both 删除浮动
CSS定位
relative :相对定位 最大的特点:通过自身位所置所在位置进行偏移,
就算偏移了,依然还占据原来的区域。根据 left、right、top、
bottom属性进行偏移,可以通过z-index 层叠顺序
absolute:绝对定位 设置绝对定位会直接脱离文本流,也是根据left、right
top、bottom属性进行偏移,定位会根据父级对象进行定位,如果父
级对象没有定位,则根据HTML规则,在body的左上角进行定位,也可
以通过z-index层叠顺序。
fixed :固定定位 值的元素想对浏览器窗口定位,比如网站旁边的广告,滚
动条拉到哪就跟到哪。
z-index :可以用来处理非普通流前后顺序,值无单位整数,越大越靠前。
背景定位:background-attachment:fiexd;