Home > List of blog posts > 浮动，消除浮动，BFC，定位，固定定位模态框

Blogger Information

Blog 22

fans 0

comment 0

visits 21188

Special Recommendation

More>

Related recommendations

浮动，消除浮动，BFC:创立独立的布局单元代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动，消除浮动，BFC:创立独立的布局单元</title>
    <style>
    * {
        margin: 0;
        padding: 0;
        box-sizing:border-box;
    }
    .box {
        padding: 1em;
        border: 1px solid black;
        background-color: lightcyan;
        overflow: hidden;
    }
    .box img {
        width: 15em;
        border-radius: 0.5em;
        /* 图片向左浮动，后面的文本会围绕着它水平排列  行内元素浮动后会提升为块元素 */
        float: left;
        /* float: right; */
        margin-right: 1em;
    }
    .box .desc a {
        width: 10em;
        height: 2em;
        background-color: lightgreen;
        float: left;
    }
    /* 总结：
    1. 浮动只限于水平方向
    2.浮动元素脱离文档流，后面的元素会上移填充它原来的空间（从右边空间开始填满图片右边后会向下换行开始）
    3.浮动元素不会影响到它前面的元素的布局，只会影响到后面的元素的排列
    4.任何元素（包括行内元素）浮动后，都具备了块级元素的特征 */
    /* 父元素计算高度的时候，会忽略内部浮动元素（父级高度的塌陷） */
    /* ----------------------------------------------------- */
    /* 附加元素 */
    /* .box  .clear {
        clear: both;
    } */
    /* 伪元素 after*/
    /* .box:after{
        content: '';
        display: block;
        clear: both;
    } */
    /* 我们希望左右二边是完全独立的元素，右边的元素不受左边浮动元素的影响 */
    .box .desc {
        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 / fiexed */
    /* 能不能用overflow:解决父元素的高度塌陷问题? */
    /* 在父元素上使用overflow: hidden;转为BFC，使它的布局不受到内部浮动元素的影响 */
    /* .box {
        overflow: hidden;
    } */
    /* 浮动的本质是为了解决图文并排显示的问题
    浮动要解决的二个问题：
    1.浮动元素的高度对于它的包含块不可见
    2.浮动元素可以BFC块使它不影到后面的元素的布局 */
    /* 注意的是 浮动在新版本可能失效，在老版本才有效。所以以后可能不会再用了 */
    </style>
</head>
<body>
    <h1>浮动的本质</h1>
    <div class="box">
        <!-- 浮动的初心是为了解决图片与文本并排显示问题 -->
        <img src="https://img.php.cn/upload/course/000/000/001/5fae4f08a043a576.png" alt="">
        <div class="desc">
            <h2>第十四期_前端开发</h2>
            <p>php中文网第十四期前端开发部分学习目标：1、HTML5+CSS3基础知识与实战； 2、完成网站所有静态页面布局；重点：弹性布局与网格布局；3.JavaScript、jQuery、ES6基础与实战 ；4.Vue.js基础与实战</p>
            <a href="">了解详情</a>
        </div>
        <!-- <div class="clear"> </div> -->
    </div>
</body>
</html>

定位的种类代码

<!DOCTYPE html>
<html lang="zh-CN">
<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: absolue; 相对它的祖先中离它最近的“定位元素”的位置发生偏移 */
        /* 如果祖先元素中不存在定位元素，它就参考根元素(html)进行定位 */
        /* 定位元素：只要这个元素中有position: relative; 或者 pssition: absolute;就称为定位元素 */
        /* psition:static;这个不是定位元素 */
        /* 而且只有定位元素才有资格充当绝对定位元素的定位祖先元素（定位参与元素，定位父级） */
        /* 4. 固定定位：position: fixed; 是绝对定位的一个特例，它始终相对于html定位 */
    * {
        margin: 0;
        padding: 0;
        box-sizing:border-box;
    }
    .box {
        width: 15em;
        height: 15em;
        border: 1px solid black;
        margin: 2em auto;
    }
    .box h2 {
        border: 1px solid black;
        background-color: lightgreen;
        opacity: 0.6;
        /* 相对定位 */
        position: relative;
        top: 1em;
        left: 1em;
    }
    /* 将h2改为绝对定位 */
    .box h2{
        /* 绝对定位元素会脱离文档流 如果没有设置宽高那就会收缩到内容宽高 */
        position: absolute;
    }
    .box {
        /* 转为定位元素，它内部的元素就相对于它进行绝对定位 */
        position: relative;
    }
    .box h2 {
        top: 2em;
        left: 2em;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        /* 如果被定位的元素四个方向全部紧贴定位父级的四个边沿，则会充满全部“定位空间” */
        width: 8em;
        height: 2em;
        margin: auto;
    }
    html {
        min-height: 100em;
    }
    /* 使用固定定位使h2不动 */
    .box h2 {
        position: fixed;
    }
    /* 固定定位：在线客服，广告位 */
    </style>
</head>
<body>
    <div class="box">
        <h2>php中文网</h2>
        <p>欢迎大家选择php中文网学习web开发技术，第14期内容丰富，持术实用</p>
    </div>
</body>
</html>

固定定位实现：模态框代码

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>固定定位实现：模态框</title>
    <!-- 导入css -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- 页眉 -->
    <header>
        <h2>我的博客</h2>
        <button>登录</button>
    </header>
    <!-- 模态框 -->
    <div class="modal">
        <!-- 蒙板：用来盖住后面的内容，使它半透明 -->
        <div class="modal-backdrop"></div>
        <!-- 主体 -->
        <div class="modal-body">
            <button class="close">关闭</button>
            <form action="" method="POST">
                <table>
                    <caption>用户登录</caption>
                    <tr>
                        <td><label for="email">邮箱：</label></td>
                        <td><input type="email" name="email" id="email"></td>
                    </tr>
                    <tr>
                        <td><label for="password">密码：</label></td>
                        <td><input type="password" name="password" id="password"></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td><button>登录</button></td>
                    </tr>
                </table>
            </form>
        </div>
    </div>
    <!-- 导入js -->
    <script src="modal.js"></script>
</body>
</html>

css

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
header {
    background-color: #ccc;
    padding: 0.5em 2em;
    overflow: hidden;
}
header button {
    float: right;
    width: 10em;
    height: 2.5em;
}
header button:hover {
    cursor: pointer;
    background-color: #fff;
}
/* 模态框 */
/* 蒙板 */
.modal .modal-backdrop{
    background-color: rgb(0,0, 0,0.5);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.modal .modal-body {
    padding: 1em;
    /* min-width: 20em; */
    border: 2px solid black;
    background: linear-gradient(to right,lightcyan,#efefef);
    /* 固定定位 */
    position: fixed;
    top: 5em;
    left: 3em;
    right: 3em;
    width: 30em;
    height: 18em;
    margin: auto;
}
.modal form table {
     width: 80%;
}
.modal form table caption {
    font-weight: bold;
    margin-bottom: 1em;
}
.modal form table td {
    padding: 0.5em;
}
.modal form table td:first-of-type {
    width: 5em;
}
.modal form table input {
    width: 20em;
    height: 2.5em;
}
.modal form table button {
    width: 20em;
    height: 2.5em;
}
/* 定位父级 */
.modal-body {
    position: relative;
}
.modal .close {
    position: absolute;
    width: 4em;
    height: 2em;
    top: 1em;
    right: 1em;
}
.modal .close:hover {
    cursor: pointer;
    background-color: red;
    color: white;
}
/* 页面初始化时，模态框应该隐藏 */
.modal {
    display: none;
}

js

const btn = document.querySelector('header button');
const modal = document.querySelector('.modal');
const close = document.querySelector('.close');
btn.addEventListener('click',setModal,false);
close.addEventListener('click',setModal,false);
function setModal(ev){
    ev.preventDefault();
    let status = window.getComputedStyle(modal, null).getPropertyValue('display');
    modal.style.display = status === 'none' ? 'block' : 'none';
}

总结：

浮动的本质

1浮动只限于水平方向
2.浮动元素脱离文档流，后面的元素会上移填充它原来的空间（从右边空间开始填满图片右边后会向下换行开始）
3.浮动元素不会影响到它前面的元素的布局，只会影响到后面的元素的排列
4.任何元素（包括行内元素）浮动后，都具备了块级元素的特征
5.父元素计算高度的时候，会忽略内部浮动元素（父级高度的塌陷）

消除浮动（父级高度的塌陷所以需要消除浮动）

同级加附加元素消除浮动
同级加伪元素消除浮动

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 / fiexed

浮动要解决的二个问题：

1.浮动元素的高度对于它的包含块不可见
2.浮动元素可以BFC块使它不影到后面的元素的布局
3.注意的是浮动在新版本可能失效，在老版本才有效。所以以后可能不会再用了

定位

定位属性: position
定位类型：静态定位static，相对定位relative，绝对定位absolute，固定定位：fixed
静态定位: position: static 默认，也就是文档流定位，元素的显示位置与源码顺序一致;
相对定位：position: relative; 相对于该元素在文档流中的原始位置进行偏移
绝对定位：position: absolue; 相对它的祖先中离它最近的“定位元素”的位置发生偏移
如果祖先元素中不存在定位元素，它就参考根元素(html)进行定位
定位元素：只要这个元素中有position: relative; 或者 pssition: absolute;就称为定位元素
psition:static;这个不是定位元素
而且只有定位元素才有资格充当绝对定位元素的定位祖先元素（定位参与元素，定位父级）
固定定位：position: fixed; 是绝对定位的一个特例，它始终相对于html定位

Correcting teacher：

天蓬老师

Correction status：qualified

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

php之win运行环境，工具与运行原理

2020-12-08 19:59:37

浮动，消除浮动，BFC:创立独立的布局单元 代码

定位的种类 代码

固定定位实现：模态框 代码