CSS3浮动定位与背景样式

浮动

1. 浮动的基本概念
   • 垂直显示的浮动，不要设置浮动，只有并排显示的盒子才要设置浮动！
   • “大盒子带着小盒子跑”，一个大盒子中，又是一个小天地，内部可以继续使用浮动
   • 超市售卖的塑料袋0.3元一个，div是免费的！不要节约盒子
   • 本质
     • 浮动的最本质的功能：实现并排
     • 浮动的要点：要浮动，并排的盒子都要设置浮动
     • 父盒子要有足够的宽度，否则子盒子会掉下去
     • 浮动的顺序贴靠特性
       • 子盒子会按顺序贴靠，如果没有足够的空间，则会寻找再前一个兄弟元素
     • 浮动的元素一定能设置宽高
       • 浮动元素不在区分块级元素、行内元素，已经脱离了标准的文档流，一律能够设置宽度和高度，即使它是span标签或者标签等
2. 使用浮动实现网页布局
3. BFC规范和浏览器差异
   • BFC（ Box formatting Context）块级格式化上下文 是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然
   • 从一个现象开始说起
     • 一个盒子不设置height，当内容的子元素都浮动时，无法撑起自身
     • 这个盒子没有形成BFC
     • 如何形成BFC
       • 1、float的值不是none
       • 2、position的值不是static或者relative
       • 3、display的值是inline-block、flex或者inline-flex
       • 4、overflow:hidden
         • 溢出隐藏，溢出盒子边框会隐藏
     • BFC的其他作用
       • BFC可以取消盒子的margin塌陷
       • BFC可以阻止元素被浮动的元素覆盖
     • 浏览器差异
       • IE6、IE7浏览器使用haslayout机制，和BFC规范略有差异，比如IE浏览器可以使用zoom:1属性，“让壳子拥有layout”
       • 如果要兼容IE6、IE7网页时，尽量让网页设计的简单。内部有浮动的盒子要设置height属性，规范编程，不要“玩杂技”
4. 清除浮动
   • clear: both;
   • overflow:hidden

定位

1. 相对定位
   • 相对定位：盒子可以相对自己原来的位置进行调整，称为”相对定位“
   • position: relative;
   • 值可以是负数，即往相反的位置移动
   • 相对定位的元素，会在“老家留坑”，本质上任然是在原来的位置，只不过渲染在新的地方而已，渲染的图形可以比如成“影子”，不会对其他元素产生任何影响
   • 相对定位的用途：用来微调元素位置。可以当做绝对定位的参考盒子。
2. 绝对定位
   • 盒子可以在浏览器中，以坐标进行位置精准描述，拥有自己的绝对位置
   • position: absolute;
   • left 到左边的距离，right 到右边的距离，top 到上边的距离，bottom到下边的距离
   • 绝对定位元素脱离标准文档流，将释放自己的位置，对其他元素不会产生任何干扰，而是对它进行压盖
   • 脱离标准文档流的方法：浮动、绝对定位、固定定位
   • 绝对定位的参考盒子：绝对定位的盒子会以自己祖先元素中，离自己最近的拥有定位属性的盒子，当做基准点，这个盒子通常是相对定位的，所以这个性质也叫作 “子绝父相”
   • 绝对定位的盒子并不是永远以浏览器作为基点
   • 绝对定位的盒子垂直居中
     • position:absolute; top:50%; margin-top:-自己高度的一半
   • 堆叠顺序 z-index
     • 没有单位，数值大的就能压盖住小的
   • 绝对定位用途：“压盖”、“遮罩”效果，结合JS实现动画效果，“雪碧图”
3. 固定定位
   • position: fixed;
   • 固定定位只能以页面为参考点，没有“子固父相”这个性质
   • 固定定位脱离标准文档流
   • 用途：返回顶部，楼层导航等