前缀css
- webkit核心 chrom, safari: -webkit
- firfox: -moz
- IE: -ms
CSS 选择器
- "*": 用于匹配任何标记
- ">": 指定直接父子关系
- "空格": 匹配某一层有父子关系
- "+": 同一级别有兄弟关系中间不能有其他元素 li + li 只会应用后面的li
- "p[att="value"]": 选择包含特殊属性值的节点, att后可以加^, $, * 相当于正则, 分别表示 指定值开始, 结束, 包含
- "div~img": 同一级别有兄弟关系, 只要有同一个父节点
CSS 伪类选择器
- E:root 匹配E所在元素的根元素。一般是 docment
- E:nth-child(n), 匹配第n个元素如果是E就应用E， E:nth-last-child 倒过来
- 2n+1，odd 所有奇数行
- 2n, even 所有偶数行
- E:nth-of-type(n) 匹配第n个E， E:nth-last-of-type 倒过来
- E:last-child(n) 匹配最后一个并且是E， E:first-child(n) 倒过来
- E:last-of-type(n) 匹配最后一个E元素， E:first-of-type(n) 倒过来
- E:only-child(n) 只有一个子元素并且是E
- E:only-of-type(n) 只包含同E这个类型的元素
- E:empty 匹配E元素. 且不包含子节点 (文本也是节点)
- E:enabled 可以用的E元素 E:disabled 相反
- E:checked 选择的E元素
- E:not(s) 匹配是E并且没有s的 s只能是单一选择器
- E:target 匹配是E。 并且url有指向 这个元素
CSS定位
- relative: 相对定位， 相对自己在文档流的位置, 不脱离文档流
- absolute: 绝对定位，相对于最近的一个有定位的父元素, 脱离文档流
- fixed: 跟absolute一样, 不过是根据视窗
- z-index: 绝对定位要用的, 叠放顺序
- flex: 弹性布局
媒体类型
- @media screen: 用于屏幕，最常用
- @media print: 用于打印
- all: 所有媒体
CSS 伪类
- a:link: 未访问
- a:visited: 已访问
- a:hover: 移动到上面
- a:active: 选定
- li:first-child: 匹配任何一个父元素的第一个li元素
- q:lang(ss): q元素的lang属性是ss的时候应用
CSS属性
- cursor: 鼠标的光标类型
- rgba: 多了一个透明度, 只会应用到指定元素， hsla定义色调，饱和度，亮度
- 分栏
- column-count: 栏数, 未设定就会有尽可能多的栏
- column-width: 栏宽
- column-gap: 间距
- column-rule: 每栏的样式
- word-wrap text-wrap 一起控制文本换行, 前者处理字符换行问题, 后者处理换行模式
- box-shadow text-shadow 分别给框和text加阴影
- border-radius: 圆角, 可以做很多图案
- border-image: 边框背景图
- transform: 各种形变
- matrix: 有6个参数的变换矩阵
- translate: 2个参数变换
- scale: 缩放
- rotate: 角度参数旋转, 需要先定义transform-origin
- skew: 斜切变换
- text-shadow 阴影, 可以定义多色阴影，用逗号分割
- 第一个值 水平位移
- 第二个值 垂直位移， 正值是偏右偏下, 负值是偏左偏上
- 第三个值 模糊半径,
- 第四个值 颜色
- white-space 可以控制字符串里面的空格和换行
- background-size 可以控制背景图大小
- resize 可以缩放
- outline 加轮廓，跟border差不多但是不占空间
- nav-index 用来代替tabindex属性
- nav-up/right/left/down 控制方向键移到哪里
- @font-face 可以导入外部字体
- -webit-box-reflect 设置倒影
弹性布局(flex)
- flex-grow 占据当前行的百分比 1是100%
- align-self 可以控制高度是否拉伸，怎么对齐
...
grid布局
- ....
网友评论