Echianer的博客

文章目录前言一、@keyframes关键帧1.from{}to{}2.0%{}100%{}二、animation动画1.animation-name2.读入数据总结前言学好css3的动画animation属性很重要，我们可以做到许多类似的效果（平移，旋转，缩放）参考MDN文档：https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation一、@keyframes关键帧通过在动画序列中定义关键帧（或waypoints）的样式来控制CSS动画序

文章目录前言一、display:grid二、grid网格模型（在父元素设置）1.显式网格属性1.grid-template-columns2.grid-template-rows3.grid-template-areas2.隐式网格属性1.grid-auto-columns2.grid-auto-rows3.grid-auto-flow3.间距属性1.grid-gap1.grid-row-gap2.grid-column-gap三、在子元素设置1.grid-area总结前言网格布局也是比较常用的布局.

文章目录前言一、display:flex二、弹性盒子模型一、css弹性属性1.引入库二、alignment对齐属性2.读入数据总结前言布局这块，一直有点不是很熟，还是得做一个详细的总结一、display:flex在flex布局下，元素活动类似于块元素，其布局参考弹性盒子模型二、弹性盒子模型在弹性盒子模型的布局中，我们通常运用弹性属性合理规定子元素的形状，并且能有效避免子元素溢出。除此之外我们还运用对齐属性影响布局。一、css弹性属性1.引入库二、alignment对齐属性代码如下（.

文章目录前言一、什么是选择器二、选择器分类1.基本选择器1.元素选择器2.id选择器3.class选择器4.适配选择器2.复合选择器1.交集选择器2.并集选择器3.关系选择器1.子元素选择器2.后代元素选择器3.兄弟元素选择器4.所有兄弟元素选择器4.属性选择器1.选择含有指定属性的元素2.选择含有指定属性和属性值的元素5.伪选择器1.伪类选择器1.选择第一个元素2.选择最后一个元素3.选择第n个元素4.排除元素总结前言css可以说是前端里面又爱又恨的一门学问。掌握的好自然不用说，掌握不好：居中问题，

转载自作者：蒋鹏飞原文地址：https://juejin.im/post/6844904058193444871