css

[violet0sea]

水平垂直居中各种方式

自身高度和父容器高度未知

parent {
    position： relative;
}
child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate（-50%， -50%);
}

知道自身高度

parent {

}
child {
    position: relative;
    width:  $width;
    height: $height;
    top: 50%;
    left: 50%;
    margin-top: -$height / 2; // 
    margin-left: -$width / 2;
}

flex

parent {
    display: flex;
    justify-content: center;
    align-items: center;
}

vertical-align

parent {
    display: tabel-ceil | [inline-block];
    text-align: center;
}
child {
    vertical-align: center;
}

[violet0sea]

CSS选择器 1.基本的选择器 通配符选择器 元素选择器(E) | 标签选择器 类选择器 id选择器 后代选择器（A B） 子选择器 （A>B） 相邻兄弟选择器 （A + B） 通用兄弟选择器 （A ~ B） 群组选择器 （selector1, selector2,...）

2.属性选择器 E[attr="value"] | E[attr~="value"] | E[attr^="value"] | E[attr$="value"]

3.伪类选择器 E:preudo-class :link，:visited, :hover, :active :enabled, :checked, :disabled :nth :not

4.伪元素选择器 ::first-letter, :first-line, ::before, ::after, ::selection

[violet0sea]

BFC

块格式化上下文(Block Formatting Context, BFC) 是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。

定义内部Block-Box如何布局，同一个BFC下的margin会发生重叠