css animation动画完成后隐藏_最全最清晰的css学习目录

ad83cacfd08b6fb76de20213aff1446a.png

前面的话

  CSS是前端工程师的基本功,但好多执迷于学习javascript的人的基本功并不扎实。可能一些人从w3school网站匆匆过了一遍,只是对CSS常用概念有一些表面上的理解,就一头扎进javascript的深坑里跳不出来。实际上,javascript中比较复杂的逻辑很有可能使用CSS几行样式就能解决问题,而且性能还好。

  CSS之所以能成为一门优雅的语言,以及有其对应的重构工程师的岗位,是因为这本语言本身就有很强的存在价值,且真正要理解它并不容易。从CSS禅意花园开始,写CSS成为一种艺术。从CSS2.1到3再到4,CSS所涵盖的内容及可实现的功能得到了极大的丰富,使得CSS的学习成本也越来越高。再多的知识,一个知识点一个知识点去学,总能学明白。

  小火柴将CSS的知识体系进行了梳理和归纳,总结成以下目录

基础

基础语法

引入CSS

选择器

选择器新用法

层叠

单位

样式关键字

calc()

默认可继承样式

CSS Why

变量Variable

属性速查表

兼容

CSS Hack

CSS兼容性详解

haslayout

伪类伪元素

伪元素

计数器

伪类

规范

CSS reset

CSS命名实践

CSS规范

命名规范

CSS编码技巧

代码检查工具stylelint

布局

盒模型

【盒子尺寸】

盒模型

四个自适应宽高关键字

边框和阴影

margin要点

margin负值

轮廓outline

【弹性盒模型】

弹性盒模型flex

旧版flex及兼容

flex布局应用

【盒子显示】

溢出overflow

裁剪clip

拉伸resize

滚动条

可见性visibility

普通流

display

haslayout

BFC

视觉格式化

文本方向

浮动和定位

【浮动】

浮动

清浮动

【定位】

定位中的偏移

定位中的堆叠z-index

绝对定位

绝对定位应用

相对定位和固定定位

布局方式

【布局系统】

Media媒体查询

多列布局

grid栅格布局

移动优先的响应式布局

【居中布局】

水平居中

垂直居中

水平垂直居中

【常见布局】

两端对齐

单列定宽单列自适应布局

两列自适应布局

三列布局

三栏式布局(所谓的圣杯和双飞翼布局)

等分布局

等高布局

全屏布局

sticky-footer布局

渲染

字体和文本

字体

基础文本样式

行高与垂直对齐

换行和空白符

文本溢出和文本阴影

颜色和背景

颜色模式

颜色模式转换器

前景色和透明度

背景

光标

变形和动画

过渡transition

变形transform(2d)

变形transform(3d)

变形transform的副作用

线性渐变

径向渐变

动画animation

动画animation的三个应用(漂浮的白云、旋转的星球和正方体合成)

animate.css的使用

渲染属性

混合模式

滤镜

倒影

页面渲染优化属性will-change

遮罩mask

路径裁剪clip-path

效果

元素显示隐藏的9种思路

实现滑动门的3种方法

CSS以图换字的9种方法

导航条Tab切换

CSS画出的图

纹理文本

CSS文本效果

CSS边框效果

CSS背景效果

CSS遮罩和毛玻璃效果

作者:make老师

链接:make老师:最全最清晰的css学习目录

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值