css的基本

css的基本认知

1：BFC（块级格式化上下文）

怎么触发BFC

• 浮动元素（元素的float不是none）
• 绝对定位的元素(元素的position为absolute或fixed)
• 行内块 inline block元素
• 弹性元素

解决的问题

• 清楚浮动
• 防止margin合并

木有优点，会有一些副作用

解决副作用的方法：使用最新的 display: flow-root 来触发 BFC 就没有副作用了

未知盒子来让它如何垂直水平居中的一些方法

// 1：在父元素身上设置这些属性
div{
    display : flex;
    justify-content:center; //子元素水平居中
    align-items:center; //子元素垂直居中
}


 //2 : 父元素的添加 position: relative


div{
    position : absolute;
    top : 50%;
    left : 50%;
    transform: translate(-50%, -50%);
}


//3 父元素的添加 position: relative


div {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
}

css选择器的优先级

!important>行内样式>id选择器>类/属性/伪类选择器>伪元素/标签选择器>通配符选择器*