CSS-层叠式样式表

前言：

之前我们通过HTML语言，来编写静态网页，但是仅仅有静态网页，却不免让我们陷入一种毫无感觉，甚至有点冲动关掉网页的想法，那么怎么搞定这个想法那，此时你仅仅需要设置网页（元素）的样式就可以，以此成功的打消掉这个无理的想法。

其实，我们也可以通过元素“属性”的设置来改变不同的样式，但....，终究还是过于繁琐和呆板，除此外，相同的操作，要重复的写。那么？什么是CSS（Cascading Style Sheets）层叠式样式表，HTML用来构建网页的结构，而CSS则构建网页元素的样式。

如何使用？

（1）：内联方式

（2）：内部样式表—规则：选择器和样式声明组成

（3）：外部样式表，也就是俗称的引用—标记：<link rel=“stylesheet” href="xxx.css">或者<style>import ....</style>

样式表特征？

（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