day03

A：今天学的内容

一、css样式的继承

1、当子级没有宽度，子级继承父级的宽度。（针对块元素）
2、当父级没有高度，父级继承子级的高度。

二、盒子模型（box-sizing：border-box）

如果赋予 box-sizing：border-box；设置 border 和 padding 宽度不会变。

三、浮动（float：left / right）

1.float：left

2.如何清除浮动

①给父级添加（overflow：hidden），给父级添加伪元素（不会让父级失去高度）
②clear：both

        ul:after{
            content: "";
            display: table;
            clear: both;
        }

【子级浮动，父级没有高度】

四、定位（position）

①，position：fixed（固定不动）

      .one{
            width: 500px;height: 500px;background: pink;
            position: fixed;right: 0 ;bottom: 0;
            /*固定右下角*/
        }

②，position：relative（相对定位 给父级）
③，position：absolute（绝对定位 给子级）

五、用定位垂直水平居中

<style>
        .box{
            width: 300px;
            height: 300px;
            background: pink;
            position: relative;
        }
        .one{
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            top: 50%; left: 50%;
            margin-left: -50px;
            margin-top: -50px;
        }
</style>

六、z-index

z-index 可以设置堆叠，谁的值高谁在上面

<style>
        *{margin: 0;padding: 0;}
        .box{
            width: 300px;height: 300px;
            background: red;
            position: relative;
        }
        .one{
            z-index: 50;
            width: 50px;height: 50px;
            background: pink;
            position: absolute;
        }
        .two{
            z-index: 100;
            width: 100px;height: 50px;
            background: blue;
            position: absolute;
        }
        .box:hover .one{
            z-index: 200;
        }
        /*z-index 可以设置堆叠，谁的值高谁在上面*/
</style>

七、CSS样式的引入方式

外部样式表 < 内部样式表 < 内联样式

B：学会了什么

1、css的继承

2、盒子模型（box-sizing）

3、浮动float、如何清除浮动

4、定位（position）

5、垂直水平居中

6、z-index（取值越高，优先）

7、css样式的引入方式