百度前端技术学院——第七天到第八天——学习布局

第七天到第八天——学习布局

相对定位（relative）
为position设置relative
它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对于以前的位置移动，偏移前的位置保留不动。在使用相对定位时，就算元素被偏移了，但是他仍然占据着它没偏移前的空间。
绝对定位（absolute）
为position设置absolute
这样设置元素将会从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块（就是它前面的div并没有设置定位的属性），则相对于body元素，即相对于浏览器窗口。被设置了绝对定位的元素，在文档流中是不占据空间的，如果某元素设置了绝对定位，那么它在文档流中的位置会被删除
固定定位（fixed）
为position设置fixed
固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响。

float的特性

float被设计出来的初衷是用于——文字环绕效果。
破坏性：float设置的元素会脱离文档流
在这里插入图片描述
float破坏了父标签的原本结构，使得父标签出现了坍塌现象。导致这一现象的最根本原因在于：被设置了float的元素会脱离文档流。
若不然父元素坍塌则不能实现文字环绕效果，具体表现如下图

包裹性：
在这里插入图片描述
如上图，普通的div如果没有设置宽度，它会撑满整个屏幕，在之前的盒子模式那一节也讲到过。而如果给div增加float:left之后，它突然变得紧凑了，宽度发生了变化，把内容“王福朋”三个字包裹了——这就是包裹性。div设置了float之后，其宽度会自动调整为包裹住内容宽度，而不是撑满整个父容器。

注意，此时div虽然体现了包裹性，但是它的display样式是没有变化的，还是block。

清空格：

在这里插入图片描述
多个标签会有换行，浏览器默认换行为空格，增加float属性后使得img之间没有空格，紧挨在一起
“清空格”这一特性的根本原因是由于float会导致节点脱离文档流结构。它都不属于文档流结构了，那么它身边的什么换行、空格就都和它没关系的，它就尽量的往一边去靠拢，能靠多近就靠多近，这就是清空格的本质。

网页布局

网页实际是块与块之间的位置：相邻，嵌套，重叠
下面介绍网页布局的常见几种类型
在这里插入图片描述

1:一列布局：
一般都是固定的宽高，设置margin：0 auto，用于界面显著标题的展示

        .main{
            width: 200px;
            height: 100px;
            background-color: grey;
            margin: 0 auto;
        }
<div class="main"></div>

2:两列布局
说起两列布局，最常见的就是使用float来实现。float浮动布局的缺点是浮动后会造成文本环绕等效果，以及需要及时清除浮动。
设置左左浮动，或设置左右浮动（这是需要确定父级元素的宽度）
如果父级元素没有设置高度，则需要设置overflow:hidden来清除浮动产生的影响
对于自己相邻元素清除浮动产生的影响用：clear：both;
在这里插入图片描述

 <div class="main">
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
        .main{
            width: 400px;
            background: red;
            overflow: hidden;
        }
        .left{
            background: yellow;
            float: left;
        }
        .right{
            background: green;
            float: left;
        }

3:三列布局
两侧定宽中间自适应
首先设置父级元素的宽度，可以左左右设置浮动。然后中间设置margin调整间距。也可以都设置成左浮动，设置margin，调整间距。同样注意清除浮动的影响！
在这里插入图片描述

    <div class="main">
        <div class="left">left</div>
        <div class="middle">middle</div>
        <div class="right">right</div>
    </div>
        .main{
            width: 100%;
            background: red;
            overflow: hidden;
        }
        .left{
            background: yellow;
            float: left;
            width: 100px;
        }
        .middle{
             background: rosybrown;
             float: left;
             width: cacl(100%-200px);
         }
        .right{
            background: green;
            float: right;
            width: 100px%;
        }

4:混合布局
在一列布局的基础上，保留top和foot部分，将中间的main部分改造成两列或三列布局，小的模块可以再逐级同理划分。
在这里插入图片描述

 <div class="top"></div>
    <div class="main">
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
    <div class="footer"></div>
        .top{
            height: 100px;
            background: teal;
        }
        .footer{
            height: 100px;
            background: wheat;
        }
        .main{
            width: 100%;
            background: red;
            overflow: hidden;
        }
        .left{
            background: yellow;
            float: left;
            width: 50%;
        }
        .right{
            background: green;
            float: right;
            width: 50%;
        }

5.扩展（如等分布局等）
在这里插入图片描述

 <div class="parent">
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
    </div>
        body{margin: 0;}
        .parent{
            border: 1px solid red;
            overflow: hidden;
            margin-right: -10px;
        }
        .child {
            width: calc(25% - 10px);
            height: 100px;
            background: green;
            float: left;
            margin-right: 10px;
        }