CSS入门教程6

8.6.清除浮动之父级添加after伪元素

:after 方式是额外标签法的升级版。给父元素添加：

💡💡

 .clearfix:after {  
   content: ""; 
   display: block; 
   height: 0; 
   clear: both; 
   visibility: hidden;  
 } 
 .clearfix {  /* IE6、7 专有 */ 
   *zoom: 1;
 }   

• 优点：没有增加标签，结构更简单
• 缺点：照顾低版本浏览器

8.7.清除浮动之父级添加双伪元素

💡💡给父元素添加

 .clearfix:before,.clearfix:after {
   content:"";
   display:table; 
 }
 .clearfix:after {
   clear:both;
 }
 .clearfix {
    *zoom:1;
 }   

• 优点：代码更简洁
• 缺点：照顾低版本浏览器

一、定位

1.1.定位概念

定位：将盒子 定在某一个位置，所以 定位也是在摆放盒子， 按照定位的方式移动盒子

定位也是用来布局的

1.2.定位目的

💡💡

• 浮动可以让多个块级盒子一行没有缝隙排列显示， 经常用于横向排列盒子。
• 定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。

1.3.定位组成

定位 ：

• 定位模式

用于指定一个元素在文档中的定位方式

• 边偏移

决定了该元素的最终位置

边偏移（方位名词）

边偏移 :定位的盒子移动到最终位置。有 top、bottom、left 和 right 4 个属性

💡💡
| 边偏移属性 | 示例 | 描述 |

定位的盒子有了边偏移才有价值。 一般情况下，凡是有定位地方必定有边偏移。

1.4.定位模式

通过 position 属性定义元素的 定位模式

💡💡

选择器 { 
    position: 属性值; 
}

选择器{position:static;}
/*脱标*/
选择器{position:absolute;}
/*相对定位相对于自己原来的位置移动，没有脱标*/
选择器{position:relative;}
/*脱标 以浏览器的可视窗口为参考点*/
选择器{position:fixed;}

1.5.静态定位(static)

静态定位是元素的 默认定位方式， 无定位的意思

  选择器 { 
      position: static; 
  }

1.6.相对定位(relative)

相对定位是元素在移动位置的时候，是相对于它自己 原来的位置来说的

选择器 { 
    position: relative; 
}

💡💡划重点啦

• 相对定位的特点：

  • 1.它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）。
  • 2.原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。

因此，相对定位并没有脱标。它最典型的应用是给绝对定位当爹的

1.7.绝对定位(absolute)

绝对定位是元素在移动位置的时候，是相对于它 祖先元素来说的

  选择器 { 
      position: absolute; 
  }

💡💡划重点啦

• 绝对定位的特点总结：

  1.如果没有祖先元素或者祖先元素没有定位，则以浏览器为基准定位（Document 文档）。

  2.如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。

  3.绝对定位不再占有原先的位置。所以绝对定位是脱离标准流的。（脱标）

💡💡
其它：

1. 完全脱标 —— 完全不占位置；
2. 父元素没有定位，则以浏览器为准定位

3. 父元素要有定位

   • 元素将依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。

1.8.父绝子相

💡💡这个超级重要

子级是绝对定位的话，父级要用相对定位。

总结： 因为父级需要占有位置，因此是相对定位， 子盒子不需要占有位置，则是绝对定位

1.9.固定定位(fixed)

固定定位是元素 固定于浏览器可视区的位置

  选择器 { 
      position: fixed; 
  }

💡💡划重点啦

• 固定定位的特点

1.以浏览器的可视窗口为参照点移动元素。

• 跟父元素没有任何关系
• 不随滚动条滚动。

2.固定定位不在占有原先的位置。

• 固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位。

  • 完全脱标—— 完全不占位置；

  • 只认浏览器的可视窗口 —— 浏览器可视窗口 + 边偏移属性 来设置元素的位置；

    • 跟父元素没有任何关系；单独使用的
    • 不随滚动条滚动。

1.10.粘性定位(sticky)

粘性定位可以被认为是相对定位和固定定位的混合

  选择器 { 
      position: sticky; 
      top: 10px; 
  }
 

💡💡

• 粘性定位的特点：

  1.以浏览器的可视窗口为参照点移动元素（固定定位特点）

  2.粘性定位占有原先的位置（相对定位特点）

  3.必须添加 top 、left、right、bottom 其中一个才有效

1.11.堆叠顺序（z-index）

用 定位布局时，可能会 出现盒子重叠的情况。此时，可以使用 z-index 来控制盒子的前后次序 (z轴)

选择器 { 
    z-index: 1; 
}

💡💡

• z-index 的特性如下：

  1. 属性值：正整数、负整数或 0，默认值是 0，数值越大，盒子越靠上；
  2. 如果属性值相同，则按照书写顺序，后来居上；
  3. 数字后面不能加单位。

注意：z-index
只能应用于 相对定位、 绝对定位和 固定定位的元素，其他 标准流、 浮动和 静态定位无效。

选择器 {z-index:1;}
数值可以是正整数负数0  默认auto 数值越大 盒子越往上
只有定位的盒子才有z-index属性

1.12.定位拓展让一个元素在页面中消失或者显示出来

1. 绝对定位的盒子居中

left: 50%;：让盒子的左侧移动到父级元素的水平中心位置；
margin-left: -100px;：让盒子向左移动自身宽度的一半。

1. 固定定位——固定在版心右侧位置

1.left：50%
2.margin-left：版心宽度的一半距离