详解CSS-05-浮动与定位

一、浮动
1. 浮动的基本概念
  • 浮动的最本质功能:用来实现并排。
    在这里插入图片描述

  • 浮动使用要点:要浮动,并排的盒子都要设置浮动

  • 父盒子要有足够的宽度,否则子盒子会掉下去。

  • 子盒子会按顺序进行贴靠,如果没有足够空间,则会寻找再前一个兄弟元素
    在这里插入图片描述

  • 浮动的元素不再区分块级元素、行内元素,已经脱离了标准文档流,一律能够设置宽度和高度,即使它是span或者a标签等。

  • float:right;即可设置右浮动。
    在这里插入图片描述

2. 使用浮动实现网页布局

注意事项:

  • 垂直显示的盒子,不要设置浮动,只有并排显示的盒子才要设置浮动!
  • “大盒子带着小盒子跑”,一个大盒子中,内部可以继续使用浮动。
3. BFC规范和浏览器差异

BFC规范:
具体参看:5分钟看懂BFC以及实际应用

浏览器差异:

  • IE6、7浏览器使用haslayout机制,和BFC规范略有差异,比如IE浏览器可以使用zoom:1属性“让盒子拥有layout”
  • 如果要制作兼容到IE6、7的网页时,尽量让网页布局变得简单,内部有浮动的盒子要设置height属性,规范编程,不要玩杂技。
4. 清除浮动

清除浮动:

  • 为什么要清除浮动
    • 浮动一定要封闭到一个盒子中,否则就会对页面后续元素产生影响

清除浮动姿势:

  • 姿势一:
    • 让内部有浮动的父盒子形成BFC,它就能关闭内部的浮动。此时最好的方法就是overflow:hidden属性。
      在这里插入图片描述
  • 姿势二:
    • 给后面的父盒子设置clear:both属性。clear表示清除浮动对自己的影响,both表示左右浮动都清除。
      在这里插入图片描述
  • 姿势三
    • 使用::after伪元素给盒子添加最后一个子元素,并且给::after设置clear:both。
      在这里插入图片描述
  • 姿势四:
    • 在两个父盒子之间”隔墙“,隔一个携带clear:both的盒子。
      在这里插入图片描述
二、定位
1. 相对定位
  • 相对定位:盒子可以相对自己原来的位置进行位置调整,称为相对定位。
    在这里插入图片描述

位置描述词:

  • left:向右移动;right:向左移动;top:向下移动;bottom:向上移动;
  • 值可以为负数,即往规定方向相反移动。

相对定位的性质:

  • 相对定位的元素,会在“老家留坑”本质上仍然是在原来的位置,只不过渲染在新的地方而已,渲染的图形可以比喻成“影子”,不会对页面其他元素产生任何影响。

相对定位的用途:

  • 相对定位用来微调元素位置。
  • 相对定位的元素,可以当做绝对定位的参考盒子。
2. 绝对定位
  • 绝对定位:盒子可以浏览器中以坐标进行位置精准描述,拥有自己的绝对位置。
    在这里插入图片描述

位置描述词:

  • left: 到左边的距离;right:到右边的距离;top:到上边的距离 ; bottom:到下边的距离
    在这里插入图片描述

绝对定位脱离标准文档流:

  • 绝对定位的元素脱离标准文档流,将释放自己的位置,对其 他元素不会产生任何干扰,而是对它们进行压盖。
  • 脱离标准文档流的方法:浮动、绝对定位、固定定位。

绝对定位的参考盒子:

  • 绝对定位的盒子并不是永远以浏览器作为基准点。
  • 绝对定位的盒子会以自己祖先元素中,离自己最近的拥有定 位属性的盒子,当做基准点。这个盒子通常是相对定位的, 所以这个性质也叫作“子绝父相”。

绝对定位的盒子垂直居中:

  • 绝对定位的盒子垂直居中是一个非常实用的技术。
    在这里插入图片描述

堆叠顺序z-index属性:

  • z-index属性是一个没有单位的正整数,数值大的能够压住数值小的。

绝对定位的用途:

  • 绝对定位用来制作“压盖”、“遮罩”效果。
  • 绝对定位用来结合CSS精灵使用
  • 绝对定位可以结合JS实现动画
3. 固定定位
  • 固定定位:不管页面如何卷动,它永远固定在那里
    在这里插入图片描述

固定定位注意事项:

  • 固定定位只能以页面为参考点,没有子固父相这个性质。
  • 固定定位脱离标准文档流

固定定位的用途:

  • 固定定位的用途:“返回顶部”、“楼层导航”
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值