布局

视频课程

定位

position: absolute | relative | fixed | sticky | static

absolute: 绝对定位，脱离文档流（可能会导致其它盒子的位置发生变化）。top和left相对于非static的第一个祖先元素（默认为static）

所以通常绝对定位会将其父亲设置为relative，如果祖先元素都没有设置position，那么会根据页面顶级元素定位（效果同fixed）

relative: 相对定位，相对于元素在文档流中的位置进行定位（不会导致其它盒子的位置变化，但是可能与其它盒子重合）

fiexed: 固定定位，相对于页面顶级元素（如：body）定位，脱离文档流。回到顶部等按钮可以通过固定定位实现

sticky: 粘性定位，是相对定位和固定定位的一个混合，元素在跨越特定的阈值前是相对定位，之后就是固定定位

static: 静态定位（默认值），top、right、bottom、left、z-index对其无效

flex等分布局

利用 flex 来做等分布局

<style type="text/css">
    .parent {
        display: flex;
    }
    .child {
        height: 300px;
        width: 33.33%;
        outline: solid 1px;
    }
</style>

<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

flex自适应布局

利用 flex 来做自适应布局

child1宽度200px、child2占剩余宽度的1份、child3占剩余宽度的2份

<style type="text/css">
    .parent {
        display: flex;
        width: 100%;
        height: 200px;
    }
    .child1 {
        width: 200px;
        background-color: lightblue;
    }
    .child2 {
        flex: 1;
        background-color: pink;
    }
    .child3 {
        flex: 2;
        background-color: blue;
    }
</style>

<div class="parent">
    <div class="child1">
    </div>
    <div class="child2">
    </div>
    <div class="child3">
    </div>
</div>

Flex布局

默认flex-direction为row，此时主轴是x轴（从左到右），辅轴为y轴（自上而下）。以下举例默认x为主轴、y为辅轴

• row：从左到右
• row-reverse：从右到左
• column：从上到下
• column-reverse：从下到上

justify-content：调整内容在主轴方向的排列方式

• flex-start：左对齐
• flex-end：右对齐
• center：居中对齐
• space-between：两端对齐（两端不留空，中间均匀留空）
• space-around：环绕对齐（均匀留空）

align-items：对齐元素在辅轴(侧轴)方向的对齐方式

• stretch：拉伸填满（如果子容器高度设置为auto，会拉伸填满到父容器）
• flex-start：顶部对齐
• flex-end：底部对齐
• center：垂直居中
• baseline：基于子元素的第一行文字对齐

align-content：对齐多行内容在辅轴方向上的排列方式。属性值可参考justify-content。如果flex-direction为column，需要调整横向对齐使用该属性

flex-wrap：主轴一行显示不了的时候的换行策略

• no-wrap：不换行，默认值
• wrap：换行
• wrap-reverse：反向换行（第一行在最下面）

flex-shrink: 1; 承担被压缩空间的权重（默认1），全1或全0就是平均压缩

压缩计算公式：单个组件压缩量 = 总压缩量 * ( 单个 flex-shrink 值 / 总 flex-shrink 值)

举例：组件高度200px有4个子组件，如果设置组件高度为150px且只希望其中一个组件被压缩其他不被压缩，那么设置被压缩的为：flex-shrink: 1;（默认：可不设），其他：flex-shrink: 0;