常用CSS 经常更新

前缀css

1. webkit核心 chrom, safari: -webkit
2. firfox: -moz
3. IE: -ms

CSS 选择器

1. "*": 用于匹配任何标记
2. ">": 指定直接父子关系
3. "空格": 匹配某一层有父子关系
4. "+": 同一级别有兄弟关系中间不能有其他元素 li + li 只会应用后面的li
5. "p[att="value"]": 选择包含特殊属性值的节点, att后可以加^, $, * 相当于正则, 分别表示 指定值开始, 结束, 包含
6. "div~img": 同一级别有兄弟关系, 只要有同一个父节点

CSS 伪类选择器

1. E:root 匹配E所在元素的根元素。一般是 docment
2. E:nth-child(n), 匹配第n个元素如果是E就应用E， E:nth-last-child 倒过来

• 2n+1，odd 所有奇数行
• 2n, even 所有偶数行

3. E:nth-of-type(n) 匹配第n个E， E:nth-last-of-type 倒过来
4. E:last-child(n) 匹配最后一个并且是E， E:first-child(n) 倒过来
5. E:last-of-type(n) 匹配最后一个E元素， E:first-of-type(n) 倒过来
6. E:only-child(n) 只有一个子元素并且是E
7. E:only-of-type(n) 只包含同E这个类型的元素
8. E:empty 匹配E元素. 且不包含子节点 (文本也是节点)
9. E:enabled 可以用的E元素 E:disabled 相反
10. E:checked 选择的E元素
11. E:not(s) 匹配是E并且没有s的 s只能是单一选择器
12. E:target 匹配是E。 并且url有指向 这个元素

CSS定位

1. relative: 相对定位， 相对自己在文档流的位置, 不脱离文档流
2. absolute: 绝对定位，相对于最近的一个有定位的父元素, 脱离文档流
3. fixed: 跟absolute一样, 不过是根据视窗
4. z-index: 绝对定位要用的, 叠放顺序
5. flex: 弹性布局

媒体类型

1. @media screen: 用于屏幕，最常用
2. @media print: 用于打印
3. all: 所有媒体

CSS 伪类

1. a:link: 未访问
2. a:visited: 已访问
3. a:hover: 移动到上面
4. a:active: 选定
5. li:first-child: 匹配任何一个父元素的第一个li元素
6. q:lang(ss): q元素的lang属性是ss的时候应用

CSS属性

1. cursor: 鼠标的光标类型
2. rgba: 多了一个透明度, 只会应用到指定元素， hsla定义色调，饱和度，亮度
3. 分栏

• column-count: 栏数, 未设定就会有尽可能多的栏
• column-width: 栏宽
• column-gap: 间距
• column-rule: 每栏的样式

4. word-wrap text-wrap 一起控制文本换行, 前者处理字符换行问题, 后者处理换行模式
5. box-shadow text-shadow 分别给框和text加阴影
6. border-radius: 圆角, 可以做很多图案
7. border-image: 边框背景图
8. transform: 各种形变

• matrix: 有6个参数的变换矩阵
• translate: 2个参数变换
• scale: 缩放
• rotate: 角度参数旋转, 需要先定义transform-origin
• skew: 斜切变换

9. text-shadow 阴影, 可以定义多色阴影，用逗号分割

• 第一个值 水平位移
• 第二个值 垂直位移， 正值是偏右偏下, 负值是偏左偏上
• 第三个值 模糊半径,
• 第四个值 颜色

10. white-space 可以控制字符串里面的空格和换行
11. background-size 可以控制背景图大小
12. resize 可以缩放
13. outline 加轮廓，跟border差不多但是不占空间
14. nav-index 用来代替tabindex属性
15. nav-up/right/left/down 控制方向键移到哪里
16. @font-face 可以导入外部字体
17. -webit-box-reflect 设置倒影

弹性布局(flex)

1. flex-grow 占据当前行的百分比 1是100%
2. align-self 可以控制高度是否拉伸，怎么对齐
   ...

grid布局

1. ....