1 回顾
1.1 盒子模型
1. 三种显示模式：
块级元素 block
行内元素 inline
行内块元素 inline-block
2. 元素默认的显示模式
块级： html body div h1~h6 p hr br pre ul ol li dl dt dd table tbody thead tfoot caption tr form option
行内： em strong sup sub del ins a label span
行内块： img input button textarea select td th iframe
3. 设置元素的显示模式
display: inline / block / inline-block
1.2 CSS 常用属性
1. 字体属性
font-family 字体族科
font-size 字体大小
font-style 是否斜体字 italic
font-weight 是否加粗 bold / lighter / 100 ~ 900
font 复合属性
2. 文字颜色
color 颜色
3. 文本属性
word-spacing 词间距
letter-spacing 字母（汉字）间距
text-decoration 文本修饰 none/underline/overline/line-throuth
text-align 在元素中水平对齐方式 left、center、right
line-height 行高
vertical-align 用于行内元素或行内块元素与同行的文本如何对齐 baseline top bottom middle 长度
text-indent 首行缩进
4. 背景属性
background-color 背景颜色
background-image 背景图片 url()
background-repeat 背景图重复方式 repeat / no-repeat / repeat-x / repeat-y
background-position 背景图在元素上的值 关键字 长度（表示坐标）
background-attachment 设置背景图固定 scroll / fixed
background 复合属性
2 CSS 常用属性
2.1 鼠标光标属性
| CSS 属性名 | 功能 | 属性值 |
|---|---|---|
| cursor | 设置鼠标光标的样式 | pointer：小手 move：移动图标 |
/* 自定义鼠标光标 */
cursor: url(images/arrow.ico),pointer;
2.2 列表属性
列表相关的属性，可以作用在 ul、ol、li 元素上。
| CSS 属性名 | 功能 | 属性值 |
|---|---|---|
| list-style-type | 设置列表项目的符号 | none：去掉项目符号 其他值一般不会用 |
| list-style-position | 列表项目符号的位置 | inside：在 li 的里面 outside：在 li 的外边 |
| list-style-image | 自定义项目符号 | url(图片地址) |
| list-style | 复合属性 | 值没有数量和顺序要求 |
/*最常见的列表属性设置*/
list-style: none;
2.3 表格属性
| CSS 属性名 | 功能 | 属性值 |
|---|---|---|
| table-layout | 定义列宽度 | auto：自动，列宽根据内容计算。 fixed：固定列宽（不指定宽平均分） |
| border-collapse | 合并单元格边框 | collapse：合并 |
| border-spacing | 单元格间距 | 长度 生效的前提：单元格边框不能合并 |
| empty-cells | 用于隐藏没有内容的单元格 | show：显示，默认 hide：隐藏 生效前提：单元格不能合并 |
| caption-side | 设置表格标题位置 | top：在表格上面，默认 bottom：在表格下面 |
注意：
以上 5 个 css 属性设置给 table 元素才有用，给其他元素无效。
需要记的：
table-layout、border-collapse
3 CSS 选择器
3.1 基本选择器
1、标签名选择器
2、ID 名选择器
3、类名选择器
4、全局选择器
3.2 组合选择器
多个基本选择器可以组合在一起使用。
① 后代元素选择器
选择器1 选择器2 {
}
② 子元素元素
选择器1>选择器2 {
}
③ 并集选择器
选择器1,选择器2,选择器3,选择器4 {
}
④ 交集选择器
选择器1选择器2 {
}
多个选择器组合不需要任何分隔符。
标签名 和 类名组合，标签名在前。
3.3 伪类选择器
:link 未访问状态
:visited 已访问状态（历史记录中存在该地址）
:hover 鼠标悬停状态
:active 激活状态（鼠标按键在元素按下不松手）
注意：
四个伪类选择器一起写的时候，按照顺序；“爱恨原则”：link visited hover active。
:link 和 :visited 只能用于超链接元素； :hover 和 :active 适用于所有的元素。
3.4 选择器权重（优先级）
权重等级：
ID名选择器
类名选择器 / 伪类选择器
标签名选择器
如何比较两个组合选择器的优先级？
先比较两个选择器中ID的数量，胜者优先级高。
比ID无法分出胜负，再比较二者 类名和伪类 的数量，胜者优先级高。
比 类名和伪类 还无法分出胜负，再比较标签名的数量，胜者优先级高。
在属性值的后面添加关键字 !important 会让优先级无限大； 该关键字是设置给某个具体的css属性的，不是给选择器的。
!important > style > ID > Class/伪类 > 标签名 > 全局选择器
4 盒子模型深入讲解
4.1 盒子模型的组成
① 盒子模型的相关概念
内容： 内容区域就是显示内容的区域；元素中的文本或后代元素都是它的内容。
内边距： 内容与边框（边界）的间距。
边框： 边框就是盒子的边界了。
外边距： 盒子与其他盒子的距离。
其中，内容、内边距和边框是盒子的组成部分；
② 影响盒子大小的因素
盒子的大小 = 内容的大小 + 内边距的大小 + 边框宽度。
外边距并不是盒子的一部分，所以外边距大小不会影响盒子大小，但是会影响盒子位置。
4.2 盒子中的内容区域
内容区是盒子模型的中心，它呈现了盒子的主要信息内容。
① 设置内容区域的宽高
| CSS 属性名 | 功能 | 属性值 |
|---|---|---|
| width | 设置内容区域宽度 | 长度 |
| max-width | 设置内容区域的最大宽度 | 长度 |
| min-width | 设置内容区域的最小宽度 | 长度 |
| height | 设置内容区域的高度 | 长度 |
| max-height | 设置内容区域的最大高度 | 长度 |
| min-height | 设置内容区域的最小高度 | 长度 |
注意：
max-width / min-width 一般不与 width 一起使用。
max-height / min-height 一般不与 height 一起使用。
② 块级元素的默认内容宽度
块级元素的默认总宽度 = 父元素内容区域的宽度 - 该块级元素的左右外边距
块级元素内容区域的默认宽度 = 父元素内容区域的宽度 - 该块级元素的左右外边距 - 该块级元素的左右边框宽度 - 该块级元素的左右内边距。
4.3 盒子的内边距 padding
内边距 padding 也叫补白或填充，是边框和内容之间的空间。
| CSS 属性名 | 功能 | 属性值 |
|---|---|---|
| padding-top | 上内边距 | 长度 |
| padding-right | 右内边距 | 长度 |
| padding-bottom | 下内边距 | 长度 |
| padding-left | 左内边距 | 长度 |
| padding | 复合属性 | 长度，可以设置 1 ~ 4 个值 |
padding 复合属性的使用规则：
padding: 10px; 表示四个方向内边距都是 10 px。
padding: 10px 20px; 表示上下内边距是10px，左右内边距是20px;
上下 左右padding: 10px 20px 30px; 表示上内边距10px，左右内边距20px，下内边距30px；
上 左右 下padding: 10px 20px 30px 40px; 表示上内边距10px，右内边距是20px，下内边距30px，左内边距40px；
上 右 下 左
padding 值的规则：
padding 的值不能是负数，也不能是
auto
行内元素设置内边距：
行内元素可以完美地设置左右内边距，上下内边距不能完美设置。
块级元素和行内块元素四个方向内边距都可以完美社会。
4.4 边框 border
| CSS 属性名 | 功能 | 属性值 |
|---|---|---|
| border-style | 边框线风格 复合了四个方向的边框风格 | none 默认值 solid 实线 dashed 虚线 dotted 点线 double 双实线 ... |
| border-width | 边框线宽度 复合了四个方向的边框宽度 | 长度，默认 3 px |
| border-color | 边框线颜色 复合了四个方向的边框颜色 | 颜色，默认黑色 |
| border | 复合属性 | 值没有顺序和数量要求。 |
| border-left border-left-style border-left-width border-left-color border-right ... border-top ... border-bottom ... | 分别设置各个方向的边框 | 同上 |
边框相关属性共 20 个。
border-style 、border-width、border-color 其实也是复合属性。
