CSS-层叠式样式表
前言：
之前我们通过HTML语言，来编写静态网页，但是仅仅有静态网页，却不免让我们陷入一种毫无感觉，甚至有点冲动关掉网页的想法，那么怎么搞定这个想法那，此时你仅仅需要设置网页（元素）的样式就可以，以此成功的打消掉这个无理的想法。
其实，我们也可以通过元素“属性”的设置来改变不同的样式，但....，终究还是过于繁琐和呆板，除此外，相同的操作，要重复的写。那么？什么是CSS（Cascading Style Sheets）层叠式样式表，HTML用来构建网页的结构，而CSS则构建网页元素的样式。
如何使用？
（1）：内联方式
（2）：内部样式表—规则：选择器和样式声明组成
（3）：外部样式表，也就是俗称的引用—标记：或者
样式表特征？
（1）：继承性
说明：必须是父子(有层级关系)结构，大部分的css效果是可以直接继承给子元素的
（2）：层叠性
说明：为一个元素定义多个样式规则，规则中的属性不冲突时，可以同时都应用到当前元素上
（3）：优先级
说明：层叠性基础上，如果样式声明冲突(重复)的话,则按照默认的优先级去应用样式
规则：等级（由低到高）：浏览器默认设置、样式表（内、外部）、内联方式
（4）：！important原则
说明：显示调整样式属性优先级（绝对位置）
选择器？
作用：规范了页面中哪些元素能够使用声明好的样式，匹配页面的元素
* 分类：v
基础选择器：
1. id选择器：选择具有的属性值的元素，建议一个html页面id值唯一
2. 元素选择器：选择具有相同标签名称的元素
3. 类选择器：选择具有相同的class属性值的元素
扩展选择器：
1. 并集选择器：选择所有元素
2. 子选择器：筛选选择器1元素下的选择器2元素；相比与后代选择器执行效率更高
3. 父选择器：筛选选择器2的父元素选择器1
4. 属性选择器：选择元素名称，属性名=属性值的元素
5. 伪类选择器：匹配元素不同的状态的选择器，包括：链接伪类、动态伪类
6. 分类选择器：类选择器和元素选择器结合使用
框模型？
定义：什么是框？页面元素皆为框，Box Model,定义了元素框处理元素的内容，外边距，以及边框的一种计算方式；
外边距：元素与元素之间的距离；内边距：元素边框与内容之间的距离。
注意：当框模型介入到元素后，元素的占地尺寸会发生变化。
外边距：围绕在元素周围的空白距离（当前元素与其他元素之间的空间量）。
内边距：元素边距与内容之间的距离就是内边距，内边距会扩大元素边框的占地区域。
特殊元素：自带外边距的元素（h1~h6,p,ul,ol,dl,dd,pre,body），可以通过CSS Reset（CSS重写）来重置具备外边距的元素。
属性：box-sizing：指定框模型的计算方式
1：content-box; 2：border-box
默认值，采用默认的方式计算元素的占地区域 元素的尺寸，会包含border以及padding的值
实际占地宽度=左右边框+左右内边距+width; 实际占地宽度=width(包含了border和padding)
实际占地高度=上下边框+上下内边距+height 实际占地高度=height(包含了border和padding)定位-浮动定位？
定位：改变元素在页面中默认的位置
分类：1、普通流定位(默认定位方式)；2、浮动定位； 3、相对定位；4、绝对定位；5、固定定位。
定位 - 普通流定位：又称为"文档流定位",页面中元素们的默认定位方式
浮动定位：让多个块级元素在一行内显示
特殊效果：
1、当父元素显示不下所有已浮动子元素时，最后一个将换行，但是，有可能被卡住；
2、元素一旦浮动起来后，宽度将以内容为主(未指定宽度情况下)；
3、元素一旦浮动起来后，将变为块级元素（允许修改尺寸）（能正常处理垂直方向外边距）；
4、文本，行内元素，行内块元素是采用环绕的方式来排列的，是不会被浮动元素压在底下的，而会巧妙的避开浮动元素
清除浮动所带来的影响：
1：清除浮动带来的自身影响：元素一旦浮动起来之后，就会对后续的元素带来一定的位置影响(后续元素要上前占位)，如果后续元素不想被影响的话(不想占位)，那么就可以通过清除浮动的方式来解决
2：浮动元素对父元素高度带来的影响（元素的高度，都是以未浮动元素的高度为准的；浮动元素是不占高度的）
解决父元素高度方案如下：
1、直接设置父元素高度
弊端：不是每次都知道父元素的高度
2、设置父元素也浮动
弊端：不是任何时候父元素都需要浮动，而且浮动会影响后续元素
3、为父元素设置 overflow
取值：hidden 或 auto
弊端：如果有内容需要溢出显示的话，也会一同被隐藏
4、在父元素中，追加空子元素，并设置其clear:both