第二周 CSS 学习笔记

一、 CSS三大特性

1. 层叠性
   层叠性指的是多种css样式的叠加，如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉
   说明 一般情况下，离着结构近的样式会覆盖掉前面的样式
2. 继承性
   继承性指的是子标签会继承父标签的某些样式
3. 优先级
   优先级指的是多个规则应用在同一元素上，由于权重导致规则失效的一种情况

二、 浮动以及浮动清除

• 元素一旦设置了浮动属性则会脱离标准普通流的控制，移动到其父元素中指定位置的过程。
• 浮动脱离标准流，不占位置，会影响标准流。浮动只有左右浮动。
• 浮动的目的就是为了让多个块级元素同一行上显示。

清除浮动

清除浮动的本质
清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。
清除浮动的方法

• 隔墙法
  通过在浮动元素末尾添加一个空的标签

<div style="clear:both"></div>

• 父级添加overflow属性方法
• 使用after伪元素清除浮动

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

• 使用before 和 after 双伪元素清除浮动

.clearfix:before,.clearfix:after { 
  content:"";
  display:table;  /* 触发BFC, BFC可以清除浮动 */
}
.clearfix:after {
 clear:both;
}
.clearfix {
  *zoom:1;
}

三、 定位

1. 静态定位

静态定位就是各个元素在HTML文档流中默认的位置。

2. 相对定位

相对定位是将元素相对于它在标准流中的位置进行定位，当position属性的取值为relative时，可以将元素定位于相对位置。

3. 绝对定位

绝对定位会使元素脱离标准流，当position属性的取值为absolute时，可以将元素的定位模式设置为绝对定位。如果定位元素的父元素没有定位，则以document文档为准对齐。

4. 固定定位

固定定位将脱离标准文档流，当position属性的取值为fixed时，即可将元素的定位模式设置为固定定位。

定位总结

定位模式	是否脱标占有位置	是否可以使用边偏移	移动位置基准
静态static	不脱标，正常模式	不可以	正常模式
相对定位relative	不脱标，占有位置	可以	相对自身位置移动
绝对定位absolute	完全脱标，不占有位置	可以	相对于定位父级移动位置
固定定位fixed	完全脱标，不占有位置	可以	相对于浏览器移动位置

你我分头行动，顶峰相见