CSS-第三天（B站黑马程序员）

一、CSS三大特性

1、层叠性

层叠性：相同标签后面设置的样式会覆盖掉前面相同的样式。

<style>
        div {
            color: red;
            font-size: 32px;
        }

        /* 层叠性：相同标签后面设置的样式会覆盖掉前面相同的样式 */
        /* 只覆盖了颜色这一个属性，字体大小没有被覆盖掉 */
        div {
            color: pink;
        }
</style>

2、继承性

继承性：设置父标签的某些样式，子标签的样式也会随之改变。text-，font-，line-，color（与文字相关）等样式可以继承，height，width，padding，margin 等样式不能被继承。

<style>
        /* 继承性：设置父标签的某些样式，子标签的样式也会随之改变 */
        /* text-，font-，line-，color（与文字相关）等样式可以继承，height，width，内外边距 等不能被继承 */
        div {
            color: pink;
            font-size: 14px;
        }
</style>

*行高的继承 ：行高可以跟单位，也可以不跟。不跟单位即表示，行高为当前文字大小的倍数。此时子元素继承行高时，根据子元素文字大小的不同，继承不同的行高。

<style>
        body {
            color: pink;
            /* 行高可以跟单位，也可以不跟单位 */
            /* font: 12px/24px "Microsoft YaHei"; */

            /* 行高不跟单位，1.5代表行高为当前 文字大小font-size 1.5倍 */
            font: 12px/1.5 "Microsoft YaHei";
        }

        div {
            font-size: 14px;
        }

        p {
            font-size: 16px;
        }
</style>

3、优先级

相同的选择器执行层叠性；不同的选择器执行的优先级不同，根据选择器的权重执行。

权重的比较：按位数，从左往右，依次比较大小。

<style>
        /* 选择器相同，执行层叠性 */
        /* 选择器不同，根据选择器权重执行 */
        /* 权重从大到小：！important > id > class,伪类(链接，focus) > 标签 > 继承，*通配符 */
        body {
            color: blueviolet;
        }

        div {
            color: pink !important;
        }

        .test {
            color: red;
        }

        #demo {
            color: green;
        }
</style>

*权重的叠加：复合选择器的权重是将不同选择器的权重进行叠加。注意，权重的叠加不会进位。

例：0，0，1，0  >  0，0，0，10

<style>
        /* 复合选择器会有权重的叠加 */
        /* ul li 的权重是 0,0,0,1 + 0,0,0,1 = 0,0,0,2(权重叠加但不进位) */
        ul li {
            color: green;
        }

        /* li 的权重是 0,0,0,1 */
        li {
            color: red;
        }

        /* .nav li 的权重是 0,0,1,0 + 0,0,0,1 = 0,0,1,1 */
        .nav li {
            color: pink;
        }
</style>

二、盒子模型之边框

边框：border-width粗细，border-style样式(solid实线，dashed虚线，dotted点线），border-color颜色

<style>
        div {
            width: 300px;
            height: 200px;

            /* border-width 边框的粗细，一般用px作为单位 */
            border-width: 5px;

            /* border-style 边框的样式，solid实线边框，dashed虚线边框 ，dotted点线边框*/
            border-style: solid;
            /* border-style: dashed; */
            /* border-style: dotted; */

            /* border-color 边框的颜色 */
            border-color: pink;
        }
</style>

边框的复合写法：没有顺序。习惯顺序：粗细、样式、颜色。

可以将边框的上下左右拆分开写。

<style>
        div {
            width: 300px;
            height: 200px;

            /* 边框的复合写法，没有顺序，习惯顺序：粗细、样式、颜色 */
            border: 5px solid pink;
            /* 边框可以分开写 */
            border-top: 6px solid red;
            border-bottom: 10px dashed purple;
        }
</style>

边框的粗细会影响盒子实际显示的大小。

例如，200*200的盒子有10px的边框，那么显示的盒子大小将是220*220。解决方法是，设置盒子的宽度和高度时，减去设置的边框粗细。 

三、盒子模型之内边距

盒子的4个内边距

<style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;

            /* 盒子的四个内边距 */
            padding-left: 20px;
            padding-right: 40px;
            padding-top: 30px;
            padding-bottom: 50px;
        }
