1.子绝父相【二】CSS 透明，opacity属性 透明度，filter属性【三】CSS块级格式化，怎样生成*BFC*BFC*的特性， BFC解决的问题：1.清除浮动 2.兄弟塌陷3.3.防止字体环绕

## 1.子绝父相

注意：子元素设置绝对定位，父元素可以设置相对定位、绝对定位、固定定位， 这三种情况，参照元素都是父元素**

这三种情况，子元素设置绝对定位，参照元素都是父元素

1.子绝父相（一般都用这个）

    子元素设置绝对定位，父元素设置相对定位

    2.子绝父绝

    子元素设置绝对定位，父元素设置绝对定位

    3.子绝父固

    子元素设置绝对定位，父元素设置固定定位

【二】CSS 透明

## 透明度属性

### 1、rgba(r,g,b,a)颜色模式

 兼容性：IE6、7、8下不兼容，IE9+支持

- 使用：

  background-color属性、color属性、border-color属性等中设置透明度

- 语法

  rgba(r,g,b,a)

      r-red  取值范围0-255之间

      g-green 取值范围0-255之间

      b-blue 取值范围0-255之间

      a-alpha 取值范围0-1之间表示半透明 1表示完全不透明 0表示完全透明

> 超出范围的值将被截至最近的极限值

### 2、opacity属性 透明度

- 兼容性：IE6、7、8下不兼容，IE9+支持

- 使用

  将内容（及所有后代）、背景一起透明，自身透明，子元素也透明

- 取值

  范围0-1之间表示半透明  0表示完全透明  1表示完全不透明

### 3、filter属性

 兼容性：仅仅支持IE6、7、8、9，在IE10及以上被废除

- 使用：IE浏览器专属

- 语法

  filter:Alpha(opacity=n)

  n的取值在0-100之间表示半透明，0表示完全透明，100表示完全不透明

- 想用filter实现父元素背景透明，子元素不透明：

  父元素加静态定位,子元素加相对定位,能阻止透明度的传递

.box盒子有透明度

.box{

    background: red;

    opacity: .4;/* IE9+ */

    filter: Alpha(opacity=40);/* IE6|7|8|9兼容  */

}

CSS块级格式化

## 概念

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box(块级标签)参与， 它规定了内部的Block-level Box(块级标签)如何布局，并且与这个区域外部毫不相干。

通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。

#### 怎样生成**BFC**

- 根标签（html标签）

- float的值不为none

- overflow 的值不为 visible

- display 的值为 inline-block

- position 的值为 absolute 或 fixed

#### **BFC**的特性

1、内部的标签默认会在垂直方向上一个接一个的放置。

2、垂直方向上的距离由margin决定，属于同一个BFC的两个相邻标签的margin会发 生重叠。

3、每个标签的左外边距与包含块的左边界相接触（从左向右），即使浮动标签也是如此。

4、BFC 的区域不会与 float 的标签区域重叠。

5、计算BFC的髙度时，浮动子标签也参与计算。

6、BFC就是页面上的一个隔离的独立容器，容器里面的子标签不会影响到外面标签， 反之亦然。

#### BFC解决的问题

#####          1.清除浮动

原因： 浮动会让其所在的父元素撑不起来高度

 解决办法(特性5)：计算BFC的髙度时，浮动子标签也参与计算。触发bfc的几个条件都可以用

 2.兄弟塌陷

 原因：垂直方向上的距离由margin决定，属于同一个BFC的两个相邻标签的margin会发 生重叠

解决办法(特性6)： BFC就是一个独立的容器，容器内部的元素不会影响到容器外面  反之亦然

触发bfc只有overflow属性能用

解决方法，给盒子套一个父盒子，加 overflow: hidden;

解决办法(特性6)： BFC就是一个独立的容器，容器内部的元素不会影响到容器外面  反之亦然

兄弟关系外间距塌陷问题

    现象：元素呈并列关系，在垂直方向相邻的margin外间距相遇，会出现叠加现象；

    两个值一样大，取当前值

    两个值不同，取较大值

    原因：并列关系的两个元素共用了一个外间距区域

    解决办法：

    分别给这两个元素套一个父元素，并为父元素设置overflow:'hidden'

3.防止字体环绕