一：Chrome 调试工具 – 查看 CSS 属性
首先打开浏览器，接着有两种方式可以打开 Chrome 调试工具
- 直接按 F12 键
- 鼠标右键页面 => 检查元素
点开检查即可
标签页含义：
- elements 查看标签结构
- console 查看控制台
- source 查看源码+断点调试
- network 查看前后端交互过程
- application 查看浏览器提供的一些扩展功能(本地存储等)
- Performance, Memory, Security, Lighthouse 暂时不使用, 先不深究
1.1 elements 标签页使用
- ctrl + 滚轮进行缩放, ctrl + 0 恢复原始大小.
- 使用 左上角 箭头选中元素
- 右侧可以查看当前元素的属性, 包括引入的类.
- 右侧可以修改选中元素的 css 属性. 例如颜色, 可以点击颜色图标, 弹出颜色选择器, 修改颜色. 例如字体大小, 可以使用方向键来微调数值.
- 此处的修改不会影响代码, 刷新就还原了~
- 如果 CSS 样式写错了, 也会在这里有提示. (黄色感叹号)
二： 元素的显示模式
CSS显示模式指HTML标签以什么样的模式显示在网页上，根据标签的显示模式，可以选择更合适的标签来布局网页
一般将 HTML标签分为块级标签、行内标签和行内块标签。
2.1 块元素（block）
特征:
- 在页面中独占一行，不会与任何元素共用一行，是从上到下排列的。
- 默认宽度：撑满父元素。 (和父元素一样宽)
- 默认高度：由内容撑开。
- 可以通过 CSS 设置宽高。
- 是一个容器(盒子), 里面可以放行内和块级元素.
2.2 行内元素（inline）
特征:
- 在页面中不独占一行，一行中不能容纳下的行内元素，会在下一行继续从左到右排列。
- 默认宽度：由内容撑开。
- 默认高度：由内容撑开。
- 无法通过 CSS 设置宽高。
- 行内元素只能容纳行内元素, 不能放块级元素
2.3 行内块元素（inline-block）
特征:
- 在页面中不独占一行，一行中不能容纳下的行内元素，会在下一行继续从左到右排列。
- 默认宽度：由内容撑开。
- 默认高度：由内容撑开。
- 可以通过 CSS 设置宽高。
2.4 改变显示模式
通过 CSS 中的 display 属性可以修改元素的默认显示模式，常用值如下：
| 值 | 描述 |
|---|---|
| none | 元素会被隐藏 |
| block | 元素将作为块级元素显示 |
| inline | 元素将作为内联元素显示 |
| inline-block | 元素将作为行内块元素显示 |
2.5 总结各元素的显示模式
2.5.1 块元素（block）
- 主体结构标签： < html > 、 < body >
- 排版标签： < h1 > ~ < h6 > 、 < hr > 、 < p > 、 < pre > 、 < div >
- 列表标签： < ul > 、 < ol > 、 < li > 、 < dl > 、 < dt > 、 < dd >
- 表格相关标签： < table > 、 < tbody > 、 < thead > 、 < foot > 、 < tr > 、< caption >
- < form > 与 < option >
2.5.2 行内元素（inline）
- 文本标签： < br > 、 < em > 、 < strong > 、 < sup > 、 < sub > 、 < del > 、 < ins >
- < a > 与 < label >
2.5.3 行内块元素（inline-block）
- 图片： < img >
- 单元格： 、 < th >
- 表单控件： < input > 、 < textarea > 、 < select > 、 < button >
- 框架标签： < iframe >
三： 盒模型
CSS 会把所有的 HTML 元素都看成一个盒子，所有的样式也都是基于这个盒子，这个盒子由这几个部分构成
- margin（外边距）： 盒子与外界的距离。
- border（边框）： 盒子的边框。
- padding（内边距）： 紧贴内容的补白区域。
- content（内容）：元素中的文本或后代元素都是它的内容。
注意：外边距 margin 不会影响盒子的大小，但会影响盒子的位置。
3.1 边框
基础属性：
- 粗细: border-width
- 样式: border-style, solid 实线边框 dashed 虚线边框 dotted 点线边框（ 默认没边框.）
- 颜色: border-color
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 500px;
height: 250px;
border-width: 10px;
border-style: solid;
border-color: green;
}
</style>
</head>
<body>
<div>test</div>
</body>
</html>
边框属性支持简写, 没有顺序要求：
border: 1px solid red;
可以改四个方向的任意边框.
border-top/bottom/left/right
注意：边框会撑大盒子
可以看到, width, height 是 500*250, 而最终整个盒子大小是 520 * 270. 边框10个像素相当于扩大了大小.
通过 box-sizing 属性可以修改浏览器的行为, 使边框不再撑大盒子.
* {
box-sizing: border-box;
}
box-sizing: border-box;表示盒模型中的宽度和高度包括了边框和内边距的计算
3.2 盒子内容区（content）
| 属性名 | 功能 | 属性值 |
|---|---|---|
| width | 设置内容区域宽度 | 长度 |
| max-width | 设置内容区域的最大宽度 | 长度 |
| min-width | 设置内容区域的最小宽度 | 长度 |
| height | 设置内容区域的高度 | 长度 |
| max-height | 设置内容区域的最大高度 | 长度 |
| min-height | 设置内容区域的最小高度 | 长度 |
3.3 盒子内边距（padding）
| 属性名 | 功能 | 属性值 |
|---|---|---|
| padding-top | 上内边距 | 长度 |
| padding-right | 右内边距 | 长度 |
| padding-bottom | 下内边距 | 长度 |
| padding-left | 左内边距 | 长度 |
| padding | 复合属性 | 长度，可以设置 1 ~ 4 个值 |
padding 复合属性的使用规则：
- padding: 10px; 四个方向内边距都是 10px 。
- padding: 10px 20px; 上下 10px ，左右 20px 。（上下、左右）
- padding: 10px 20px 30px; 上 10px ，左右 20px ，下 30px 。（上、左右、下）
- padding: 10px 20px 30px 40px; 上 10px ，右 20px ，下 30px ，左 40px 。（上、右、下、左）
注意：
- padding 的值不能为负数。
- 行内元素 的 左右内边距是没问题的，上下内边距不能完美的设置。
- 块级元素、行内块元素，四个方向内边距都可以完美设置。
3.4 盒子边框（border）
| CSS属性名 | 功能 | 属性值 |
|---|---|---|
| border-style | 边框线风格 复合了四个方向的边框风格 | none：默认值 solid：实线 dashed：虚线 dotted：点线 double：双实线 |
| border-width | 边框线宽度 复合了四个方向的边框宽度 | 长度，默认 3px |
| border-color | 边框线颜色 复合了四个方向的边框颜色 | 颜色，默认黑色 |
| border | 复合属性 | 值没有顺序和数量要求 |
border-left
border-left-style
border-left-width
border-left-color
border-right
border-right-style
border-right-width
border-right-color
border-top
border-top-style
border-top-width
border-top-color
border-bottom
border-bottom-style
border-bottom-width
border-bottom-color
我们可以通过这种方式分别设置各个方向的边框 （border-style 、 border-width 、 border-color 其实也是复合属性。）
3.5 盒子外边距（margin）
| CSS 属性名 | 功能 | 属性值 |
|---|---|---|
| margin-left | 左外边距 | CSS 中的长度值 |
| margin-right | 右外边距 | CSS 中的长度值 |
| margin-top | 上外边距 | CSS 中的长度值 |
| margin-bottom | 下外边距 | CSS 中的长度值 |
| margin | 复合属性，可以写 1~4 个值，规律同 padding （顺时针） | CSS 中的长度值 |
注意：
- 子元素的 margin ，是参考父元素的 content 计算的。（因为是父亲的 content 中承装着子元素）
- 块级元素、行内块元素，均可以完美地设置四个方向的 margin ；
- 但行内元素，左右margin 可以完美设置，上下 margin 设置无效。
- margin 的值也可以是 auto ，如果给一个 块级元素 设置左右 margin 都为 auto ，该块级元素会在父元素中水平居中。
三种写法均可：
margin-left: auto; margin-right: auto;
margin: auto;
margin: 0 auto;/*将上下外边距设为0，左右外边距自动居中。*/
- margin 的值可以是负值。
切记：
- margin: auto 是给块级元素用的.
- text-align: center 是让行内元素或者行内块元素居中的.
3.6 关于默认宽度
所谓的默认宽度，就是不设置 width 属性时，元素所呈现出来的宽度。
-
总宽度 = 父的 content — 自身的左右 margin 。
-
内容区的宽度 = 父的 content — 自身的左右 margin — 自身的左右 border — 自身的左右padding 。
3.7 margin 塌陷问题
什么是 margin 塌陷？
- 第一个子元素的上 margin 会作用在父元素上，最后一个子元素的下 margin 会作用在父元素上。
如何解决 margin 塌陷？
- 方案一： 给父元素设置不为 0 的 padding 。
- 方案二： 给父元素设置宽度不为 0 的 border 。
- 方案三：给父元素设置 css 样式 overflow:hidden
3.7 margin 合并问题
什么是 margin 合并？
- 上面兄弟元素的下外边距和下面兄弟元素的上外边距会合并，取一个最大的值，而不是相加。
如何解决 margin 塌陷？
- 无需解决，布局的时候上下的兄弟元素，只给一个设置上下外边距就可以了。
3.8 处理内容溢出
| CSS 属性名 | 功能 | 属性值 |
|---|---|---|
| overflow | 溢出内容的处理方式 | visible：显示，默认值 hidden：隐藏 scroll：显示滚动条，不论内容是否溢出 auto：自动显示滚动条，内容不溢出不显示 |
| overflow-x | 水平方向溢出内容的处理方式 | 同 overflow |
| overflow-y | 垂直方向溢出内容的处理方式 | 同 overflow |
注意：
- overflow-x 、 overflow-y 不能一个是 hidden ，一个是 visible ，是实验性属性，不建议使用。
3.9 隐藏元素的方式
- 方式一：visibility 属性
visibility 属性默认值是 show ，如果设置为 hidden ，元素会隐藏。
元素看不见了，但还占有原来的位置（元素的大小依然保持）。
- 方式二： display 属性
设置 display:none 就可以让元素隐藏。
彻底地隐藏，不但看不见，也不占用任何位置，没有大小宽高。
四：样式的继承
有些样式会继承，元素如果本身设置了某个样式，就使用本身设置的样式；
但如果本身没有设置某个样式，会从父元素开始一级一级继承（优先继承离得近的祖先元素）。
会继承的 css 属性：
- 字体属性、文本属性（除了vertical-align）、文字颜色 等。
不会继承的 css 属性：
- 边框、背景、内边距、外边距、宽高、溢出方式 等。
一个规律：能继承的属性，都是不影响布局的，简单说：都是和盒子模型没关系的。
4.1 默认样式
元素一般都些默认的样式，例如：
- < a > 元素：下划线、字体颜色、鼠标小手。
- < h1 > ~ < h6 > 元素： 文字加粗、文字大小、上下外边距。
- < p > 元素：上下外边距
- < ul > 、 ol 元素：左内边距
- body 元素： 8px 外边距（4个方向）
优先级：元素的默认样式 > 继承的样式，所以如果要重置元素的默认样式，选择器一定要直接选择器到该元素。
五：布局小技巧
- 行内元素、行内块元素，可以被父元素当做文本处理。
即：可以像处理文本对齐一样，去处理：行内、行内块在父元素中的对齐。
例如： text-align 、 line-height 、 text-indent 等。
- 如何让子元素，在父亲中 水平居中：
若子元素为块元素，给父元素加上： margin:0 auto; 。
若子元素为行内元素、行内块元素，给父元素加上： text-align:center 。
- 如何让子元素，在父亲中 垂直居中：
若子元素为块元素，给子元素加上： margin-top ，值为：(父元素 content －子元素盒子总高) / 2。
若子元素为行内元素、行内块元素：让父元素的 height = line-height ，每个子元素都加上： vertical-align:middle; 。（若想绝对垂直居中，父元素 font-size 设置为 0 。）
5.1 元素之间的空白问题
产生的原因：
- 行内元素、行内块元素，彼此之间的换行会被浏览器解析为一个空白字符。
解决方案：
- 方案一： 去掉换行和空格（不推荐）。
- 方案二： 给父元素设置 font-size:0 ，再给需要显示文字的元素，单独设置字体大小（推荐）。
5.2 行内块的幽灵空白问题
产生原因：
- 行内块元素与文本的基线对齐，而文本的基线与文本最底端之间是有一定距离的。
解决方案：
- 方案一： 给行内块设置 vertical ，值不为 baseline 即可，设置为 middel 、 bottom 、top 均可。
- 方案二： 若父元素中只有一个行内块元素，设置图片为 display:block 。（块元素独占一行）
- 方案三： 给父元素设置 font-size: 0 。如果该行内块内部还有文本，则需单独通过 span 选择文本设置 font-size
六：浮动布局
在最初，浮动是用来实现文字环绕图片效果的，现在浮动是主流的页面布局方式之一。
元素浮动后的特点：
- 脱离文档流。（消极影响）
- 不管浮动前是什么元素，浮动后：默认宽与高都是被内容撑开（尽可能小），但是我们可以设置宽高。
- 不会独占一行，可以与其他元素共用一行。
- 不会 margin 合并，也不会 margin 塌陷，能够完美的设置四个方向的 margin 和 padding 。
6.1 浮动相关属性
| 属性名称 | 功能 | 属性值 |
|---|---|---|
| float | 设置浮动 | left: 设置左浮动 right: 设置右浮动 none: 不浮动，默认值 |
| clear | 清除浮动 | left: 清除前面左浮动的影响 right: 清除前面右浮动的影响 both: 清除前面左右浮动的影响 |
注意：浮动元素就别清除浮动的影响了
6.2浮动的作用
元素浮动后的影响：
- 对兄弟元素的影响： 后面的兄弟元素，会占据浮动元素之前的位置，对前面的兄弟无影响。
- 对父元素的影响： 不能撑起父元素的高度，导致父元素高度塌陷；但父元素的宽度依然束缚浮动的元素。
6.3 解决浮动产生的影响（清除浮动）
浮动产生的影响：
- 父容器高度塌陷
- 浮动元素的兄弟元素被覆盖
解决方案：
-
方案一： 给父元素指定高度。（只解决了父容器高度塌陷）
-
方案二： 给父元素也设置浮动，带来其他影响。（只解决了父容器高度塌陷）
-
方案三： 给父元素设置 overflow:hidden 。（处理内容溢出，只解决了父容器高度塌陷）
-
方案四： 在所有浮动元素的最后面，添加一个空白块级元素，并给该块级元素设置 clear:both （消除前面所有兄弟左右浮动产生的影响）
-
方案五： 给浮动元素的父元素，设置伪元素，通过伪元素清除浮动，原理与方案四相同。===> 推荐使用
布局中的一个原则：设置浮动的时候，兄弟元素要么全都浮动，要么全都不浮动。
七：弹性布局
7.1伸缩盒模型
- 2009 年， W3C 提出了一种新的盒子模型 —— Flexible Box （伸缩盒模型，又称：弹性盒子）。
- 它可以轻松的控制：元素分布方式、元素对齐方式、元素视觉顺序 …
- 截止目前，除了在部分 IE 浏览器不支持，其他浏览器均已全部支持。
- 伸缩盒模型的出现，逐渐演变出了一套新的布局方案 —— flex 布局。
7.2 伸缩容器、伸缩项目
- 伸缩容器： 开启了 flex 的元素（给元素设置了 display:flex），就是伸缩容器。
- 伸缩项目：伸缩容器所有子元素（不是孙子元素）这个容器自动成为了伸缩项目。
注意：
- 一个元素可以同时是：伸缩容器、伸缩项目。
- 无论原来是哪种元素（块、行内块、行内），一旦成为了伸缩项目，全都会“块状化”。
7.3 主轴与侧轴
- 主轴： 伸缩项目沿着主轴排列，主轴默认是水平的，默认方向是：从左到右（左边是起点，右边是终点）。
- 侧轴： 与主轴垂直的就是侧轴，侧轴默认是垂直的，默认方向是：从上到下（上边是起点，下边是终点）。
7.4 主轴方向
- 属性名： flex-direction
常用值如下：
- row ：主轴方向水平从左到右 —— 默认值
- row-reverse ：主轴方向水平从右到左。
- column ：主轴方向垂直从上到下。
- column-reverse ：主轴方向垂直从下到上。
注意：改变了主轴的方向，侧轴方向也随之改变。
7.5 主轴换行方式
- 属性名： flex-wrap
常用值如下：
- nowrap ：默认值，不换行。
2. wrap ：自动换行，伸缩容器不够自动换行。
- wrap-reverse ：反向换行。
7.6 flex-flow
flex-flow 是一个复合属性，复合了 flex-direction 和 flex-wrap 两个属性。 值没有顺序要求。
flex-flow: row wrap;
7.7 主轴对齐方式
- 属性名： justify-content
常用值如下：
- flex-start ：主轴起点对齐。—— 默认值
- flex-end ：主轴终点对齐。
- center ：居中对齐
- space-between ：均匀分布，两端对齐（最常用）。
- space-around ：均匀分布，两端距离是中间距离的一半。
- space-evenly ：均匀分布，两端距离与中间距离一致。
7.8 侧轴对齐方式
7.8.1 一行的情况
- 所需属性： align-items
常用值如下：
- flex-start ：侧轴的起点对齐。
- flex-end ：侧轴的终点对齐。
- center ：侧轴的中点对齐。
- baseline : 伸缩项目的第一行文字的基线对齐。
- stretch ：如果伸缩项目未设置高度，将占满整个容器的高度。—— （默认值）
7.8.2 多行的情况
- 所需属性： align-content
常用值如下：
- flex-start ：与侧轴的起点对齐。
- flex-end ：与侧轴的终点对齐。
- center ：与侧轴的中点对齐。
- space-between ：与侧轴两端对齐，中间平均分布。
- space-around ：伸缩项目间的距离相等，比距边缘大一倍。
- space-evenly : 在侧轴上完全平分。
- stretch ：占满整个侧轴。—— 默认值
7.9 flex 实现水平垂直居中
方法一：父容器开启 flex 布局，随后使用 justify-content 和 align-items 实现水平垂直居中
.outer {
width: 400px;
height: 400px;
background-color: #888;
display: flex;
justify-content: center;
align-items: center;
}
.inner {
width: 100px;
height: 100px;
background-color: orange;
}
方法二：父容器开启 flex 布局，随后子元素 margin: auto
.outer {
width: 400px;
height: 400px;
background-color: #888;
display: flex;
}
.inner {
width: 100px;
height: 100px;
background-color: orange;
margin: auto;
}
7.10 伸缩性
7.10.1 flex-basis
flex-basis 设置的是主轴方向的基准长度，会让宽度或高度失效。(主轴横向：宽度失效；主轴纵向：高度失效)
作用：浏览器根据这个属性设置的值，计算主轴上是否有多余空间，默认值 auto ，即：伸缩项目的宽或高。
7.10.2 flex-grow（伸）
flex-grow 定义伸缩项目的放大比例，默认为 0 ，即：纵使主轴存在剩余空间，也不拉伸（放大）。
规则：
- 若所有伸缩项目的 flex-grow 值都为 1 ，则：它们将等分剩余空间（如果有空间的话）。
- 若三个伸缩项目的 flex-grow 值分别为： 1 、 2 、 3 ，则：分别瓜分到： 1/6 、 2/6 、3/6 的空间。
7.10.3 flex-shrink（缩）
flex-shrink 定义了项目的压缩比例，默认为 1 ，即：如果空间不足，该项目将会缩小。
收缩项目的计算，略微复杂一点，我们拿一个场景举例：
三个收缩项目，宽度分别为： 200px 、 300px 、 200px ，它们的 flex-shrink 值分别为： 1 、 2 、 3
若想刚好容纳下三个项目，需要总宽度为 700px ，但目前容器只有 400px ，还差 300px，所以每个人都要收缩一下才可以放下，具体收缩的值，这样计算：
- 计算分母： (200×1) + (300×2) + (200×3) = 1400
- 计算比例：
项目一： (200×1) / 1400 = 比例值1
项目二： (300×2) / 1400 = 比例值2
项目三： (200×3) / 1400 = 比例值3
- 计算最终收缩大小：
项目一需要收缩： 比例值1 × 300
项目二需要收缩： 比例值2 × 300
项目三需要收缩： 比例值3 × 300
7.11 flex复合属性
flex 是复合属性，复合了： flex-grow 、 flex-shrink 、 flex-basis 三个属性，默认值为 0 1auto 。
- 如果写 flex:1 1 auto ，则可简写为： flex:auto
- 如果写 flex:1 1 0 ，则可简写为： flex:1
- 如果写 flex:0 0 auto ，则可简写为： flex:none
- 如果写flex:0 1 auto ，则可简写为： flex:0 auto —— 即 flex 初始值。
7.12 项目排序
order 属性定义项目的排列顺序。数值越小，排列越靠前，默认为 0 。
7.13 单独对齐
- 通过 align-self 属性，可以单独调整某个伸缩项目的对齐方式
- 默认值为 auto ，表示继承父元素的 align-items 属性。
八：定位
在CSS中，定位是指通过设置元素的位置属性来控制元素在页面中的显示位置。下面我们讲解常用的 4 种定位
8.1 相对定位
相对定位即通过相对于元素在文档流中的原始位置进行定位。
如何设置相对定位？
- 给元素设置 position:relative 即可实现相对定位。
- 可以使用 left 、 right 、 top 、 bottom 四个属性调整位置。
相对定位的参考点在哪里？
- 相对自己原来的位置
相对定位的特点：
- 不会脱离文档流，元素位置的变化，只是视觉效果上的变化，不会对其他元素产生任何影响。
- 定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的。
- left 不能和 right 一起设置， top 和 bottom 不能一起设置。
- 相对定位的元素，也能继续浮动，但不推荐这样做。
- 相对行为的元素，也能通过 margin 调整位置，但不推荐这样做。
注意：定位的元素会盖在普通元素之上，都发生定位的两个元素，后写的元素会盖在先写的元素之上。
8.2 绝对定位
绝对定位即通过相对于包含块进行定位。
如何设置绝对定位？
- 给元素设置 position: absolute 即可实现绝对定位。
- 可以使用 left 、 right 、 top 、 bottom 四个属性调整位置。
绝对定位的参考点在哪里？
- 参考它的包含块。
什么是包含块？
- 对于没有脱离文档流的元素：包含块就是父元素；
- 对于脱离文档流的元素：包含块是第一个拥有定位属性的祖先元素（如果所有祖先都没定位，那包含块就是整个页面）。
绝对定位元素的特点：
- 脱离文档流，会对后面的兄弟元素、父元素有影响。
- left 不能和 right 一起设置， top 和 bottom 不能一起设置。
- 绝对定位、浮动不能同时设置，如果同时设置，浮动失效，以定位为主。
- 绝对定位的元素，也能通过 margin 调整位置，但不推荐这样做。
- 无论是什么元素（行内、行内块、块级）设置为绝对定位之后，都变成了定位元素。
何为定位元素？ —— 默认宽、高都被内容所撑开，且能自由设置宽高。
8.3 固定定位
固定定位通过视口进行定位，固定定位的元素会始终保持在窗口的固定位置，无论页面滚动与否。其他元素不会受到固定定位元素的影响。
如何设置为固定定位？
- 给元素设置 position: fixed 即可实现固定定位。
- 可以使用 left 、 right 、 top 、 bottom 四个属性调整位置。
固定定位的参考点在哪里？
- 参考它的视口
对于 PC 浏览器来说，视口就是我们看网页的那扇“窗户”。
固定定位元素的特点：
- 脱离文档流，会对后面的兄弟元素、父元素有影响。
- left 不能和 right 一起设置， top 和 bottom 不能一起设置。
- 固定定位和浮动不能同时设置，如果同时设置，浮动失效，以固定定位为主。
- 固定定位的元素，也能通过 margin 调整位置，但不推荐这样做。
- 无论是什么元素（行内、行内块、块级）设置为固定定位之后，都变成了定位元素。
8.4 粘性定位
如何设置为粘性定位？
- 给元素设置 position:sticky 即可实现粘性定位。
- 可以使用 left 、 right 、 top 、 bottom 四个属性调整位置，不过最常用的是 top 值。
粘性定位的参考点在哪里？
- 离它最近的一个拥有“滚动机制”的祖先元素，即便这个祖先不是最近的真实可滚动祖先。
粘性定位元素的特点：
- 不会脱离文档流，它是一种专门用于窗口滚动时的新的定位方式。
- 最常用的值是 top 值。
- 粘性定位和浮动可以同时设置，但不推荐这样做。
- 粘性定位的元素，也能通过 margin 调整位置，但不推荐这样做。
粘性定位和相对定位的特点基本一致，不同的是：粘性定位可以在元素到达某个位置时将其固定。
8.5 定位层级
- 定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的。
- 如果位置发生重叠，默认情况是：后面的元素，会显示在前面元素之上。
- 可以通过 css 属性 z-index 调整元素的显示层级。
- z-index 的属性值是数字，没有单位，值越大显示层级越高。
- 只有定位的元素设置 z-index 才有效。
- 如果 z-index 值大的元素，依然没有覆盖掉 z-index 值小的元素，那么请检查其包含块的层级。
8.5.1 定位注意点
- 发生固定定位、绝对定位后，元素都变成了定位元素，默认宽高被内容撑开，且依然可以设置宽高。
- 发生相对定位后，元素依然是之前的显示模式。
8.6 定位的特殊应用
以下所说的特殊应用，只针对 绝对定位 和 固定定位 的元素，不包括相对定位的元素。
8.6.1 让定位元素的宽充满包含块
- 块宽想与包含块一致，可以给定位元素同时设置 left 和 right 为 0 。
- 高度想与包含块一致， top 和 bottom 设置为 0 。
8.6.2 让定位元素在包含块中居中
- 方案一：
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
- 方案二：
left: 50%;
top: 50%;
margin-left: 负的宽度一半;
margin-top: 负的高度一半;
注意：该定位的元素必须设置宽高！！！
九： 布局
9.1 版心
- 在 PC 端网页中，一般都会有一个固定宽度且水平居中的盒子，来显示网页的主要内容，这是网页的版心。
- 版心的宽度一般是 960 ~ 1200 像素之间。
- 版心可以是一个，也可以是多个。
9.2 常用布局名词
| 位置 | |
|---|---|
| 顶部导航条 | topbar |
| 页头 | header, page-header |
| 导航 | nav, navigator, navbar |
| 搜索框 | search, search-box |
| 横幅 | banner |
| 主要内容 | content, main |
| 侧边栏 | aside, sidebar |
| 页脚 | footer, page-footer |
9.3 重置默认样式
很多元素都有默认样式，比如：
- p 元素有默认的上下 margin 。
- h1~h6 标题也有上下 margin ，且字体加粗。
- body 元素有默认的 8px 外边距。
- 超链接有默认的文字颜色和下划线。
- ul 元素有默认的左 pading 。
在早期，元素默认样式，能够让我们快速的绘制网页
但如今网页的设计越来越复杂，内容越来越多，而且很精细，这些默认样式会给我们绘制页面带来麻烦；
而且这些默认样式，在不同的浏览器上呈现出来的效果也不一样，所以我们需要重置这些默认样式。
9.3.1 方案一：使用全局选择器
* {
margin: 0;
padding: 0;
......
}
此种方法，在简单案例中可以用一下，但实际开发中不会使用，因为 * 选择的是所有元素，而并不是所有的元素都有默认样式；而且我们重置时，有时候是需要做特定处理的，比如：想让 a 元素的文字是灰色，其他元素文字是蓝色。
9.3.2 方案二：reset.css
选择到具有默认样式的元素，清空其默认的样式。
经过 reset 后的网页，好似“一张白纸”，开发人员可根据设计稿，精细的去添加具体的样式。
9.3.3 方案三：Normalize.css
Normalize.css 是一种最新方案，它在清除默认样式的基础上，保留了一些有价值的默认样式。
- 官网地址：http://necolas.github.io/normalize.css/
相对于 reset.css ， Normalize.css 有如下优点：
- 保护了有价值的默认样式，而不是完全去掉它们。
- 为大部分HTML元素提供一般化的样式。
- 新增对 HTML5 元素的设置。
- 对并集选择器的使用比较谨慎，有效避免调试工具杂乱。
备注： Normalize.css 的重置，和 reset.css 相比，更加的温和，开发时可根据实际情况进行选择。