</style>

内边距的复合写法：有4种写法。 

<style>
        div {
            width: 300px;
            height: 300px;
            background-color: pink;

            /* 1个值：上下左右内边距都为同一个值 */
            padding: 50px;

            /* 2个值：上下内边距为第1个值，左右内边距为第2个值 */
            padding: 5px 50px;

            /* 3个值：上内边距为第1个值，左右内边距啊为第2个值，下内边距为第3个值 */
            padding: 50px 5px 20px;

            /* 4个值分别：上、右、下、左（顺时针） */
            padding: 2px 5px 10px 50px;
        }
</style>

 当设置了盒子的高度和宽度时，内边距会影响盒子实际显示的大小。

例如，200*200的盒子有10px的内边距，那么显示的盒子大小将是220*220。解决方法是，设置盒子的宽度和高度时，减去设置的内边距。

以下列举了内边距不会影响盒子显示大小的情况，即没有设置盒子的宽度和高度：

<style>
        h1 {
            /* 设置height高度 */
            height: 100px;
            background-color: pink;

            /* 此时height高度因内边距变大，width宽度并没有改变 */
            padding: 30px;
        }

        h2 {
            /* 只要定义了width，那么设置内边距后，width宽度就会随之改变 */
            width: 100%;
            height: 100px;
            background-color: blue;

            padding: 30px;
        }

        div {
            width: 300px;
            height: 100px;
            background-color: purple;
        }

        div p {
            /* 虽然继承了父标签div,但是 height高度 和 width宽度 不会被继承 */
            /* 但是没有设置自己的 height高度和width宽度，所有内边距的设置对盒子大小没有影响 */
            padding: 30px;
            background-color: skyblue;
        }
</style>

四、盒子模型之外边距

1、外边距的语法

盒子的4个外边距，复合写法与内边距类似，这里不赘述。

<style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .one {
            margin-bottom: 20px;
        }

        .two {
            margin-top: 20px;

            margin: 30px;
        }
</style>

2、外边距的典型应用--水平居中

外边距的典型应用--块元素的水平居中 ：上下外边距随意，左右外边距设置为auto。注意，一定要设置盒子的宽度，外边距才会改变盒子的位置。

<style>
        .header {
            /* 必须设置 width宽度，外边距才会改变盒子的位置 */
            width: 900px;
            height: 200px;
            background-color: pink;

            /* 水平居中：左右外边距 auto */
            /* 上下外边距为 0，左右外边距 auto */
            margin: 0 auto;
        }
</style>

行内元素和行内块元素要达到水平居中的效果，在父元素中设置 text-align：center即可。

行内元素尽量只设置左右外边距，即使设置了上下外边距，也并不显示。

3、外边距的合并

垂直方向上有两个盒子，上面的盒子1有下外边距，下面的盒子2有上外边距。此时两个盒子之间显示的外边距会将这两个外边距合并，即只显示数值较大的外边距。解决方法是，垂直方向上相邻的两个盒子的交界处，只给其中一个盒子设置外边距。

注意，外边距的合并只会出现在垂直方向上。

4、外边距的塌陷

父元素和子元素都有外边距，父元素会塌陷（和合并类似）较大的外边距值。

解决方案1：父元素设置边框,可以设置成 透明transparent

解决方案2：父元素设置内边距

解决方案3：父元素添加overflow：hidden

5、清除网页原有的外边距

为了保证网页效果的一致美观，编写CSS时一定要清除原有外边距。

<style>
        /* 这句话也应该是CSS的第一句话 */
        * {
            padding: 0;
            margin: 0;
        }
</style>