前端学习基础第六天

浮动清除的四种方式

为什么需要清楚浮动?因为在有些时候我们设置一个block盒子过程中无法给出一个确切的高度的时候,而里面的子block采用了浮动,会导致高度有可能消失了,接下来没有浮动的标签直接填充在block盒子的最上面。失去了盒子包括子block的效果。

额外标签法
在盒子后面添加一个标签。样式中添加: clear: both;

    .clear{
           clear: both;
        }
<div class="father  ">
    <div class="son"></div>
    <div class="dau"></div>
    <div class="clear"></div>   //起作用的部分
</div>

在父级标签添加一个样式: overflow: hidden

       .father{
            width: 80%;
            background-color: pink;
            margin: 10px auto 0px;
            overflow: hidden; //起作用的部分
        }

3.在父级标签中添加一个类,使用after伪类进行清除。

        .clearfix:after{
            content: "";
            display: block;
            height: 0px;
            clear: both;
            visibility: hidden;
        }
        .clearfix{
            *zoom: 1;  //适用于与ie 7
        }
        <div class="father clearfix ">

在父级标签中添加一个类,使用before,after双伪类进行清除。

        .clearfix:before,.clearfix:after{
            /*初始化清楚浮动的方式*/
            content: "";
            display: table;
        }
        .clearfix:after{
            clear: both;
        }
        .clearfix{
            *zoom: 1;
        }
        <div class="father clearfix ">

定位的四种模式

1.静态模式: position: static 。这个模式一般就是默认的模式。无需多言。
2.相对定位：position: relative。这个模式是基于自身的左上角来进行移动的。移动方向有上下左右。 /* 相对位置是占位置的,占的位置就是进行移动之前的那一块位置.是基于自身的左上角进行移动.*/

        .fs{
            position: relative;
            top: 20px;
            left: 100px;
        }
        <div class="fs"></div>

3.绝对定位：position:absolute。这个是不占位置的,这个位置的移动是基于最近的父级或者父级的父级有定位的位置来进行的移动。

 .father{
            width: 80%;
            height: 500px;
            margin: 10px auto;
            position: relative;
            background-color: bisque;
        }
        .father .son{
                position: absolute; /*这个移动是基于父级或者父级的父级,最近的一级的有定位的位置来进行移动的,如果都没有,那么就是基于浏览器的移动 */
/*这个是不占位置的,是脱标的。*/
                top: 20px;
                left: 40px;
            width: 200px;
            height: 150px;
            background-color: gray;

        }
<div class="father">
    <div class="son"></div>
</div>
<div class="sister"></div>

4.固定定位：position:fixed。是一种特殊的绝对定位,定位基于的位置就是浏览器。

       .fi{
            position: relative;
            width: 300px;
            height: 200px;
        }
        .fix{
            width: 40px;
            height: 100px;
            position: fixed;
            background-color: blue;
            top: 50px;
        }
        .left{
                left: 0;
            }
        .right{
            right: 0;
        }
        <div class="fi">
    <div class="fix left"></div>
    <div class="fix right"></div>
</div>

拓展:
叠放次序：只存在于相对、绝对、固定定位这三种模式中。

.div .red ,.div .green,.div .yellow{
            width: 200px;
            position: absolute;
            height: 100px;
            top:20px;
            left: 10px;
            background-color: red;
            z-index: 5;
         }
        .div .green{
            background:  green;
            top:40px;
            left: 30px;
            z-index: 10; // 设置叠放次序的权重,值越大则显示在最上面。这个没有单位。
        }
        .div .yellow{
            background: yellow;
            top:60px;
            left: 50px;
            z-index: 1;
        }
<div class="div">
    <div class="red"></div>
    <div class="green"></div>
    <div class="yellow"></div>
</div>

/补充 fix 和absolute 最好需要给定宽度,不然发生模块转换,变为行内块,行内块宽度和内容有关/
常见模式: 子绝父相子标签是绝对定位,父级标签是相对定位。

练习

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>有趣的实例</title>
    <style>
        li{
            width: 200px;
            height: 160px;
            border: 1px solid #cccccc;
            float: left;
            list-style: none;
            margin-left: -1px;
            position: relative;
        }
        li:hover{
            z-index: 1;   //z-index 默认值是0
            /*position: relative;*/  /*第一种方式*/
            border: 1px solid #999999;
        }
    </style>
</head>
<body>

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
</body>
</html>

一路北上！