标签：
我个人学习比较重视系统性，学习的一个重要目标就是不断完善知识体系。逻辑严密、结构清晰的知识体系能够给人一种全局性的视野和稳健的思维框架，避免出现“只见树木，不见森林”的片面性和知识盲区。
好的知识框架在于全面和条理性，它的核心应该是简单的，简单到一句话就能提纲挈领，概括清楚。比如啥是计算机，计算机就是一种能储存和处理数据的设备。（A computer is a device that can store, retrieve, and process data.）越是简洁凝练的总结越是代表着对本质规律的深刻理解。
我从金融专业转行学习技术，常常感到各类API文档虽然全面，但是条理性不足，缺少框架结构，仅仅是知识点的罗列堆积。于是尝试自己总结。下表中的CSS知识体系参考了css88.com上面的文档，它的分类是非常优秀的，我对其中的部分分类进行了调整，形成了在逻辑上和结构上我个人比较满意的一个版本，基本算是做到了全面、简洁且清晰。这个体系重点是分类，不涉及具体的知识细节，知识永远在不断扩充，所以对知识的总结不可能“全面”，因此很多地方就省略掉了，包括值与单位这一块。但是分类是比较完善的，足够展现CSS全貌。
未来还会推出jQuery、JavaScript等一系列的知识体系，欢迎各位技术开发者一起调适和完善。
|
CSS知识体系 |
|||
|
CSS从知识面上可分为三部分：选择器、属性、规则； 属性可进一步分为基本属性、值与单位、私有属性、媒体查询； 规则包括重要声明、引入样式表和web字体、Hack等 |
|||
|
模块 |
类别 |
项目 |
值与单位 |
|
选择器 |
元素选择器 |
* element .class #id |
|
|
关系选择器 |
E F；E>F；E+F；E~F |
|
|
|
属性选择器 |
~=；^=；$=；*=；|= |
|
|
|
伪类选择器 |
: |
|
|
|
伪对象选择器 |
:: |
|
|
|
文本 |
字体 |
font类 |
|
|
颜色 |
color |
|
|
|
排版 |
text-align；text-indent；text-overflow …… word-break；word-wrap；word-spacing； letter-spacing vertical-align；line-height； white-space； tab-size； overflow-wrap； |
|
|
|
装饰 |
text-decoration类 text-shadow |
|
|
|
书写模式 |
derection…… |
|
|
|
选中许可 |
user-select |
|
|
|
盒模型 |
尺寸 |
width；height；min-；max- |
|
|
边框 |
border类 |
|
|
|
内边距 |
padding |
|
|
|
外边距 |
margin |
|
|
|
背景 |
background类 |
|
|
|
阴影 |
box-shadow |
|
|
|
尺寸模式 |
box-sizing |
|
|
|
布局 |
浮动 |
float；clear |
|
|
定位 |
position；top；right；bottom；left；z-index； |
|
|
|
clip 用于绝对定位元素 |
|
||
|
列表 |
list类 |
|
|
|
表格 |
table-layout； border-collapse； border-spacing； caption-side； empty-cell； |
|
|
|
分列 |
column均为CSS3 |
|
|
|
伸缩盒 |
均为CSS3 |
|
|
|
显示类型 |
display、visibility |
|
|
|
溢出模式 |
overflow |
|
|
|
2D/3D变换 |
变换方式 |
transform |
translate(x, y) translate3d(x, y, z) X Y Z |
|
scale(k) scale(x, y) scale3d() X Y Z |
|||
|
rotate(i) rotate3d(x, y, z, i) X Y Z |
|||
|
skew(x-i, y-i) X Y |
|||
|
matrix() |
|||
|
变换原点 |
transform-origin |
x, y, (z) 定位单位，z只能为length |
|
|
子元素3D属性 |
transform-style |
flat preserve-3d |
|
|
3D透视 |
perspective（仅webkit） |
|
|
|
perspective-origin（仅webkit） |
|
||
|
背面可见性 |
backface-visibility |
visible hidden |
|
|
Transition |
过渡效果 （时间轴） |
transition -property -duration -timing-function -delay |
timing-function: linear ease ease-in ease-out ease-in-out cubic-bezier(n, n, n, n) |
|
Animation |
基础 |
animation -name -duration -timing-function -delay |
|
|
循环次数 |
animation-iteration-count |
n（默认为1） infinite |
|
|
循环方向 |
animation-direction |
前提：循环次数大于1 normal alternative |
|
|
播放状态 |
animation-play-state |
running paused |
|
|
动画首尾状态 |
animation-fill-mode |
none forwards backwards both |
|
|
UI |
透明度 |
opacity |
|
|
外观样式 |
appearance |
|
|
|
轮廓 |
outline类 |
|
|
|
缩放 |
zoom |
|
|
|
resize |
|
||
|
鼠标样式 |
cursor |
|
|
|
事件目标设置 |
pointer-events |
|
|
|
其它 |
打印 |
page类 |
|
|
内容 |
content,用于:after和:before |
|
|
|
计数器 |
counter-increment； counter-reset |
|
|
|
嵌套标记 |
quotes |
|
|
|
私有属性 |
webkit扩展 |
-webkit-filter …… |
|
|
浏览器私有属性 |
略 |
|
|
|
媒体查询 |
查询对象样式 |
略 |
|
|
语法规则 |
支持性检测 |
@supports |
|
|
定义动画 |
@keyframes |
|
|
|
媒体查询 |
@media |
|
|
|
嵌入字体 |
@font-face |
|
|
|
嵌入样式表 |
@import 必须在顶部最先引入 |
|
|
|
字符编码 |
@charset |
|
|
|
页面设置 |
@page |
|
|
|
重要声明 |
!important |
|
|
|
CSS注释 |
/* */ |
|
|
|
Hack |
条件hack |
|
|
|
属性hack |
|
|
|
|
选择器hack |
|
|
|
标签：
原文地址：http://www.cnblogs.com/kidney/p/5450746.html
