##### 2.4.6.3. 文本框得到焦点伪类选择器
`:focus` 伪类选择器用于选取获得焦点的表单元素。焦点就是光标，一般情况 `<input>` 类表单元素才能获取，因此这个选择器也主要针对于表单元素来说

input:focus { background-color:yellow; }

##### 2.4.6.4. 结构(位置)伪类选择器（CSS3)
结构伪类选择器主要根据**文档结构**来选择器元素，常用于根据父级选择器里面的子元素

| 
选择符
 | 简介
 |
| --- | --- |

| 
`:first-child`
 | 选取属于其父元素的首个子元素的指定选择器
 |

| 
`:last-child`
 | 选取属于其父元素的最后一个子元素的指定选择器
 |

| 
`:nth-child(n)`
 | 匹配属于其父元素的第 N 个子元素，不论元素的类型
 |

| 
`:nth-last-child(n)`
 | 选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。
 |

| 
`E:first-of-type`
 | 选择指定类型E的第一个元素
 |

| 
`E:last-of-type`
 | 选择指定类型E的最后一个元素
 |

| 
`E:nth-of-type(n)`
 | 选择指定类型E的第n个元素
 |


**注意：n 可以是数字、关键词或公式**

- n 如果是数字，就是选择第n个子元素，里面数字从1开始
- n 可以是关键字：`even`（偶数），`odd`（奇数）
- n 可以是公式：常见的公式如下 ( 如果n是公式，则从0开始计算，但是第0个元素或者超出了元素的个数会被忽略 )

