阅读 38

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

文章分类
前端
文章标签