浮动的本质

浮动的初心是为了解决图片与文本并排显示的问题

#总结
1.浮动只限于水平方向
2.浮动元素脱离了文档流,后面的元素会上移填充它原来的控件
3.浮动元素不会影响到它前面的元素的布局,只会影响到后面的元素的排列,
4.任何元素 包括行内元素 浮动后 ,都具备了块级元素的特征

父元素计算高度的时候,会忽略内部的浮动元素(父级高度的塌陷)

浮动演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动的本质</title>
    <style>
    *{
        margin: 0;
        border: 0;
        box-sizing: border-box;
    }

    .box{
        padding: 1em;
        border:1px solid #000

    }
    .box img {
        width: 15em;
        border-radius: 0.5em;
        /* 图片向左浮动 后面的文本会围绕着它水平排列 */
        float:left;
        margin-right: 1em;
    }

    .box .decs a{
        width: 10em;
        height: 2em;
        background-color:lightgreen;
        float: left;
    }

    /* 总结:
    1.浮动只限于水平方向
    2.浮动元素脱离了文档流,后面的元素会上移填充它原来的控件
    3.浮动元素不会影响到它前面的元素的布局,只会影响到后面的元素的排列,
    4.任何元素 包括行内元素 浮动后 ,都具备了块级元素的特征 */

    /* 父元素计算高度的时候,会忽略内部的浮动元素(父级高度的塌陷) */
    </style>
</head>
<body>
    <h1>浮动的本质</h1>
    <div class="box">
        <!-- 浮动的初心是为了解决图片与文本并排显示的问题 -->
        <img src="https://img.php.cn/upload/course/000/000/001/5f59db7b704fe778.png" alt="">
        <div class="decs">
            <h2>第十三期_综合实战</h2>
            <p>五大综合实战项目,巩固一二阶段学习成果,达到前端和PHP核心知识点的灵活运用,实训完成自己的项目,并指导上线
                公益直播时间:2020.11.25 晚19:30-21:30,交流QQ群:916808767,并有神秘抽奖活动,敬请期待!本次公益直播课程,使用uniapp框架实现微信app的tabbar的编写,实现用户下拉刷新,上拉加载~
            </p>
            <a href="">了解详情</a>
        </div>
    </div>
</body>
</html>

清除浮动元素的影响

      /* ---------------------------- */
        /* 用附加元素来实现 */
        .clear {
            clear: left;
        }

        /* 伪元素 */
        .box:after{
            content: "";
            display: block;
            clear: both;
        }

        /* -------------------- */
        /* 我们希望左右两边是完全独立的元素,右边的元素不受左边浮动元素的影响 */

more

创建BFC :创建一个独立的布局单元

创建BFC的方式:任何一个元素添加上一下任何一个属性后就是一个BFC容器
1.float: left /right 不能是none
2.overflow: hidden / auto / scroll ,不能是visible
3.display:inline-block 、table-cell
4.display : flex / inline-flex
5.display: grid / inline-grid
6.position: absolute /fixed

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BFC:创建一个独立的布局单元</title>
    <style>
        * {
            margin: 0;
            border: 0;
            box-sizing: border-box;
        }

        .box {
            padding: 1em;
            border: 1px solid #000
        }

        .box img {
            width: 15em;
            border-radius: 0.5em;
            /* 图片向左浮动 后面的文本会围绕着它水平排列 */
            float: left;
            margin-right: 1em;
        }

        .box .decs a {
            width: 10em;
            height: 2em;
            background-color: lightgreen;
            /* float: right; */
            float: left;
        }


        /* ---------------------------- */
        /* 解决高度塌陷问题 */

        /* 伪元素 */
        .box:after{
            content: "";
            display: block;
            clear: both;
        }

        /* -------------------- */
        /* 我们希望左右两边是完全独立的元素,右边的元素不受左边浮动元素的影响 */

        .box .decs{
            overflow: hidden;
        }

        /* 创建BFC的方式:任何一个元素添加上一下任何一个属性后就是一个BFC容器
        1.float: left /right 不能是none
        2.overflow: hidden / auto / scroll ,不能是visible
        3.display:inline-block 、table-cell
        4.display : flex / inline-flex
        5.display: grid / inline-grid 
        6.position: absolute /fixed */




        /* ----------------------- */
        /* 能不能用 overflow: 解决父元素的高度塌陷问题?不用伪元素 */
    </style>
</head>

