CSS3经典问题

  BFC（Block FormattingContext）格式化上下文，是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。

BFC应用

• 防止margin重叠
• 清除内部浮动
• 自适应两（多）栏布局
• 防止字体环绕

触发BFC条件

• 根元素
• float的值不为none
• overflow的值不为visible
• display的值为inline-block、table-cell、table-caption
• position的值为absolute、fixed

BFC的特性

• 内部的Box会在垂直方向上一个接一个的放置。
• 垂直方向上的距离由margin决定
• bfc的区域不会与float的元素区域重叠。
• 计算bfc的高度时，浮动元素也参与计算
• bfc就是页面上的一个独立容器，容器里面的子元素不会影响外面元素。

div水平居中

1.行内元素

.parent {
    text-align: center;
}

2.块级元素

.son {
    margin: 0 auto;
}

3.flex布局

.parent {
    display: flex;
    justify-content: center;
}

4.绝对定位定宽

.son {
    position: absolute;
    width: 宽度;
    left: 50%;
    margin-left: -0.5*宽度
}

5.绝对定位不定宽

.son {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
}

6.left/right: 0

.son {
    position: absolute;
    width: 宽度;
    left: 0;
    right: 0;
    margin: 0 auto;
}

---

div垂直居中

1.行内元素

.parent {
        height: 高度;
    }

.son {
    line-height: 高度;
}

2.table

.parent {
  display: table;
}
.son {
  display: table-cell;
  vertical-align: middle;
}

3.flex

.parent {
    display: flex;
    align-items: center;
}

4.绝对定位定高

.son {
    position: absolute;
    top: 50%;
    height: 高度;
    margin-top: -0.5高度;
}

5.绝对定位不定高

.son {
    position: absolute;
    top: 50%;
    transform: translate( 0, -50%);
}

6.top/bottom: 0

.son {
    position: absolute;
    height: 高度;
    top: 0;
    bottom: 0;
    margin: auto 0;
}

---

绝对定位和相对定位

1. absolute 绝对定位 相对于最近的已定位的祖先元素, 有已定位(指position不是static的元素)祖先元素, 以最近的祖先元素为参考标准。如果无已定位祖先元素, 以body元素为偏移参照基准, 完全脱离了标准文档流
2. fixed 固定定位的元素会相对于视窗来定位,这意味着即便页面滚动，它还是会停留在相同的位置。一个固定定位元素不会保留它原本在页面应有的空隙。

共同点：改变行内元素的呈现方式，都脱离了文档流；不同点：absolute的”根元素“是可以设置的，fixed的“根元素”固定为浏览器窗口

---

让元素消失

visibility:hidden、display:none、z-index=-1、opacity：0

• opacity：0,该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定了一些事件，如click事件也能触发
• visibility:hidden,该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件
• display:none, 把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删掉
• z-index=-1置于其他元素下面