CSS 层叠样式表（Cascading Style Sheets），能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
简单来说，HTML 搭建一个毛坯房，CSS 对毛坯房进行装修美化，到了 JS 的时候，就是加入家电智能设备了。
目录
[1 CSS 引入方式](#1 CSS 引入方式)
[方式 1：行内式](#方式 1：行内式)
[方式 2：内嵌式](#方式 2：内嵌式)
[方式 3：外部样式表](#方式 3：外部样式表)
[2. CSS选择器](#2. CSS选择器)
[1. 元素选择器：](#1. 元素选择器：)
[2. id 选择器：](#2. id 选择器：)
[3. class 选择器](#3. class 选择器)
[3. CSS 浮动](#3. CSS 浮动)
[4. CSS 定位](#4. CSS 定位)
[5. CSS 盒子模型](#5. CSS 盒子模型)
1 CSS 引入方式
方式 1：行内式
通过元素的 style 属性引入样式。
语法：style = "样式名：样式值；样式名：样式值；..........."
缺点：1. 代码复用度低，不利于维护。
- css 样式代码和 html 结构代码交织在一起，影响阅读，影响文件大小，影响性能。
方式 2：内嵌式
通过在 head 标签中的 style 标签，定义本页面的公共样式。
通过选择器来确定样式的作用元素。
内嵌式样式需要在 head 标签中，通过一对 style 标签定义 css 样式
css 样式的作用范围要依赖选择器
缺点：
内嵌式虽然对样式代码做了抽取，但是 css 代码仍然在 html 文件中
内嵌样式仅仅只能作用在当前文件，代码的复用度还是不够，不利于网站的风格统一
方式 3：外部样式表
将 css 代码单独放入 .css 样式文件，在 head 标签中通过 link 标签引入
<link href = "css/btn.css" rel = stylesheet>（rel 表示的是引入文件的类型 css 就是 style sheet）
2. CSS选择器
1. 元素选择器：
语法：标签名{ }
缺点：某些同名的元素，不希望使用某些样式，某些不同名的元素，也想要使用该样式，无法协调。
2. id 选择器：
根据标签的 id 值来确定样式的作用元素。
一般每个元素都有 id 属性，在一个页面中，id 的值不应该相同，id 具有唯一性。
语法：#id值{ }
缺点：id 值有唯一性，样式只能作用到一个元素上
3. class 选择器
根据元素的 class 属性值来确定样式的作用元素
元素的 class 值可以重复，而且一个元素的 class 属性可以有多个值
语法：.class属性值{ }
class 选择器非常灵活，在 css 中，大部分情况均使用该选择器~
3. CSS 浮动
CSS 的 Float（浮动），使元素脱离文档流，按照指定的方向（左或者右发生移动），直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动设计的初衷，是为了解决文字环绕图片问题，浮动后一定不会把文字挡住。
文档流是文档中可显示对象在排列所占的位置 / 空间，而脱离文档流就是在页面中不占位置了~
有如上图代码，运行结果如图：
我们想让块元素在同一行，该如何操作呢？（块元素定义是独占一行的~）
首先可以想到，用 display 来设置行元素和块元素~
但是很明显，在设置之后，宽和高的设置都失效了~ 并不符合我们的预期~
这个时候就想到了 -- 浮动手段
此时，div1 就浮动到了父级的最右边~
注意观察的是，框 2 自动向上浮动，占据了之前 div1 的位置~
通过浮动，就可以实现，让多个块元素，既保持了它的块元素特征，也保持在了同一行。
如果是向左浮动呢？
此时发生的效果，又有点不对劲了~
当我们只在 div1 中设置 left 的浮动，发现结果如上图。
出现上图的原因是：框1 由于我们的浮动设置，脱离了文档流。但还记得我们浮动的设计初衷吗？是为了解决文字环绕图片问题，浮动后一定不会把文字挡住。
框1 left 浮动之后，把框2 的颜色遮挡住了，但是不会把文字给遮挡住，所以框2 的文字也就被挤到下面了，和框3 的文字重合在了一起~~
当我们给三个 div 都设置 left 的浮动后，就会正常显示了~
4. CSS 定位
让 div 出现在指定的位置 ==》 定位
position 属性指定了元素的定位类型：
static
静态定位 static 不设置的时候的默认值就是 static，静态定位，元素出现在该出现的位置 == 》 块级元素垂直排列，行内元素水平排列。
absolute
绝对定位 absolute，通过 top left right bottom 指定元素在页面上的固定位置，定位后，元素会脱离文档流，其他元素可以占用其位置。
relative
相对定位 relative，相对于自己原来的位置进行定位，定位后保留原来的占位，其他元素不会移动到该位置。
fixed
固定占位，始终在浏览器窗口固定位置，不会随着页面的上下移动而移动，元素定位后会让出原来的位置，其他元素可以占用
当我们在 div 后面加上 100 个 br 换行后，滑动浏览器页面，发现框1 始终都在页面的固定位置~
这种一般就适用于 == 》 广告~~
5. CSS 盒子模型
所有的 HTML 元素可以看作盒子，在 CSS 中，"box model" 这一术语用来设计和布局~
CSS 盒模型本质上是一个盒子，来封装周围的 HTML 元素。它包括：外边距（margin），边框（border），内边距（padding），实际内容（content）
用一个实际的例子来理解上面的概念是：
我们有一个盒子：容量 width：100px height：100px border：1px
如图，粉色的是我们的实际内容，width：100px，height：100px，红色的是border：1 px
border 向实际内容里面是内边距，border 向实际内容外是外边距，注意，内外边距所占的像素并不会影响实际内容的大小~
实例如下：
在浏览器 F12 观察如下：