<body>
    <h1>浮动的本质</h1>
    <div class="box">
        <!-- 浮动的初心是为了解决图片与文本并排显示的问题 -->
        <img src="https://img.php.cn/upload/course/000/000/001/5f59db7b704fe778.png" alt="">
        <div class="decs">
            <h2>第十三期_综合实战</h2>
            <p>五大综合实战项目,巩固一二阶段学习成果,达到前端和PHP核心知识点的灵活运用,实训完成自己的项目,并指导上线
                公益直播时间:2020.11.25
                晚19:30-21:30,交流QQ群:916808767,并有神秘抽奖活动,敬请期待!本次公益直播课程,使用uniapp框架实现微信app的tabbar的编写,实现用户下拉刷新,上拉加载~
            </p>
            <a href="">了解详情</a>
        </div>
    </div>
</body>

</html>

BFC:解决父元素的高度塌陷问题

在父元素上使用 overflow:hidden 转为BFC,使它的布局不受到内部浮动元素的影响

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BFC:解决父元素的高度塌陷问题</title>
    <style>
        * {
            margin: 0;
            border: 0;
            box-sizing: border-box;
        }

        .box {
            padding: 1em;
            border: 1px solid #000
        }

        .box img {
            width: 15em;
            border-radius: 0.5em;
            /* 图片向左浮动 后面的文本会围绕着它水平排列 */
            float: left;
            margin-right: 1em;
        }

        .box .decs a {
            width: 10em;
            height: 2em;
            background-color: lightgreen;
            /* float: right; */
            float: left;
        }


        /* ---------------------------- */
        /* 解决高度塌陷问题 */

        /* 伪元素 */
        /* .box:after {
            content: "";
            display: block;
            clear: both;
        } */

        /* -------------------- */
        /* 我们希望左右两边是完全独立的元素,右边的元素不受左边浮动元素的影响 */

       .box, .box .decs {
            overflow: hidden;
        }
        /* 在父元素上使用 overflow:hidden 转为BFC,使它的布局不受到内部浮动元素的影响 */

        /* .box{
            overflow: hidden;
        } */



        /* 浮动的本质是为了解决图文并排显示的问题。 */
        /* 浮动要解决的两个问题: */
        /* 1.浮动元素的高度对于他的包含块不可见 */
        /* 2.浮动元素可以BFC块使他不影响到后面元素的布局 */

        /* 在flex 和grid布局中无效 */
    </style>
</head>

<body>
    <h1>浮动的本质</h1>
    <div class="box">
        <!-- 浮动的初心是为了解决图片与文本并排显示的问题 -->
        <img src="https://img.php.cn/upload/course/000/000/001/5f59db7b704fe778.png" alt="">
        <div class="decs">
            <h2>第十三期_综合实战</h2>
            <p>五大综合实战项目,巩固一二阶段学习成果,达到前端和PHP核心知识点的灵活运用,实训完成自己的项目,并指导上线
                公益直播时间:2020.11.25
                晚19:30-21:30,交流QQ群:916808767,并有神秘抽奖活动,敬请期待!本次公益直播课程,使用uniapp框架实现微信app的tabbar的编写,实现用户下拉刷新,上拉加载~
            </p>
            <a href="">了解详情</a>
        </div>
    </div>
</body>

</html>

定位的种类

