CSS 知识框架

CSS 高级技巧

鼠标样式：cursor

定义:cursor : default 小白 | pointer 小手 | move 移动 | text 文本

轮廓： outline

是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。 outline : outline-color ||outline-style || outline-width

防止拖拽文本域：resize

定义:resize：none

vertical-align 垂直对齐

只针对于 行内元素或者行内块元素，特别是行内块元素， 通常用来控制图片/表单与文字的对齐。

溢出

word-break:自动换行

1. normal 使用浏览器默认的换行规则。

2. break-all 允许在单词内换行。

3. keep-all 只能在半角空格或连字符处换行</br>

text-overflow 文字溢出

1. ellipsis : 当对象内文本溢出时显示省略标记（...）

2. clip : 不显示省略标记（...），而是简单的裁切

过渡 transition:transition: 要过渡的属性 花费时间 运动曲线 何时开始;

2D 变形 transform

1. 移动 translate(x, y)

2. 缩放 scale(x, y)

3. 缩放 scale(x, y) 旋转 rotate(deg) transform:rotate(45deg)

4. 调整元素转换变形的原点：transform-origin transform-origin: 10px 10px

5. 倾斜 skew(deg, deg) transform:skew(30deg,0deg);

选择器

复合选择器

1. 交集选择器

2. 并集选择器:逗号隔开，集体分明

3. 后代选择器:当标签发生嵌套时，内层标签就成为外层标签的后代。

4. 子元素选择器:比如： .demo > h3 {color: red;} 说明 h3 一定是 demo 亲儿子。 demo 元素包含着 h3。5.属性选择器: div[class^=font]

5. E::first-letter 文本的第一个单词或字（如中文、日文、韩文等） 2. E::first-line 文本第一行； 3. E::selection 可改变选中文本的样式； 伪元素选择器

标签选择器

1. 元素选择器 标签名{属性 1:属性值 1; 属性 2:属性值 2; 属性 3:属性值 3; } 或者

2. 类选择器 .类名{属性 1:属性值 1; 属性 2:属性值 2; 属性 3:属性值 3; }

3. 多类名选择器:用逗号分隔

4. id 选择器:只能使用一次 5.通配符选择器: * { 属性 1:属性值 1; 属性 2:属性值 2; 属性 3:属性值 3; }6.伪类选择器