CSS学习目录_html/css_WEB-ITnose

前面的话

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

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

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

 

目录

基础

　　引入CSS

　　CSS选择器

　　CSS层叠

　　CSS默认可继承样式

　　initial、inherit、unset、revert和all

　　深入理解CSS中的长度单位

　　理解CSS中的数学表达式calc()

字体和文本

　　CSS字体

 　  CSS中常见的6种文本样式

　　深入理解line-height与vertical-align

　　深入理解CSS中的换行和空白符

　　文本溢出和文本阴影

颜色和背景

　　深入理解CSS6种颜色模式

　　CSS颜色模式转换器的实现

　　CSS前景色和透明度

　　深入理解CSS背景

　　CSS光标cursor

盒模型

　　深入理解盒模型

　　理解CSS边框

　　深入理解CSS中的margin负值

　　CSS轮廓outline

　　深入理解CSS弹性盒模型flex

　　CSS旧版flex及兼容

普通流

　　深入理解display属性

　　haslayout详解

　　深入理解BFC

　　块级元素视觉格式化

　　行内元素视觉格式化

　　CSS文本方向

浮动和定位

　　深入理解CSS浮动

　　CSS清浮动

　　深入理解CSS定位中的偏移

　　深入理解CSS定位中的堆叠z-index

　　深入理解CSS绝对定位

　　CSS绝对定位的应用

　　理解CSS相对定位和固定定位

溢出相关

　　深入理解CSS溢出overflow

　　CSS裁剪clip

　　CSS拉伸resize

　　CSS滚动条

　　深入理解CSS可见性visibility

伪类和伪元素

　　深入理解伪元素

　　深入理解CSS计数器

变形和动画

　　深入理解CSS过渡transition

　　深入理解CSS变形transform(2d)

　　深入理解CSS变形transform(3d)

　　深入理解CSS线性渐变linear-gradient

　　深入理解CSS径向渐变radial-gradient

　　深入理解CSS动画animation

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

布局

　　CSS多列布局

　　CSS实现水平居中的4种思路

　　CSS实现垂直居中的4种思路

　　CSS实现水平垂直居中的5种思路

　　两列布局中单列定宽单列自适应布局的5种思路

　　两列自适应布局的3种思路

　　CSS三列布局

　　实现CSS等分布局的4种方式

　　CSS等高布局的6种方式

　　CSS全屏布局的5种方式

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

效果

　　元素显示隐藏的9种思路

　　实现滑动门的3种方法

　　CSS画出的图