浮动 & 定位

浮动

浮动的本质

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

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

    <style>
        * {
            margin: 0;
            padding: 0 box-sizing: border-box;
        }
        .box {
            padding: 1em;
            border: 1px solid #000;
        }
        .box img {
            width: 28em;
            /* 圆角 */
            border-radius: 0.5em;
            /* 图片向左浮动，后面的文本会围绕着它水平排列 ，浮动本质*/
            /* 也可以右浮动 */
            /* 浮动元素不会影响到它前面的元素，只会影响到它后面的元素排列
            浮动元素只会水平方向排列 
            浮动元素脱离文档流（部分脱离文档流，并非完全脱离，只对后面的元素有影响）
            所有元素一旦浮动都具备了块级元素的特征 */
            float: left;
            margin-right: 2em;
        }
        .box .desc a {
            /* a标签是行内元素设置宽应该没有效果，但是一旦浮动后宽高就起作用了 */
            width: 12em;
            height: 2em;
            background-color: lightgreen;
            float: left;
        }
    </style>

总结：

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

父元素计算高度的时候会忽略内部的浮动元素（父级高度的塌陷），怎么解决呢？

方案1. 附加元素。添加一个额外元素

<!-- 在需要清除的元素后面新增一个元素，没有实际的意义就是清除浮动 -->
<div class="clear"></div>

        .clear {
            clear:left;
        }

方案1有些问题，所有的DOM元素都是由用的尽量不要写没有作用的元素；还存在一定的风险；另外在遍历元素取值时也需要有额外的工作来处理这些元素；代码不够简洁和优雅。

方案2. 伪元素

什么是伪元素：html中没有元素，通过css强制加上去的元素

        .box:after{
            content:'';
            display: block;
            /* 左右都清除 */
            /* clear:left;clear:right; */
            clear:both;
        }

通过伪元素的方式优雅的解决了浮动父元素高度塌陷的问题

当浏览器窗口达到一定宽度时，文字会包裹图片，而需求是图片和文本分别布局互不影响，右边的文本不受左边图片的影响，如何做？

        .box .desc {
            overflow: hidden;
        }

子元素可以使用overflow: hidden;那么父元素是否可以可以使用它来消除浮动的影响呢？

方案3. 不使用伪元素

        .box .desc {
            overflow: hidden;
        }
        .box {
            overflow: hidden;
        }

优雅方便的解决了父元素高度塌陷问题。

总结：
浮动的本质是为了解决图文并排显示问题

浮动元素的高度对于他的包含块不可见
浮动元素可以BFC块使它不影响到后面的元素布局。

创建BFC的方式: 任何一个元素添加上以下任何一个属性后就是是一个BFC容器

float: left / right, 不能是 none
overflow: hidden / auto / scroll , 不能是 visible
display: inline-block / table-cell
display: flex / inline-flex
display: grid / inline-grid
position: absolute / fiexed

浮动以后会很少使用，因为在弹性盒子和grid中是失效的。

定位

定位类型：静态定位static,相对定位relative,绝对定位absolute,固定定位：fixed

静态定位：position:static 默认文档流定位，元素的显示位置与源码的顺序一致；
相对定位：position: relative;相对该元素的原始位置进行定位（偏移）
绝对定位：position: absolute;相对于祖先中离他最近的“定位元素”的位置发生偏移
如果祖先中没有定位元素，它就参考根元素（html）进行定位
定位元素：只要这个元素中有
```
     position:relative;
     position:absolute
     就是定位元素
```

固定定位：position:fixed;是绝对定位的一个特例，它始终相对HTML定位

     只有定位元素才有资格充当定位祖先元素（定位参考，定位父级）
     固定定位一般用在：在线客服，广告位等，要慎重，因为会影响用户体验

综合应用：实现一个简易的带蒙板的登录框

    <header>
        <h2>我的博客</h2>
        <button>登录</button>
        <link rel="stylesheet" href="style.css">
    </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="text" name="email">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label for="password">密码</label>
                        </td>
                        <td>
                            <input type="password" name="password">
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td><button>登录</button></td>
                    </tr>
                </table>
            </form>
        </div>
    </div>
    <script src="modal.js"></script>

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
/* 页眉 */
header {
    background-color: #ccc;
    padding: .5em 2em;
    overflow: hidden;
}
header h2 {
    float: left;
}
header button {
    float: right;
    width: 10em;
    height: 2.5em;
}
header button:hover {
    cursor: pointer;
    background-color: #fff;
}
/* 模态框 */
/* 蒙板 */
.modal .modal-backdrop {
    background:rgb(0,0,0,0.5);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.modal .modal-body {
    padding: 1em;
    min-width: 25em;
    border: 1px solid #000;
    background: linear-gradient(to right, green, #efefef);
    /* 固定定位 */
    position: fixed;
    top: 5em;
    left: 30em;
    right: 30em;
}
.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: 2em;
}
.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;
}

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';
}

总结：定位应用很广泛也很实用。难点是position属性的几个值的参考对象。其他深层次的领悟需要后续多摸索。

浮动

浮动的本质

定位

相关文章