CSS重点 - 掘金

flex

flexbox

flex-direction 默认：row col

flex-wrap 默认：nowrap wrap

justify-content 默认：strenth center space-between space-around space-start space-end

align-items(子元素对齐方式 ) 默认：start center end

flexitems

order 默认：0 number越小越靠前

flex-grow 默认：1 放大占剩余空间的比例：items.grow.total/this.grow

flex-shrink 默认：1 缩小占需要缩小的空间的比例：items.shrink.total/this.shrink

flex-basis 默认：items的width 占flexbox的宽度的百分比：33.3%

animation

css3动画

animation-name 动画名称 @keyframes name

animation-delay 动画延迟时间 10s

animation-duration 动画时间长度 10s

animation-direction 动画方向 normal row col row-reverse col-reverse

animation-timing-function 函数曲线 easy easy-in easy-out

animation-iteration-count 迭代次数 infinite(无限次)

animation-play-state 动画播放状态 running paused

//红灯 2s -> 绿灯 2s  -> 黄灯 1s
.block {
    animation-name: led;
    animation-duration: 5s;
    animation-iteration-count: infinite;
}
@keyframes led {
    0%{ background: red; }
    40%{ background: green; }
    80%{ background: yellow; }
    100%{ background: yellow; }
}

float清除浮动-BFC

//1使用clear both
.box::after {
    display: block;
    width: 0;
    height: 0;
    clear: both;
}
//2使用overflow
.box {
    overflow: hidden;
}

重绘和回流

回流一定会触发重绘，重绘不一定会触发回流（浏览器渲染顺序决定）

repaint：绘制元素的装饰，color\background\shadow\text-shadow

layout：绘制元素的位置以及几何属性（getBoundingClientRect）

层叠上下文

层叠先后准则： 谁大谁上后来居上（同样z-index的元素）

margin塌陷/折叠

问题描述

当子元素与父元素毗邻时，子元素设置的margin-top会变成父元素的外边距，子元素和父元素的边界依旧重叠。

注意

其中毗邻是指父元素的盒模型除外边距只有content存在，其中的第一个content就与其父元素毗邻。

塌陷margin

展示为父元素的边距

正常margin

解决办法

1、使用padding-top代替

2、改变子元素与父元素毗邻的问题：

1、父元素添加非0 padding-top

2、父元素添加非0 border-top

3、父元素形成BFC（block format context）块级格式化上下文

BFC（block format context）

父元素形成BFC（block format context）块级格式化上下文，可通过设置以下css属性：

1、overflow 除visible以外的值

2、position absolute/fixed

3、display inline-block/table、table-cell、table-row、table-rowg-group、table-footer-group、table-header-group

4、float right/left