Javaweb - 3 CSS
CSS 层叠样式表（Cascading Style Sheets），能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
简单来说，HTML 搭建一个毛坯房，CSS 对毛坯房进行装修美化，到了 JS 的时候，就是加入家电智能设备了。
目录
1 CSS 引入方式
方式 1：行内式
方式 2：内嵌式
方式 3：外部样式表
2. CSS选择器
1. 元素选择器：
2. id 选择器：
3. class 选择器
3. CSS 浮动
4. CSS 定位
static
absolute
relative
fixed
5. CSS 盒子模型
完！
1 CSS 引入方式
方式 1：行内式
通过元素的 style 属性引入样式。
语法：style = ”样式名：样式值；样式名：样式值；...........“
缺点：1. 代码复用度低，不利于维护。
2. 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 观察如下：
