CSS 知识总结

2020-04-23 132 阅读1分钟

浏览器渲染原理

浏览器将获取的HTML文档解析成DOM树。
根据CSS构建CSS树（CSSOM）
将DOM和CSSOM合并为渲染树（render tree）
Layout布局（计算大小位置等）
Paint绘制（画出颜色）
Compose合成（展示画面）

CSS 动画的两种做法（transition 和 animation）

1.transition 过渡

div {
    width: 100px;
    height: 100px;
    background: red;
}  定义一个div
div:hover {
    width:150px;height:150px; 鼠标经过div时宽高变为150px
}
在div加上过渡属性
div {
    transition: all 1s; 用1秒时间过渡这个动画
}

2.animation 动画

@keyframes xxx {
    0% {
        
    }
    100%{
        
    }
}
定义一个名为xxx的规则
把xxx加到animation动画里
div{
    animation: xxx 1s infinite; 持续1秒循环的动画
}

例子跳动的红心

层叠上下文

z-index
flex
opacity
transform

flex布局重点记忆

display:flex 转换为flex
flex-direction:row/column 主轴左到右/上到下
flex-wrap:wrap 折行、换行
justify-content:center/space-between 主轴居中对齐/ 留有空白对齐
align-items:center 次轴居中对齐