定位属性:position
定位类型: 静态定位 static 相对定位 relative 绝对定位 absolute 固定定位 fixed
1.静态定位 position:static 默认 也就是文档流显示,元素的显示位置与源码顺序一致
2.相对定位 position:relative 相对于该元素在文档流中的原始位置进行偏移
3.绝对定位 position: absolute; 相对于它的祖先中离他最近的‘定位元素‘的位置发生偏移’

    如果祖先元素中不存在定位元素,他就相对于根元素(html)进行定位
    定位元素:只要这个元素中有 position:  或者 position:absoulte;被称为定位元素
    position:static 不是定位元素;
    而且只有定位元素才有资格虫儿当绝对定位元素的定位祖先元素 (定位参考元素  父级元素)

    4.固定定位  position:fixed 是绝对定位的一个特例  他始终相对于html定位
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定位的种类</title>
    <style>
        /* 定位属性:position */
        /* 定位类型: 静态定位 static 相对定位 relative 绝对定位 absolute 固定定位 fixed */
        /* 1.静态定位 position:static 默认 也就是文档流显示,元素的显示位置与源码顺序一致 */
        /* 2.相对定位 position:relative 相对于该元素在文档流中的原始位置进行偏移 */
        /* 3.绝对定位 position: absolute; 相对于它的祖先中离他最近的‘定位元素‘的位置发生偏移’ */

        /* 如果祖先元素中不存在定位元素,他就相对于根元素(html)进行定位 */
        /* 定位元素:只要这个元素中有 position:  或者 position:absoulte;被称为定位元素 */
        /* position:static 不是定位元素; */
        /* 而且只有定位元素才有资格虫儿当绝对定位元素的定位祖先元素 (定位参考元素  父级元素)*/



        /* 4.固定定位  position:fixed 是绝对定位的一个特例  他始终相对于html定位*/
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .box {
            width: 15em;
            height: 15em;
            border: 1px red solid;
            margin: 2em auto;
        }

        .box h2 {
            border: 1px green solid;
            background-color: lightgreen;
            /* 透明度 */
            /* opacity: 0.6; */

            /* 相对定位 */
            /* 相对之前的位置进行偏移 */
            position: relative;
            top: 1em;
            left: 1em;
        }

        /* 将h2改为绝对定位 */
        .box h2 {
            /* 绝对定位元素 会脱离文档流 */
            position: absolute;
        }

        .box{
            /* 转为定位元素 它的内部元素就相对于它进行绝对定位 */
            position: relative;
        }

        .box h2{
            top:0;
            left: 0;
            right: 0;
            bottom: 0;

            /* 如果被定位的元素的四个方向全部紧贴定位 父级的四个边沿,则会充满全部的定位 空间 */

            width: 8em;
            height: 9em;
            /* 使用 绝对定位的完全定位控件来快速实现水平和垂直居中 */
            margin: auto;
        }

       
       html{
           min-height: 100em;
       }

       .box h2{
           position: fixed;
       }
    </style>
</head>

<body>
    <div class="box">
        <h2>城南花开</h2>
        <p>欢迎来到城南花开的个人博客,最真实的内容。最新的内容</p>
    </div>
</body>

</html>

作业

作业标题:1221作用
作业内容:1. 简述定位的类型与应用场景和使用条件 ; 2. 模仿课堂案例,实现一个模态框
演示地址:https://php.gzj2001.com/1221/

作业代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1221作业</title>
    <style>
        .relative {
            /* 设置相对定位 */
            position: relative;
            /* 进行偏移 */
            top: 5em;
            left: 5em;
        }
        
        .old {
            /* 设置old为相对定位,便于absolute找到 */
            position: relative;
        }
        
        .absolute {
            /* 设置为绝对定位 */
            position: absolute;
            /* 距离他祖先的位置偏移  */
            top: 5em;
        }
        
        html {
            /* 为了展示固定定位的效果,将html拉长 */
            min-height: 100em;
        }
        
        .footer {
            font-size: 5em;
            width: 100vw;
            background-color: #666;
            /* 设置为固定定位 */
            position: fixed;
            bottom: 0;
        }
        /* -------------------- */
        /* 模态框演示 */
        /* 蒙版全屏覆盖 */
        
        .login {
            /* display: none; */
            background-color: rgb(0, 0, 0, 0.5);
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }
        /* 主体利用相对定位到中间 */
        
        .login .login-main {
            padding: 1em;
            min-height: 20em;
            border: 1px solid red;
            position: fixed;
            top: 5em;
            left: 30em;
            background-color: green;
        }
    </style>
</head>

<body>

</body>

<h2>静态定位是 默认的,和源码的位置一致 默认场景。默认使用条件 </h2>
<h2 class="relative">相对定位 是相对于自己本身原来的 位置进行偏移 应用场景,css阴影特效偏移? </h2>
<div class="old">
    我是祖先
    <h2 class="absolute">绝对定位 相对于它的祖先中离他最近的‘定位元素‘的位置发生偏移 应用于页面绝对布局?</h2>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

<button style="font-size: 10em;" onclick="login()">点我打开蒙版</button>

<div class="login" id="login" style="display: none;">
    <div class="login-main">
        <form>
            username<input type="text">
            <br> password <input type="text">
            <br>
            <button>login</button>
        </form>
    </div>
</div>

<div class="footer">
    我是footer 演示了固定定位
</div>

</html>

<script>
    function login() {
        document.getElementById("login").style.display = "block";
    }
</script>

效果展示:

image.png