第9章 1221-浮动定位与flex初步，学习心得、笔记

今天所学心得、笔记

1、简述定位的类型与应用场景和使用条件；

CSS中定位主要有5种：
1、static：静态定位，标准文档流，系统默认使用；
2、relative    相对定位，相对元素自己之前位置（默认位置），发生偏移量的定位，不脱离文档流，下方元素不会上移挤占位置；
3、absolute 绝对定位，相对于定位元素（一般为父级元素）的位置，发生偏移量的定位，脱离了文档流，下方元素会上移挤占位置，
    父元素不能是static定位，否则采用根元素html作为定位元素，所以absolute一般需要和relative配合使用，
    父容器使用relative（相对定位）,子容器使用absolute（绝对定位）；
4、fixed 固定定位，元素一直在视口中保持固定位置的定位，脱离了文档流不占位置，一般用于广告，客服，返回头部等元素；
5、sticky    粘性定位，这里不作研究；

2、实现一个模态框；

2.1 html部分

<body>
<!-- 页眉 -->
<header>
    <h2>我的博客</h2>
    <button>登 录</button>
</header>
<!-- 模态框 -->
<div class="modal">
    <!-- 蒙板 -->
    <div class="modal-backboard"></div>
    <!-- 登录框 -->
    <div class="login-box">
        <button class="close">关闭</button>
        <form action="" method="post">
            <table>
                <caption>用户登录</caption>
                <tr>
                    <td><label for="username">用户名 &nbsp;</label></td>
                    <td><input type="text" id="username"></td>
                </tr>
                <tr>
                    <td><label for="password">密 &nbsp; 码 &nbsp;</label></td>
                    <td><input type="text" id="password"></td>
                </tr>
                <tr>
                    <td></td>
                    <td><button type="submit">登 录</button></td>
                </tr>
            </table>
        </form>
    </div>
</div>
</body>

2.2 script部分

<script>
    // 获取元素
    const btn = document.querySelector('header button');
    const modal = document.querySelector('.modal');
    const close = document.querySelector('.close');
    // 两个按钮，添加事件
    btn.addEventListener('click',setModal);
    close.addEventListener('click',setModal);
    // 事件处理函数
    function setModal(ev) {
        ev.preventDefault();
        let status = window.getComputedStyle(modal, null).getPropertyValue('display');
        modal.style.display = status === 'none' ? 'block' : 'none';
    }
</script>