Day6-浮动与定位-2022-11-24（我觉得css3重点就是浮动与定位了！）

浮动与定位

浮动

浮动的基本概念

• 浮动的最本质功能：用来实现并排
• 浮动使用要点：要浮动，并排的盒子都要设置浮动
• 父盒子要有足够的宽度，否则子盒子会掉下去

浮动的顺序贴靠特性

子盒子会按顺序进行贴靠，如果没有足够空间，则会寻找再前一个兄弟元素。

浮动的元素一定能设置宽高

浮动的元素不再区分块级元素、行内元素，已经脱离了标准文档流，一律能够设置宽度和高度，即使它是span或者a标签等。
（感悟：以前一直不懂什么是“标准文档流”？？就是学习了很多遍都不知道什么意思。今天突然看到突然理解了，至于对不对，自己也不知道。但是给自己的感觉就是”豁然开朗！”所以要相信量变可以引起质变的，只要还不会，那就是自己的量积累还不够。标准文档流就是：举个例子：人们规定的块元素是要占一整行的，而行内元素不会占满一行。脱离标准文档流就是说：原来规定的东西，可变了！行内元素也可以设置宽高了！！）

注意事项

• 垂直显示的盒子，不要设置浮动，只有并排显示的盒子才要设置浮动！
• “大盒子带着小盒子跑”，一个大盒子中，又是一个小天地，内部可以继续使用浮动
• div是免费的！不要节约盒子！

BFC规范和浏览器差异

• BFC（Box Formatting Context，块级格式化上下文）是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然

如何创建BFC

• 方法①：float的值不是none
• 方法②：position的值不是static或者relative
• 方法③：display的值是inline-block、flex或者inline-flex
• 方法④：overflow:hidden;

什么是overflow:hidden;

• overflow:hidden;表示溢出隐藏，溢出盒子边框的内容将会被隐藏
  （正常情况下盒子没有设置高，内容也会自动撑开的啊！BFC我有点不太理解了！以后实践中慢慢感悟吧）
  （设置了宽高，内容溢出用overflow:hidden;可以把内容隐藏起来，不然内容就会溢出来，这个我可以理解）
  

• overflow:hidden;是非常好用的让盒子形成BFC的方法（这句话我还是不太理解！）

BFC的其他作用

• BFC可以取消盒子margin塌陷
  
• BFC可以阻止元素被浮动元素覆盖

浏览器差异

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

清除浮动

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

• 清除浮动方法1：让内部有浮动的父盒子形成BFC，它就能关闭住内部的浮动。此时最好的方法就是父级元素设置overflow:hidden属性
  

• 清除浮动方法2
  清除浮动方法2：给后面的父盒子设置clear:both属性。clear表示清除浮动对自己的影响，both表示左右浮动都清除。
  

• 清除浮动方法3
  清除浮动方法3：使用::after伪元素给盒子添加最后一个子元素，并且给::after设置clear:both。

• 清除浮动方法4
  清除浮动方法4：在两个父盒子之间“隔墙”，隔一个携带clear:both的盒子

定位

相对定位

• 相对定位：盒子可以相对自己原来的位置进行位置调整，称为相对定位
• left向右移动；right向左移动；top向下移动；bottom向上移动。
• 值可以为负数，即往规定方向相反移动。

相对定位的性质

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

3.相对定位的用途

• 相对定位用来微调元素位置。
• 相对定位的元素，可以当做绝对定位的参考盒子。

绝对定位

绝对定位：

盒子可以在浏览器中以坐标进行位置精准描述，拥有自己的绝对位置

• 位置描述词：left到左边的距离；right到右边的距离；top到上边的距离；bottom到下边的距离。
  

绝对定位脱离标准文档流

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

绝对定位的参考盒子

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

绝对定位的盒子垂直水平居中：

堆叠顺序z-index属性

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

绝对定位的用途

• 绝对定位用来制作“压盖” 、 “遮罩”效果
• 绝对定位用来结合CSS精灵使用
• 绝对定位可以结合JS实现动画

固定定位

固定定位：不管页面如何卷动，它永远固定在那里。

固定定位注意事项

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

固定定位的用途

• 固定定位的用途：“返回顶部”、“楼层导航”

作业：
设计图：

自己实践出来的：

代码区别：

今日总结：浮动与定位真要好好理解的，我觉得BFC和清除浮动的方法有点难！以后看自己的笔记时要重点再理解理解。