CSS
1、 基础篇
1.1、选择器
| 基础选择器 | 类型 | 描述 |
|---|---|---|
| * | 通配选择器 | 选择所有标签 |
| .class | 类选择器 | |
| #id | ID 选择器 | |
| tag | 元素选择器 | 选择所有 tag 标签 tag1,tag2：选择所有 tag1、tag2 标签 |
| 子代选择器 | 描述 |
|---|---|
| tag1 tag2 | 选择所有 tag1 标签内部的所有 tag2 标签（直系关系） |
| tag1>tag2 | 选择所有 tag1 标签的所有 tag2 直接子标签（父子关系） |
| 兄弟选择器 | 描述 |
|---|---|
| tag1+tag2 | 选择所有 tag1 标签之后紧接的一个 tag2 标签（兄弟关系） |
| tag1~tag2 | 选择位于所有 tag1 标签之后的所有 tag2 兄弟标签（兄弟关系） |
| 属性选择器 | 描述 |
|---|---|
| [attr] | 选择带有 attr 属性的所有标签 |
| tag[attr] | 选择带有 attr 属性的所有 tag 标签 |
| tag[attr=value] | 选择 attr 属性为 value 的所有 tag 标签 |
| tag[attr^=value] | 选择 attr 属性以 value 开头的所有 tag 标签 |
| tag[attr$=value] | 选择 attr 属性以 value 结尾的所有 tag 标签 |
| tag[attr*=value] | 选择 attr 属性包含 value 子串的所有 tag 标签 |
| tag[attr~=value] | 选择 attr 属性包含 value 单词的所有 tag 标签 |
| tag[attr|=value] | 选择 attr 属性为 value 的所有 tag 标签 或者 选择 attr 属性以 value- 开头的所有 tag 标签（注意value后有一个连接字符） |
1.2、长度单位
| 长度 | 描述 |
|---|---|
| mm | 毫米 |
| cm | 厘米 |
| px | 显示器的一个像素单位 |
| em | 值*当前元素的 font-size（没有的话就一直往上级找 font-size，最后还是没有的话就采用默认的 font-size 大小） |
| rem | 值*根元素的 font-size（没有设置的话就采用默认的 font-size 大小） |
| 百分比 | 父元素长宽的百分比 |
1.3、CSS2 常用属性
| 颜色 | 描述 | 示例 |
|---|---|---|
| 颜色名 | teal | |
| rgb | rgb（红，绿，蓝） | |
| HEX / HEXA | #红绿蓝 / #红绿蓝透明度 |
#FF998866（可以简写为 #F986） |
| 字体 | 描述 | 描述 |
|---|---|---|
| font-size | 字体大小 | 示例：font-size:12px |
| font-family | 字体族 | 示例：font-family:“Segoe Script”,“微软雅黑” |
| font-style | 字体风格 | 示例：font-style:italic（斜体） |
| font-weight | 字体粗细 | 属性值：lighter / normal / bold / bolder / 数值（不带单位） |
| font | 复合属性 | 属性值的顺序：其他属性 大小 字体族（以空格分隔） |
| 文本 | 描述 |
|---|---|
| color | 字体颜色 |
| background-color | 背景颜色 |
| letter-spacing | 字母/汉字间距（单位：px） |
| word-spacing | 单词间距（前后为空的视为一个单词）（单位：px） |
| text-decoration | 文本修饰，接收三个属性：类别、样式、颜色（可以乱序） 类别 —— overline：上划线，underline:下划线，line-through：删除线样式 —— dotted：虚线，wavy：波浪线 |
| text-indent | 缩进，单位是 px，设置为字体大小的两倍，就相当于首行缩进两个空格 |
| text-align | 文本对齐left：左对其，center：居中，right：右对其 |
| line-height | 行高，line-height 一般要设置比 font-size 更大一些normal：浏览器会自动调整，保证在最紧凑的情况下，不会出现不同行的字体发生重叠的情况 |
| vertical-align | 非块级子元素的垂直方向对齐方式top：顶部对其，bottom：底部对齐，baseline：基线对齐（默认） |
| 列表 | 描述 |
|---|---|
| list-style-type | 列表符号的类型none：不要符号，square：小方块，lower-roman：小写罗马数字，upper-roman：大写罗马数字，decimal：数字 |
| list-style-position | 列表符号的位置inside：列表符号跟文本是一体的，outside：列表符号跟文本不是一体的（给 li 标签加个背景颜色可以看出区别） |
| list-style-image | 自定义列表符号 |
| list-style | 符合属性，可以乱序 |
| 边框 | 描述 |
|---|---|
| border-width | 边框宽度 |
| border-color | 边框颜色 |
| border-style | 边框样式solid：实现，dashed：虚线，dotted：点线，double：双实线 |
| border | 符合属性，可以乱序 |
| 表格 | 描述 |
|---|---|
| table-layout | 控制列宽auto：根据列的内容调整，不同列宽度可能不同，fixed：根据全局进行跳转，所有列的宽度相同 |
| border-spacing | 控制单元格间距 |
| empty-cells | 隐藏没有内容的单元格边框show：显示，hide：隐藏 |
| border-collapse | 合并相邻的单元格的边框（不是合并单元格）separate：不合并，collapse：合并（这会让 table-spacing、empty-cells 失效） |
| caption-side | 设置 thead 标签的位置top：顶部（默认），bottom：底部 |
| 背景 | 描述 |
|---|---|
| background-color | 背景颜色，默认是transparent（透明） |
| background-image | 背景图片（太小的话，默认是填充） |
| background-repeat | 背景图片的适应模式repeat：填充，repeat-x：水平填充，repeat-y：垂直填充，no-repeat：原模原样 |
| background-position | 背景图片的位置left top：左上角对齐，right bottom：右下角对齐，center center：居中对齐，10px 20px：距左10px、距顶20px |
| background | 符合属性，可以乱序 |
| 鼠标 | 描述 |
|---|---|
| cursor | 鼠标样式pointer：小手，move：移动，wait：等待，url(...),pointer：自定义 |
| 溢出 | 描述 |
|---|---|
| overflow | 溢出的处理方式hidden：隐藏，visible：显示（默认），scroll：滚动条，auto：自动 |
| overflow-x | 横向上的溢出处理方式 |
| overflow-y | 纵向上的溢出处理方式 |
| 隐藏 | 描述 |
|---|---|
| display | 隐藏none：不占位隐藏 |
| visibility | 隐藏show：显示（默认），hidden：占位隐藏 |
1.4、盒模型
| display 声明盒模型 | 描述 |
|---|---|
| block | 块元素 |
| inline-block | 行内块元素 |
| inline | 行内元素 |
| 元素的显示模式 | 描述 | 注意点 |
|---|---|---|
| 块元素/块级元素 | 宽度拉满独占一行，高度默认由内容撑开，可以自行设置 | |
| 行内元素/内联元素 | 不独占一行，宽高由内容决定，不能自行设置 | |
| 行内块元素 | 不独占一行，宽高默认由内容决定，可以自行设置 | 行内元素的左右 margin 可以设置，上下 margin 设置完了没有效果 |