![](https://gitee.com/moonzero/images/raw/master/code-note/20200822213010118_28100.png)

li:first-child { / 选择第一个孩子 / color: pink; } li:last-child { / 最后一个孩子 / color: purple; } li:nth-child(4) { / 选择第4个孩子 n 代表第几个的意思 / color: skyblue; } li:nth-child(2n) { / 选择所有偶数的孩子 2n 代表偶数的意思 / color: red; } li:nth-child(n) { / 选择所有奇数的孩子 n 代表奇数的意思 / color: yellow; } / nth-child 会把所有的盒子都排列序号 / / 执行的时候首先看 :nth-child(1) 之后回去看前面div / section div:nth-child(1) { background-color: red; } / nth-of-type 会把指定元素的盒子排列序号 / / 执行的时候首先看 div指定的元素，之后回去看 :nth-of-type(1) 第几个孩子 / section div:nth-of-type(1) { background-color: blue; }

**nth-child 与 nth-of-type 的区别**

- `nth-child` 对父元素里面所有子元素排序选择（序号是固定的，先找到第n个子元素，然后看看是否和E匹配
- `nth-of-type` 对父元素里面指定子元素进行排序选择。先去匹配E类型，然后再根据E类型找第n个子元素
##### 2.4.6.5. 目标伪类选择器(CSS3)

- `:target`：目标伪类选择器，选择器可用于选取当前活动的目标元素

:target { color: red; font-size: 30px; }

#### 2.4.7. 伪元素选择器（CSS3)
伪元素选择器可以利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构。
##### 2.4.7.1. 基础语法与使用

- `E::first-letter`：文本的第一个单词或字（如中文、日文、韩文等）
- `E::first-line`：文本第一行，如果缩小浏览器，换行后的那部分文本则无效
- `E::selection`：可改变选中文本的样式

p::first-letter { font-size: 20px; color: hotpink; }

/ 首行特殊样式 / p::first-line { color: skyblue; }

p::selection { / font-size: 50px; / color: orange; }

- `E::before`和`E::after`：在E元素内部的开始位置和结束位创建一个元素，该元素为行内元素，且必须要结合content属性使用。

div::befor { content:”开始”; } div::after { content:”结束”; }

> `E:after`、`E:before` 在旧版本里是伪元素，CSS3的规范里“`:`”用来表示伪类，“`::`”用来表示伪元素，但是在高版本浏览器下`E:after`、`E:before`会被自动识别为`E::after`、`E::before`，这样做的目的是用来做兼容处理。


##### 2.4.7.2. before 和 after 伪元素(详解)
之所以被称为伪元素，是因为它们不是真正的页面元素，在html页面没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式，表面上看上去貌似是页面的某些元素来展现，**实际上是css样式展现的行为，在 dom 里面是看不见其创建的元素，因此被称为伪元素**。是伪元素在html代码机构中的展现，可以看出无法伪元素的结构无法审查

| 
选择符
 | 简介
 |
| --- | --- |

| 
`::before`
 | 在元素内部的前面插入内容
 |

| 
`::after`
 | 在元素内部的后面插入内容
 |


**注意：**

- 以上两个伪元素的`content`属性，表示伪元素的内容，设置`::before`和`::after`时**必须设置其`content`属性**，否则伪元素就不起作用
- before 在内容的前面，after 在内容的后面
- 伪元素 `::before` 和 `::after` 添加的内容默认是`inline`行内元素
- **伪元素和标签选择器一样，权重为 1**

##### 2.4.7.3. 伪元素使用案例
需求：给图片增加一个鼠标经过的特效

#### 2.4.8. 伪元素选择器与伪类选择器的区别
##### 2.4.8.1. css3为了区分伪类和伪元素，伪元素采用双冒号写法

- 【常见伪类】 `:hover`,`:link`,`:active`,`:target`,`:not()`,`:focus`
- 【常见伪元素】 `::first-letter`,`::first-line`,`::before`,`::after`,`::selection`
- `::before`和`::after`下特有的content，用于在css渲染中向元素逻辑上的头部或尾部添加内容。
- 这些添加不会出现在DOM中，不会改变文档内容，不可复制，仅仅是在css渲染层加入。
- 所以不要用`:before`或`:after`展示有实际意义的内容，尽量使用它们显示修饰性内容，例如图标。
- `::before`和`::after`必须配合content属性来使用，content用来定义插入的内容，content必须有值，至少是空。默认情况下，伪类元素的`display`是默认值`inline`，可以通过设置`display:block`来改变其显示
##### 2.4.8.2. `::` 与 `:` 的写法区别

- **相同点**
- 都可以用来表示伪类对象，用来设置对象前的内容
- `:before`和`::before`写法是等效的


- **不同点**
- `:before`是CSS2的写法，`::before`是CSS3的写法
- `:before`的兼容性要比`::before`好 ，不过在H5开发中建议使用`::before`比较好


#### 2.4.9. 扩展选择器优先级

- css中权重最高的样式为行内样式，就是以`style=" "`方式直接加入到HTML标签内的样式，其在css优先级中具有最高的权重。
- 其次是ID选择器，ID选择器由于每一个ID在代码中只能出现一次，和唯一指向性，具有第二高的权重。
- 权重处于第三的是类、伪类和属性选择器。
## 3. CSS的显示模式
### 3.1. 元素的显示模式
标签的类型(显示模式)。HTML标签一般分为块标签和行内标签两种类型，它们也称块元素和行内元素。
#### 3.1.1. 块级元素(block-level)
每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。常见的块元素标签有`<h1>`-`<h6>`、`<p>`、`<div>`、`<ul>`、`<ol>`、`<li>`等，**其中`<div>`标签是最典型的块元素**<br />**块级元素的特点**：

1. 自己独占一行，每个块级元素总是从新行开始
1. 高度，行高、外边距以及内边距都可以控制。
1. 宽度默认是容器（父级元素宽度）的100%
1. 是一个容器或者盒子，里面可以放行内元素和其他块级元素。

**需注意的细节**：

- 文字类的元素内不能使用块级元素
- `<p>`标签主要用于存放文字，因此`<p>`里面不能放块级元素，特别是不能放`<div>`。同理，`<h1>`-`<h6>`等都是文字类块级标签，里面也不能放其他块级元素
#### 3.1.2. 行内元素(inline-level)
行内元素（内联元素）不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。常见的行内元素有`<a>`、`<strong>`、`<b>`、`<em>`、`<i>`、`<del>`、`<s>`、`<ins>`、`<u>`、`<span>`等，其中`<span>`标签最典型的行内元素。<br />行内元素的特点：

1. 和相邻行内元素在一行上，一行可以显示多个。
1. 高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。
1. 默认宽度就是它本身内容的宽度。
1. 行内元素只能容纳文本或其他行内元素。（`<a>`标签特殊）

**需注意的细节**：

1. 特殊情况链接`<a>`里面可以放块级元素，但是给`<a>`转换为块级模式最安全
1. 链接里面不能再放链接。
#### 3.1.3. 行内块元素（inline-block）
行内元素中有几个特殊的标签：`<img />`、`<input />`、`<td>`，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。<br />**行内块元素的特点**：

1. 和相邻行内元素（行内块）在一行上，但是之间会有空白缝隙。一行可以显示多个（行内元素特点）。
1. 默认宽度就是它本身内容的宽度（行内元素特点）。
1. 高度，行高、外边距以及内边距都可以控制（块级元素特点）。
#### 3.1.4. 元素显示模式总结

- 块级元素的特点：
1. 总是从新行开始
1. 高度，行高、外边距以及内边距都可以控制
1. 宽度默认是容器的100%
1. 可以容纳内联元素和其他块元素


- 行内元素的特点：
1. 和相邻行内元素在一行上
1. 高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效
1. 默认宽度就是它本身内容的宽度
1. 行内元素只能容纳文本或则其他行内元素



![](https://gitee.com/moonzero/images/raw/master/code-note/20200816124450316_15740.png)
#### 3.1.5. 标签显示模式转换（display属性）
在特殊情况下，需要元素模式进行转换，即一个模式的元素需要另外一种模式的特性。比如想要增加链 `<a>`的点击的触发范围时，需要将行内元素`<a>`转成块级元素。

- `display: inline;`：将块级元素转换成行内元素
- `display: block;`：将行内元素转换成块级元素
- `display: inline-block;`：将行内元素或块级元素转换成行内块元素
- `display: none;`：将元素隐藏
### 3.2. 元素的显示与隐藏
在CSS中有比较常见的三种属性将元素设置为显示或隐藏，需要理解区分开，分别是：`display`、`visibility`和`overflow`。他们的主要目的是让一个元素在页面中消失，但是不在文档源码中删除。
#### 3.2.1. display 显示
`display`属性是设置或检索对象是否及如何显示。即是让一个元素在页面中隐藏或者显示出来

- `display: none;`：隐藏对象
- `display: block`：显示对象，_注意，这个属性除了转换为块级元素之外，同时还有显示元素的意思_。

特点：**display 隐藏元素后，不再占有原来的位置**。
#### 3.2.2. visibility 可见性
`visibility`属性是设置或检索是否显示对象，指定一个元素应可见还是隐藏

- `visible`：元素可视
- `hidden`：元素隐藏

特点： **visibility 隐藏元素后，继续占有原来的位置**。

> 如果隐藏元素想要原来位置，就用`visibility: hidden;`

> 如果隐藏元素不想要原来位置，就用`display: none;` (用处更多，重点）


#### 3.2.3. overflow 溢出
`overflow`属性是检索或设置当元素的内容超过其指定高度及宽度时，如何管理内容

- `visible`：不剪切内容也不添加滚动条。默认值
- `auto`：超出自动显示滚动条，不超出不显示滚动条
- `hidden`：不显示超过对象尺寸的内容，超出的部分隐藏掉（常用）
- `scroll`：不管超出内容否，总是显示滚动条

一般情况下，都不想让溢出的内容显示出来，因为溢出的部分会影响布局。但是如果有定位的盒子，请慎用`overflow: hidden;`，因为它会隐藏多余的部分
#### 3.2.4. 显示隐藏综合案例-仿土豆网显示隐藏遮罩

## 4. 盒子模型（重点）
**CSS就三个大模块：盒子模型、浮动、定位，其余的都是细节。**
### 4.1. 盒子模型概念
所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容（content）、内边距（padding）、边框（border）和外边距（margin）组成。<br />看透网页布局的本质：把网页元素比如文字图片等等，放入盒子里面，然后利用CSS摆放盒子的过程，就是网页布局。
### 4.2. 盒子模型图解（Box Model）
网页元素盒子模型的各个属性图<br />![](https://gitee.com/moonzero/images/raw/master/code-note/20190702101222142_17072.jpg)<br />所有的文档元素（标签）都会生成一个矩形框，成为元素框（element box），它描述了一个文档元素再网页布局汇总所占的位置大小。因此，**每个盒子除了有自己大小和位置外，还影响着其他盒子的大小和位置**<br />![](https://gitee.com/moonzero/images/raw/master/code-note/20200816165157020_22694.png)
### 4.3. 盒子属性汇总表
| 
属性
 | 作用
 |
| --- | --- |

| 
border
 | 盒子边框
 |

| 
width
 | 盒子宽度，**随着内部的变化，宽和高会撑大**
 |

| 
height
 | 盒子高度
 |

| 
margin
 | 外边距
 |

| 
padding
 | 内边距
 |


### 4.4. 盒子边框属性（border）
**注意：设置盒子边框宽度会影响盒子大小**
#### 4.4.1. 边框样式属性汇总表
| 
作用
 | 属性
 |
| --- | --- |

| 
边框线型
 | border-style
 |

| 
边框宽度
 | border-width
 |

| 
边框颜色
 | border-color
 |

| 
边框圆角
 | border-radius
 |


#### 4.4.2. 单独设置边框属性

选择器 { / 边框属性—设置边框宽度 / border-width: 1px; / 边框属性—设置边框样式 / border-style: none || solid || dashed || dotted || double; / 边框属性—设置边框颜色 / border-color: red; }

`border-style`边框样式属性，用于定义页面中边框的风格，常用属性值如下：

- `none`：没有边框即忽略所有边框的宽度（默认值）
- `solid`：边框为单实线(最为常用的)
- `dashed`：边框为虚线
- `dotted`：边框为点线
- `double`：边框为双实线
#### 4.4.3. 边框属性汇总写法

/ 注意：多个值中间以空格隔开 / 选择器 { boder: 粗细(border-width) 线形(border-style) 颜色(border-color); }

#### 4.4.4. 盒子边框常用写法汇总
| 
设置内容
 | 样式属性
 | 常用属性值
 |
| --- | --- | --- |

| 
上边框
 | border-top-style:样式; border-top-width:宽度;border-top-color:颜色;border-top:宽度 样式 颜色;
 | 
 |

| 
下边框
 | border-bottom-style:样式;border- bottom-width:宽度;border- bottom-color:颜色;border-bottom:宽度 样式 颜色;
 | 
 |

| 
左边框
 | border-left-style:样式; border-left-width:宽度;border-left-color:颜色;border-left:宽度 样式 颜色;
 | 
 |

| 
右边框
 | border-right-style:样式;border-right-width:宽度;border-right-color:颜色;border-right:宽度 样式 颜色;
 | 
 |

| 
样式综合设置
 | border-style:上边 [右边 下边 左边];
 | none无（默认）、solid单实线、dashed虚线、dotted点线、double双实线
 |

| 
宽度综合设置
 | border-width:上边 [右边 下边 左边];
 | 像素值
 |

| 
颜色综合设置
 | border-color:上边 [右边 下边 左边];
 | 颜色值、#十六进制、rgb(r,g,b)、rgb(r%,g%,b%)
 |

| 
边框综合设置
 | border:四边宽度 四边样式 四边颜色;
 | 
 |


#### 4.4.5. 圆角边框(CSS3)
在 CSS3 中，新增了圆角边框样式。`border-radius`属性用于设置元素的外边框圆角。<br />**语法格式**：(注：属性值中间以空格隔开)

border-radius: 左上角 右上角 右下角 左下角;

**细节**：

- 参数值可以为**数值或百分比**的形式
- 如果是**正方形**，想要设置为一个圆，把**数值修改为高度或者宽度的一半即可，或者直接写为50%**
- 该属性是有一个简写`border-radius: length;`，分别代表左上角、右上角、右下角、左下角的长度都为length
- 分开写：`border-top-left-radius`、`border-top-right-radius`、`border-bottom-right-radius` 和 `border-bottom-left-radius`

示例

<!DOCTYPE html>

#### 4.4.6. 表格（table标签）的细线边框（扩展）
在学习html的table标签时，设置表格的单元格叠加后边框会很粗<br />只要设置`border-collapse:collapse;`属性，就表示边框合并在一起。
### 4.5. 内边距（padding）
`padding`属性用于设置内边距。是指边框与内容之间的距离。分别设置上、右、下、左内边距属性如下：

- `padding-top`：上内边距
- `padding-right`：右内边距
- `padding-bottom`：下内边距
- `padding-left`：左内边距

也可以直接设置`padding`属性，其值的个数可以是1~4个，中间以空格隔开，分别代表设置的内容如下：

| 
值的个数
 | 代表设置的内边距方向
 |
| --- | --- |

| 
1
 | `padding：上下左右边距` 比如padding: 3px; 表示上下左右都是3像素
 |

| 
2
 | `padding: 上下边距 左右边距` 比如 padding: 3px 5px; 表示 上下3像素 左右 5像素
 |

| 
3
 | `padding：上边距 左右边距 下边距` 比如 padding: 3px 5px 10px; 表示 上是3像素 左右是5像素 下是10像素
 |

| 
4
 | `padding:上内边距 右内边距 下内边距 左内边距` 比如: padding: 3px 5px 10px 15px; 表示 上3px 右是5px 下 10px 左15px
 |



> 注：4个值设置的规律是从上开始，按顺时针方向设置


**注意：内边距也会影响盒子大小。解决方案：如果要保证盒子跟效果图大小保持一致，则让width/height减去多出来的内边距大小即可**<br />**如果父级元素有宽度/高度，子级元素不指定宽度/高度，增加内边距也不会改变盒子的宽度/高度**
### 4.6. 外边距（margin）
`margin`属性用于设置盒子的外边距，即控制盒子和盒子之间的距离。设置外边距会在元素之间创建“空白”区域，这空白区域通常不能放置其他内容。
#### 4.6.1. 外边距相关属性

- `margin-top`: 上外边距
- `margin-right`: 右外边距
- `margin-bottom`: 下外边距
- `margin-left`: 上外边距
- `margin`: 上外边距 右外边距 下外边距 左外边距

> 注：取值顺序跟内边距相同。


#### 4.6.2. `margin`属性设置四边值写法
| 
外边距的写法
 | 含义
 |
| --- | --- |

| 
`margin: 10px;`
 | 设置：四边
 |

| 
`margin: 10px 20px;`
 | 分别设置：上下 左右
 |

| 
`margin: 10px 20px 30px;`
 | 分别设置：上 左右 下
 |

| 
`margin: 10px 20px 30px 40px;`
 | 分别设置：上 右 下 左
 |


#### 4.6.3. `margin-*`设置一边值的写法
| 
外边距的写法
 | 含义
 | 内边距的写法
 | 含义
 |
| --- | --- | --- | --- |

| 
`margin-top: 10px;`
 | 上外边距
 | `padding-top: 10px;`
 | 上内边距
 |

| 
`margin-left: 10px;`
 | 左外边距
 | `padding-left: 10px;`
 | 左内边距
 |

| 
`margin-bottom: 10px;`
 | 下外边距
 | `padding-bottom: 10px;`
 | 下内边距
 |

| 
`margin-right: 10px;`
 | 右外边距
 | `padding-right: 10px;`
 | 右内边距
 |


#### 4.6.4. 外边距典型应用 - 实现盒子居中（块级元素）
外边距可以让块级盒子**水平居中**，但是必须满足3个条件：

1. 必须是块级元素
1. 盒子必须指定了宽度（width）
1. 盒子**左右的外边距**都设置为`auto`

示例：

.header{ width:960px; margin:0 auto; }

常见的写法，以下三种都可以：

margin-left: auto; margin-right: auto; margin: auto; margin: 0 auto; / 这种最常用 /

> 注意：以上方法是让块级元素水平居中，**行内元素或者行内块元素水平居中给其父元素添加 `text-align:center` 即可**。


#### 4.6.5. 清除元素的默认内外边距
网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此在布局前，为了更方便地控制网页中的元素，首先要清除下网页元素的内外边距。

• { padding: 0; / 清除内边距 / margin: 0; / 清除外边距 / }

> 注意：行内元素是只有左右外边距的，是没有上下外边距的。内边距，在ie6等低版本浏览器也会有问题。所以尽量不要给行内元素指定上下的内外边距。但是转换为块级和行内块元素就可以了


#### 4.6.6. 文字盒子居中

- 文字水平居中，设置`text-align: center;`
- 盒子水平居中，将左右 `margin` 改为 `auto`

text-align: center; / 文字居中水平 / margin: 10px auto; / 盒子水平居中，左右 margin 改为 auto /

#### 4.6.7. 图片和背景区别

- 使用插入图片的场景：比如产品展示类
- 使用背景图片的塌景：一般用于小图标背景或者超大背景图片

section img { width: 200px; / 更改插入图片的大小 width 和 height / height: 210px; margin-top: 30px; / 更改插入图片的位置，可以用 margin 或 padding 盒子模型，插入的图片也是一个盒子 / margin-left: 50px; }

aside { width: 400px; height: 400px; border: 1px solid purple; background: #fff url(images/sun.jpg) no-repeat;

background-size: 200px 210px; / 更改背景图片的大小只能用 background-size / background-position: 30px 50px; / 更改背景图片的位置使用 background-position / }

#### 4.6.8. 外边距合并
使用`margin`定义块元素的**垂直外边距**时，可能会出现外边距的合并。
##### 4.6.8.1. 相邻块元素垂直外边距的合并
当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则**他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者的值。这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）**。<br />![](https://gitee.com/moonzero/images/raw/master/code-note/20200718001053765_22606.png)<br />此问题的解决方案是：**尽量只给一个盒子添加`margin`值即可**
##### 4.6.8.2. 嵌套块元素垂直外边距的合并
对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。<br />![](https://gitee.com/moonzero/images/raw/master/code-note/20200718001221068_30056.png)<br />此问题的解决方案：

1. 可以给父元素定义1像素的上边框(如果不想显示边框，将颜色设置为`transparent`即可)
1. 可以给父元素定义1像素的上内边距
1. 可以给父元素添加`overflow: hidden;`属性

> 还有其他方法，比如**设置了浮动、固定，绝对定位的盒子不会有塌陷问题**


#### 4.6.9. content宽度和高度（了解）
使用宽度属性width和高度属性height可以对盒子的大小进行控制。<br />width和height的属性值可以为不同单位的数值或相对于父元素的百分比%，实际项目中最常用的是像素值。<br />大多数浏览器，如Firefox、IE6及以上版本都采用了W3C规范，符合CSS规范的盒子模型的总宽度和总高度的计算原则是：

/外盒尺寸计算（元素空间尺寸）/ Element空间高度 = content height + padding + border + margin Element 空间宽度 = content width + padding + border + margin /内盒尺寸计算（元素实际大小）/ Element Height = content height + padding + border （Height为内容高度） Element Width = content width + padding + border （Width为内容宽度）

注意：

1. 宽度属性width和高度属性height仅适用于块级元素，对行内元素无效（`<img>`标签和`<input>`标签除外）。
1. 计算盒子模型的总高度时，还应考虑上下两个盒子垂直外边距合并的情况。
1. **如果一个盒子没有给定宽度/高度或者继承父亲的宽度/高度，则`padding`属性不会影响本盒子大小**
#### 4.6.10. 盒子模型布局稳定性
盒子模型什么情况下使用内边距，什么情况下使用外边距？其实大部分情况下是可以混用的。哪种方便使用哪种。但根据稳定性来分，建议如下：<br />**优先使用 宽度（width）> 内边距（padding）> 外边距（margin）**<br />推荐原因如下：

1. `margin` 会有外边距合并的问题，还有ie6浏览器 `margin` 加倍的bug，所以最后使用
1. `padding` 会影响盒子大小，需要进行加减计算，所以其次使用。
1. `width` 没有问题，经常使用宽度剩余法 高度剩余法来做。
### 4.7. CSS3 的盒模型 (box-sizing)
#### 4.7.1. 定义和用法

box-sizing: content-box|border-box|inherit;

CSS3中可以通过 `box-sizing` 来指定盒模型，其属性值为`content-box`、`border-box`，这样原计算盒子大小的方式就发生了改变。可以分成两种情况：

| 
值
 | 描述
 |
| --- | --- |

| 
`content-box`
 | 这是由 CSS2.1 规定的宽度高度行为。即使用传统模式宽度计算，盒子大小=`width`+`padding`+`border`。此值为其默认值，其让元素维持W3C的标准Box Mode
 |

| 
`border-box`
 | CSS3的盒子模型，盒子的宽度 = CSS中设置的宽度(`width`)，`padding`和`border`是包含到`width`里面的。即CSS3中的盒子模型的`padding`和`border`不会撑大盒子了
 |

| 
`inherit`
 | 规定应从父元素继承 `box-sizing` 属性的值。
 |



> 注：上面的标注的width指的是CSS属性里设置的`width: length`，content的值是会自动调整的。

div:first-child { width: 200px; height: 200px; background-color: pink; box-sizing: content-box; / 设置为以前的标准盒模型 w3c / padding: 10px; border: 15px solid red; / 盒子大小为 width + padding + border。content-box:此值为其默认值，其让元素维持W3C的标准Box Mode / } div:last-child { width: 200px; height: 200px; background-color: purple; padding: 10px; box-sizing: border-box; / padding border 设置不撑开盒子 / border: 15px solid red; / margin: 10px; / / 盒子大小为 width。就是说 padding 和 border 是包含到width里面的 / }

#### 4.7.2. 传统还是 CSS3 盒子模型

- 移动端可以全部 CSS3 盒子模型
- PC端如果需要完全兼容，则使用传统模式，如果不考虑兼容性，则选择 CSS3 盒子模型
### 4.8. box-shadow（盒子阴影）
`box-shadow`属性用于给盒子显示阴影部分，<br />**语法格式**：

box-shadow: 水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影；

| 
值
 | 描述
 |
| --- | --- |

| 
h-shadow
 | 必需。水平阴影的位置。允许负值。
 |

| 
v-shadow
 | 必需。垂直阴影的位置。允许负值。
 |

| 
blur
 | 可选。模糊距离。
 |

| 
spread
 | 可选。阴影的尺寸。
 |

| 
color
 | 可选。阴影的颜色。请参阅 CSS 颜色值。
 |

| 
inset
 | 可选。将外部阴影 (outset) 改为内部阴影。
 |


**细节**：

1. 前两个属性是必须写的。其余的可以省略。
1. 外阴影(`outset`，默认值) 但是不能写，否则造成阴影无效。如果想要内阴影修改为`inset`
1. 盒子阴影不占用空间，不会影响其他盒子排列。

## 5. 网页布局-浮动(float)（重点）
### 5.1. 传统网页布局的三种方式
网页布局的本质：就是用CSS来摆放盒子位置。<br />CSS 提供了三种传统布局方式(简单来说，就是盒子如何进行排列顺序)：

- **普通流（标准流）**
- **浮动**
- **定位**

> 注意：实际开发中，一个页面基本都包含了这三种布局方式


### 5.2. 网页布局-普通流(normal flow)
normal flow 也有称为文档流。<br />html语言当中另外一个相当重要的概念：标准流！或者普通流。普通流实际上就是一个网页内标签元素正常从上到下，从左到右排列顺序的意思

1. 块级元素会独占一行，从上向下顺序排列。常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table
1. 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。常用元素：span、a、i、em 等

以上都是标准流布局，标准流是最基本的布局方式。
### 5.3. 浮动的定义
#### 5.3.1. 什么是浮动
有很多的布局效果，标准流没有办法完成，此时就可以利用浮动完成布局。因为浮动可以改变元素标签默认的排列方式<br />浮动最早是用来控制图片，以便达到其他元素（特别是文字）实现“环绕”图片的效果。后面发现float属性可以让任何盒子可以一行排列。慢慢开始用浮动的特性来做页面的布局了。（CSS3后已经是真正意义上的网页布局）<br />浮动最典型的应用：可以让多个块级元素一行内排列显示。<br />![](https://gitee.com/moonzero/images/raw/master/code-note/20200719083901137_22351.png)<br />**网页布局第一准则：多个块级元素纵向排列用标准流，多个块级元素横向排列用浮动。**<br />元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程
#### 5.3.2. CSS中如何设置浮动
在CSS中，`float`属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。其基本语法格式如下：

选择器 { float: 属性值; }

| 
属性值
 | 描述
 |
| --- | --- |

| 
left
 | 元素向左浮动（如果设置了float属性，此为默认值）
 |

| 
right
 | 元素向右浮动
 |

| 
none
 | 元素不浮动（不设置float属性，此为默认值）
 |


### 5.4. 浮动特性
添加浮动之后的元素，会有以下特点：

1. 浮动元素会脱离标准流(脱标)
1. 浮动的元素会一行内显示并且元素顶部对齐
1. 浮动的元素会具有行内块元素的特性
#### 5.4.1. 特性1 - 浮动元素脱标

1. 浮动（float）的元素会脱离标准普通流的控制（浮）移动到指定位置（动），俗称脱标
1. 浮动的盒子**不再保留原先的位置**
1. 浮动只有左右浮动
#### 5.4.2. 特性2 - 浮动元素的排序
如果多个盒子都设置了浮动，则它们会按照属性值的方向，**在一行内显示并且顶端对齐排列**<br />**注意：浮动的元素是互相贴靠在一起的（元素之间不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。**
#### 5.4.3. 特性3 - 浮动元素的行内块元素特性
任何元素都可以浮动。不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性。

> - 如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定
> - 浮动的盒子中间是没有缝隙的，是紧挨着一起的
> - 行内元素也是一样的效果


#### 5.4.4. 浮动内幕特性示例详解
浮动会脱离标准流，不占位置，会影响标准流。浮动只有左右浮动。

1. 浮动首先创建包含块的概念（包裹）。就是说，浮动的元素总是找离它最近的父级元素对齐。但是不会超出内边距的范围。

![](https://gitee.com/moonzero/images/raw/master/code-note/20200719115035429_4108.jpg)

2. 浮动的元素排列位置，跟上一个元素（块级）有关系。
- 如果A元素有设置浮动，B元素也设置浮动，则A与B元素会在父容器的顶部对齐；

![](https://gitee.com/moonzero/images/raw/master/code-note/20200719120631838_8252.png)

- 如果A元素无设置浮动（标准流），B元素也设置浮动，则B元素的顶部会与A元素的底部对齐；

.father > div:first-child { width: 300px; height: 100px; background-color: purple; / float: left; / color: yellow; text-align: center; line-height: 100px; } .father > div:last-child { width: 200px; height: 200px; background-color:green; color: skyblue; float: left; text-align: center; line-height: 200px; }

![](https://gitee.com/moonzero/images/raw/master/code-note/20200719120951355_21172.png)

- **总结：浮动的目的就是为了让多个块级元素同一行上显示**。
1. 由以上两种情况可以推断出，在一个父盒子里面的子盒子，如果其中一个子级盒子有浮动的，则其他子级盒子都需要浮动。这样所有盒子才能一行对齐显示。
1. 元素添加浮动后，元素会具有行内块元素的特性。元素的大小完全取决于定义的大小或者默认的内容多少，浮动则根据元素书写的位置来显示相应的浮动。


- 特点：
1. 加了浮动的元素盒子是浮起来的，漂浮在其他的标准流盒子上面
1. 加了浮动的盒子，它浮起来不占位置的，它原来的位置留给了后面的标准流盒子


- 特别注意
1. 浮动的盒子需要和标准流的父级搭配使用
1. 特别注意浮动可以使元素（行内、块）显示模式体现为行内块元素的特性


### 5.5. 常见浮动布局用法
#### 5.5.1. 浮动元素和标准流父级元素搭配使用
为了约束浮动元素位置, 网页布局一般采取的策略是：**先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置**。符合网页布局第一准侧.

最终效果：<br />![](https://gitee.com/moonzero/images/raw/master/code-note/20200817233839454_2305.png)
#### 5.5.2. 版心（可视区）和布局流程
在制作网页时，要想使页面结构清晰、有条理，也需要对网页进行“排版”。“版心”(可视区) 是指网页中主体内容所在的区域。一般在浏览器窗口中水平居中显示，常见的宽度值为960px、980px、1000px、1200px等。<br />为了提高网页制作的效率，布局时通常需要遵守一定的布局流程，具体如下：

1. 确定页面的版心（可视区）
1. 分析页面中的行模块，以及每个行模块中的列模块
1. 制作HTML结构
1. CSS初始化，然后开始运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块
#### 5.5.3. 一列固定宽度且居中
![](https://gitee.com/moonzero/images/raw/master/code-note/20200719124302976_5988.jpg)

<!DOCTYPE html>

#### 5.5.4. 两列左窄右宽型
![](https://gitee.com/moonzero/images/raw/master/code-note/20200719124344369_13434.jpg)

<!DOCTYPE html>

#### 5.5.5. 通栏平均分布型
![](https://gitee.com/moonzero/images/raw/master/code-note/20200719124410070_23928.jpg)

<!DOCTYPE html>

#### 5.5.6. 浮动布局注意点

1. 浮动和标准流的父盒子搭配

**先用标准流的父元素排列上下位置, 之后内部子元素采取浮动排列左右位置**

2. 一个元素浮动了，理论上其余的兄弟元素也要浮动

一个盒子里面有多个子盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，以防止引起问题。<br />**浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流**
### 5.6. 消除浮动
#### 5.6.1. 为什么要清除浮动
由于父级盒子很多情况下，不方便给高度，希望子元素将父盒子撑开，但是子盒子设置了浮动后不再占用原文档流的位置，最后会导致父级盒子高度变为0，就会影响后面的标准流盒子的排版。为了解决这些问题，此时就需要在该元素中清除浮动。
#### 5.6.2. 清除浮动本质
清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0的问题。**准确地说，并不是清除浮动，而是清除浮动后造成的影响**<br />注意：如果父盒子本身有高度，则不需要清除浮动<br />**清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了**<br />![](https://gitee.com/moonzero/images/raw/master/code-note/20200719132443426_23721.jpg)<br />![](https://gitee.com/moonzero/images/raw/master/code-note/20200719132502347_16327.jpg)
### 5.7. 清除浮动的方法
其实本质叫做闭合浮动。清除浮动就是把浮动的盒子圈到里面，让父盒子闭合出口和入口不让他们出来影响其他元素。<br />在CSS中，`clear`属性用于清除浮动，其基本语法格式如下：

选择器 { clear: 属性值; }

| 
属性值
 | 描述
 |
| --- | --- |

| 
left
 | 不允许左侧有浮动元素（清除左侧浮动的影响）
 |

| 
right
 | 不允许右侧有浮动元素（清除右侧浮动的影响）
 |

| 
both
 | 同时清除左右两侧浮动的影响
 |


#### 5.7.1. 额外标签法
额外标签法也称为隔墙法，是W3C推荐的做法，主要是通过在浮动元素末尾添加一个空的标签。例如`<div style=”clear:both”></div>`，或则其他标签`<br>`等亦可。

- 优点：通俗易懂，书写方便
- 缺点：添加许多无意义的标签，结构化较差。

**注意： 要求这个新的空标签必须是块级元素。**

<!DOCTYPE html>

#### 5.7.2. 父级添加overflow属性方法
可以通过触发BFC的方式，可以实现清除浮动效果。给**父级标签**添加以下属性，均可实现

overflow: hidden | auto | scroll;

- 优点：代码简洁
- 缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

<!DOCTYPE html>

#### 5.7.3. 使用after伪元素清除浮动（推荐）
`:after`方式为空元素的升级版，好处是不用单独加标签。使用方法：

.clearfix:after { content: “.”; display: block; height: 0; clear: both; visibility: hidden; } .clearfix {zoom: 1;} / IE6、7 专有 */

- 优点：符合闭合浮动思想，结构语义化正确
- 缺点：由于IE6-7不支持`:after`，使用`zoom:1`触发`hasLayout`。

> 注意：`content:"."`里面尽量跟一个小点，或者其他，尽量不要为空，否则再firefox 7.0前的版本会有生成空格。

<!DOCTYPE html>

123

#### 5.7.4. 使用before和after双伪元素清除浮动（推荐）
使用方法：给父级元素增加以下固定的属性

.clearfix:before, .clearfix:after { content: “”; display: table; / 触发bfc 防止外边距合并 / } .clearfix:after { clear: both; } .clearfix { *zoom: 1; }

- 优点：代码更简洁
- 缺点：由于IE6-7不支持`:after`，使用`zoom:1`触发`hasLayout`。
## 6. 网页布局-定位(position)（重点）
### 6.1. 为什么要用定位？
定位常用的场景：

1. 某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子
1. 当滚动窗口的时候，盒子是固定屏幕某个位置的

以上效果，如果用标准流或者浮动，实现会比较复杂或者难以实现，此时用定位来做就比较简单<br />**浮动与定位的应用场景总结**：

- 浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子
- 定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子
### 6.2. 元素的定位属性
定位：将盒子定在某一个位置，并且按照定位的方式移动盒子<br />定位属性主要包括**定位模式**和**边偏移**两部分。**定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。**
#### 6.2.1. 定位模式(定位的分类)
在CSS中，position属性用于定义元素的定位模式，其基本语法格式如下：

选择器 { position: 属性值; }

position属性的常用值

| 
定位模式值
 | 描述
 |
| --- | --- |

| 
static
 | 自动定位（默认定位方式）
 |

| 
relative
 | 相对定位，相对于其原文档流的位置进行定位
 |

| 
absolute
 | 绝对定位，相对于其上一个已经定位的父元素进行定位
 |

| 
fixed
 | 固定定位，相对于浏览器窗口进行定位
 |


#### 6.2.2. 边偏移
| 
边偏移属性
 | 描述
 |
| --- | --- |

| 
top
 | 顶端偏移量，定义元素相对于其父元素上边线的距离
 |

| 
bottom
 | 底部偏移量，定义元素相对于其父元素下边线的距离
 |

| 
left
 | 左侧偏移量，定义元素相对于其父元素左边线的距离
 |

| 
right
 | 右侧偏移量，定义元素相对于其父元素右边线的距离
 |


定位要和边偏移搭配使用了， 比如`top: 100px; left: 30px;`等等。**注意不能同给上下或者左右的边偏移**
### 6.3. 静态定位(static)
静态定位是所有元素的默认定位方式。可以理解为网页的标签文档流就是静态定位的。

选择器 { position: static; }

> 通俗来说，就是网页中所有元素都默认的是静态定位，其实就是标准流的特性。在静态定位状态下，无法通过边偏移属性（top、bottom、left或right）来改变元素的位置。


### 6.4. 相对定位(relative)
相对定位是将元素相对于它在标准流中的原位置进行移动后的定位，是相对于它原来的位置。

选择器 { position: relative; }

对元素设置相对定位后，可以通过边偏移属性改变元素的位置，但是它在文档流中的位置仍然保留。如下图所示，即是一个相对定位的效果展示：<br />![](https://gitee.com/moonzero/images/raw/master/code-note/20200719164926953_8398.png)

- **相对定位特点**：
1. 每次移动的位置，相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）
1. 相对定位最重要的一点是，**它可以通过边偏移移动位置后，原来在标准流的位置继续占有，即相对定位的元素并没有脱标。**

> 就是说，相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。（相对定位不脱标）。如果说浮动的主要目的是让多个块级元素一行显示，那么定位的主要价值就是移动位置，让盒子到想要的位置上去。


### 6.5. 绝对定位(absolute)
绝对定位是元素在移动位置的时候，是**相对于它的父元素或者以上元素来说的**

选择器 { position: absolute; }

- **绝对定位特点**：
1. 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document文档）。
1. 如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置
1. **绝对定位不再占有原先的位置（完全脱标）**

#### 6.5.1. 父级元素没有定位
若所有父元素都没有定位，以浏览器为准对齐(document文档)。<br />![](https://gitee.com/moonzero/images/raw/master/code-note/20200719171249037_16281.png)

#### 6.5.2. 父级元素有定位
如果父级元素有定位，子元素的绝对定位将依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。<br />![](https://gitee.com/moonzero/images/raw/master/code-note/20200719171830295_11859.png)

#### 6.5.3. 子绝父相
“子绝父相”是定位的重要的口诀。意思是**子级是绝对定位的话，父级要用相对定位**。原因如下：

1. 子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。
1. 父盒子需要加定位限制子盒子在父盒子内显示
1. 父盒子布局时，需要占有位置，防止后面的标准流盒子排版错乱，因此父亲只能是相对定位

总结：**使用“子绝父相”，因为子级是绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方。但父盒子布局时，需要占有位置，因此父亲只能是相对定位。这就是子绝父相的由来**

- **相对定位经常用来作为绝对定位的父级**
- **因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位**

<!DOCTYPE html>

![](https://gitee.com/moonzero/images/raw/master/code-note/20200719175751502_6788.png)
### 6.6. 固定定位(fixed)
固定定位是元素固定于浏览器可视区的位置，即以浏览器窗口作为参照物来定义网页元素的位置。主要使用场景：可以在浏览器页面滚动时元素的位置不会改变。

选择器 { position: fixed; }

当对元素设置固定定位后，它将脱离标准文档流的控制，始终依据浏览器窗口来定义自己的显示位置。不管浏览器滚动条如何滚动也不管浏览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。**固定定位有以两个特点**：

1. 固定定位的元素跟父元素没有任何关系，**只以浏览器的可视窗口为参照点移动元素。**。
1. 固定定位完全脱标，不占原先位置，**不随着滚动条滚动**。

> 注：ie6等低版本浏览器不支持固定定位

<!DOCTYPE html>

![](https://gitee.com/moonzero/images/raw/master/code-note/20200719181831197_8129.png)
### 6.7. 粘性定位 sticky（了解）
粘性定位可以被认为是相对定位和固定定位的混合。

选择器 { position: sticky; top: 10px; }

**粘性定位的特点**：

1. 以浏览器的可视窗口为参照点移动元素（固定定位特点）
1. 粘性定位**占有原先的位置**（相对定位特点）
1. 必须添加 top 、left、right、bottom 其中一个才有效

> 不常用，兼容性较差，IE不支持


### 6.8. 叠放次序（z-index）
当对多个元素同时设置定位时，定位元素之间有可能会发生重叠。在CSS中，要想调整重叠定位元素的堆叠顺序，可以对定位元素应用`z-index`层叠等级属性，其取值可为正整数、负整数和0。

选择器 { z-index: 1; }

叠放次序有以下注意点：

1. `z-index`的默认属性值是0，取值越大，定位元素在层叠元素中越居上。
1. 如果取值相同，则根据书写顺序，后来居上。
1. 后面数字一定不能加单位。
1. 只有相对定位，绝对定位，固定定位有此属性，其余标准流，浮动，静态定位都无此属性，亦不可指定此属性。

### 6.9. 五种定位总结
| 
定位模式
 | 是否脱标占有位置
 | 是否可以使用边偏移
 | 移动位置基准
 |
| --- | --- | --- | --- |

| 
静态static
 | 不脱标，正常模式
 | 不可以
 | 正常模式
 |

| 
相对定位relative
 | 不脱标，占有位置
 | 可以
 | 相对自身位置移动
 |

| 
绝对定位absolute
 | 完全脱标，不占有位置
 | 可以
 | 相对于定位父级移动位置
 |

| 
固定定位fixed
 | 完全脱标，不占有位置
 | 可以
 | 相对于浏览器移动位置
 |

| 
粘性定位sticky
 | 不脱标，占有位置
 | 可以
 | 相对于浏览器可视区
 |


### 6.10. 定位拓展
#### 6.10.1. 固定定位小技巧 - 固定到版心右侧
小技巧：

1. 让固定定位的盒子`left: 50%`。走到浏览器可视区（也可以看做版心）的一半位置
1. 让固定定位的盒子`margin-left`版心宽度的一半距离。多走版心宽度的一半位置

就可以让固定定位的盒子贴着版心右侧对齐了。

效果：<br />![](https://gitee.com/moonzero/images/raw/master/code-note/20200818235640115_26015.png)
#### 6.10.2. 绝对定位小技巧 - 让盒子水平/垂直居中
普通的盒子主要设置左右margin属性为auto即可，即`margin: auto;`，但是对于绝对定位就无效了<br />绝对定位的盒子也可以水平或者垂直居中，其算法如下：

1. 首先设置`left: 50%`，即父级盒子的一半大小
1. 再设置子级元素外边距`margin-left`为负的自身宽度的一半值即可。

<!DOCTYPE html>

#### 6.10.3. 绝对定位（固定定位）会完全压住盒子
浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（或图片）。因为浮动产生的目的最初是为了做文字环绕效果的，文字会围绕浮动元素<br />但是绝对定位（固定定位） 会压住下面标准流所有的内容。
### 6.11. 定位模式转换
跟浮动一样，元素添加了绝对定位或固定定位之后，元素模式也会发生转换，都转换为行内块模式

1. 行内元素添加绝对或者固定定位，可以直接设置高度和宽度。
1. 块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。

**因此，行内元素如果添加了绝对定位、固定定位或浮动后，可以不用转换模式，直接给高度和宽度即可。**

## 7. CSS高级样式技巧
### 7.1. CSS实现三角形
只要不给盒子高度与宽度，分别设置5个边框，就出现如下效果<br />![](https://gitee.com/moonzero/images/raw/master/code-note/20200819233409543_1357.png)

.box1 { width: 0; height: 0; border-top: 10px solid pink; border-right: 10px solid red; border-bottom: 10px solid blue; border-left: 10px solid green; }

如果只生成三角形，主要设置一个边框，其余3个边框都设置为透明即可

.box2 { width: 0; height: 0; line-height: 0; font-size: 0; border: 50px solid transparent; border-left-color: pink; margin: 100px auto; }

### 7.2. CSS用户界面样式
界面样式，就是更改一些用户操作样式，比如：更改用户的鼠标样式，表单轮廓，防止表单域拖拖拽等。但是比如滚动条的样式改动受到了很多浏览器的抵制，就不会去改变
#### 7.2.1. 鼠标样式（cursor）
设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。语法如下：

cursor: default(默认光标，通学是一个箭头) | pointer(小手) | move(移动) | text(文本) | crosshair(十字线)

示例：

• 我是默认光标（通常是一个箭头）
• 我是小手（光标呈现为指示某个链接的指针）
• 我是移动光标（十字有勾的光标）
• 我是文本光标（像“I”的文本选择光标）
• 我是十字线光标（十字样式的光标）

> 注： 尽量不要用小手光标因为火狐浏览器不支持`pointer`，在ie6以上都支持的尽量用


#### 7.2.2. 表单轮廓（outline）
轮廓（`outline`）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。语法如下：

outline: outline-color || outline-style || outline-width;

通过都不会设置，一般都是用来去掉包围的线（多用于去掉文本输入框，获取焦点时在文本输入框外面有一圈光亮的线）<br />去掉外围光亮线的写法是：`outline: 0;` 或者 `outline: none;`

#### 7.2.3. 防止拖拽文本域（resize）
`resize：none;`这个属性可以防止火狐、谷歌等浏览器随意的拖动多行文本域的大小。

### 7.3. 垂直对齐（vertical-align）

- 如果让带有宽度的块级元素居中对齐，是`margin: 0 auto;`
- 如果让文字居中对齐，是`text-align: center;`

`vertical-align`用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。经常用于设置图片或者表单(行内块元素）和文字垂直对齐。

vertical-align: baseline | top | middle | bottom

| 
属性值
 | 作用描述
 |
| --- | --- |

| 
baseline
 | 默认。元素放置在父元素的基线上。
 |

| 
top
 | 把元素的顶端与行中最高元素的顶端对齐
 |

| 
middle
 | 把此元素放置在父元素的中部。
 |

| 
bottom
 | 把元素的顶端与行中最低的元素的顶端对齐。
 |


![](https://gitee.com/moonzero/images/raw/master/code-note/20200720225650177_8265.jpg)<br />**特别注意是：`vertical-align`不影响块级元素中的内容对齐，它只针对于行内元素或者行内块元素，特别是行内块元素，通常用于控制图片/表单与文字的对齐**<br />![](https://gitee.com/moonzero/images/raw/master/code-note/20200720225214514_13578.png)
#### 7.3.1. 图片、表单和文字对齐
通过vertical-align 控制图片和文字的垂直关系了。 默认的图片会和文字基线对齐。

#### 7.3.2. 去除图片底侧空白缝隙
**有个重要特性需要记忆：图片或者表单等行内块元素，它的底线会和父级盒子的基线对齐。这样会造成一个问题，就是图片底侧会有一个空白缝隙。**<br />解决的方法有两种：

1. 给img元素`vertical-align: middle | top;`。让图片不要和基线对齐。（推荐）
1. 给img元素添加 `display：block;` 转换为块级元素就不会存在问题了。

### 7.4. CSS处理溢出的文字隐藏
#### 7.4.1. word-break（自动换行）
`word-break`属性用于设置英文单词是否换行。主要属性如下：

word-break: normal | break-all | keep-all;

| 
属性值
 | 作用描述
 |
| --- | --- |

| 
normal
 | 使用浏览器默认的换行规则
 |

| 
break-all
 | 允许在单词内换行
 |

| 
keep-all
 | 只能在半角空格或连字符处换行
 |



> 注：主要用于处理英文单词

#### 7.4.2. white-space（文本显示方式）
`white-space`属性用于设置或检索对象内文本显示方式，通常使用来强制一行显示内容。主要属性如下：

word-wrap: normal | break-word;

| 
属性值
 | 作用描述
 |
| --- | --- |

| 
normal
 | 默认处理方式，只在允许的断字点换行
 |

| 
break-word
 | 强制在同一行内显示所有文本，直到文本结束或者遭遇`<br>`标签对象才换行
 |



> 注：此属性可以处理中文


#### 7.4.3. CSS长连续字母或数据不换行解决方法
CSS 长连续字母或数据不换行解决方法：CSS字母自动换行，CSS数字自动换行

word-wrap: break-word; word-break: break-all;

#### 7.4.4. text-overflow（文字溢出）
`text-overflow`属性是用于设置或检索是否使用一个省略标记（`...`）来标示对象内文本的溢出，语法与主要属性如下：

text-overflow: clip | ellipsis;

| 
属性值
 | 作用描述
 |
| --- | --- |

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

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



> **注意：首先必须设置`white-space: nowrap`强制一行内显示，然后再和`overflow`属性搭配使用**

#### 7.4.5. 溢出的文字省略号显示案例
##### 7.4.5.1. 单行文本溢出显示省略号
单行文本溢出显示省略号--必须满足三个条件

/1. 先强制一行内显示文本/ white-space: nowrap; （ 默认 normal 自动换行） /2. 超出的部分隐藏/ overflow: hidden; /3. 文字用省略号替代超出的部分/ text-overflow: ellipsis;

##### 7.4.5.2. 多行文本溢出显示省略号（了解）
多行文本溢出显示省略号，有较大兼容性问题， 适合于webKit浏览器或移动端（移动端大部分是webkit内核）

overflow: hidden; text-overflow: ellipsis; / 弹性伸缩盒子模型显示 / display: -webkit-box; / 限制在一个块元素显示的文本的行数 / -webkit-line-clamp: 2; / 设置或检索伸缩盒对象的子元素的排列方式 / -webkit-box-orient: vertical;

### 7.5. 常见布局技巧
#### 7.5.1. margin负值的运用
需求：商品列表，当鼠标经过时，商品的盒子出现外边框<br />![](https://gitee.com/moonzero/images/raw/master/code-note/20200820230425670_12755.png)<br />实现步骤

1. 让每个盒子`margin`往左侧移动`-1px`正好压住相邻盒子边框
1. 鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有有定位，则加相对定位（保留位置），如果有定位，则加`z-index`）

• 1
• 2
• 3
• 4
• 5

#### 7.5.2. 文字围绕浮动元素
巧妙运用浮动元素不会压住文字的特性，实现左边图片+右边文字的效果

【集锦】热身赛-巴西0-1秘鲁 内马尔替补两人血染赛场

#### 7.5.3. 行内块巧妙运用
需求，实现常见页面居中的分页页码栏的效果，思路如下：

1. 把这些链接盒子转换为行内块，之后给父级指定`text-align: center;`
1. 利用行内块元素中间有缝隙，并且给父级添加`text-align: center;` 行内块元素会水平会居中