常见的css布局

FC（渲染区域）

浏览器中页面有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用

BFC（格式化上下文）

页面上的一个隔离的渲染区域，容器里面的子元素不会在布局上影响到外面的元素

float 的值不为 none。
overflow 的值不为 visible。
position 的值不为 relative 和 static。
display 的值为 table-cell , table-caption, inline-block 中的任何一个

实际使用：页面能够缩放，侧边栏滚动吸顶

<template>
  <div class="container">
    <div class="left">left</div>
    <div class="right">
      <div :class="{'fixed-aside':fixed}" class="box">fsas</div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        fixed: false
      }
    },
    mounted() {
      this.listenScroll()
    },
    methods: {
      listenScroll() {
        window.addEventListener('scroll', this.winScroll)
        console.log('456')
      },
      winScroll() {
        const scrollTop = document.documentElement.scrollTop
        console.log(scrollTop)
        this.fixed = !!(scrollTop > 80)
      }
    }
  }
</script>

<style>
  .container {
    width: 1160px;
    margin: 0 auto;
    position: relative;
  }
  .left {
    width: 850px;
    box-sizing: border-box;
    height: 10000px;
    background-color: #f8f8f8;
  }
  .right {
    position: absolute;
    top: 0;
    right: 0;
    width: 290px;
  }
  .box {
    width: 290px;
    height: 290px;
    background-color: aquamarine;
  }
  .fixed-aside {
    position: fixed;
    width: 290px;
    z-index: 100;
    transition: top 0.3s;
  }
</style>

IFC(内联格式化上下文)

高度：包含行内元素中最高的实际高度（不受到竖直方向的 padding/margin 影响)

IFC 中不会有块级元素，当插入块级元素时（如 p 中插入 div）会产生两个匿名块与 div 分隔开，即产生两个 IFC，每个 IFC 对外表现为块级元素

GFC (网格布局格式化上下文)

display: grid

在网格容器（grid container）上定义网格定义行（grid definition rows）和网格定义列（grid definition columns）属性各在网格项目（grid item）上定义网格行（grid row）和网格列（grid columns）为每一个网格项目（grid item）定义位置和空间。

FFC (自适应格式化上下文)

display: flex 或者 display: inline-flex

主要使用：

父容器： justify-content 和 align-items
子容器： flex 和 align-self

/* 父容器 */
justify-content: flex-top;
/* flex-end center space-between space-around */
align-items: flex-top;
/* flex-end center baseline stretch */
flex-wrap: wrap;
/* wrap换行 nowrap不换行 wrap-reversefan x w w */

/* 子容器: 有弹性，会自动填充剩余空间*/
flex: none;
/* flex是多个属性的缩写，允许1-3个值连用 */
align-self: center;

列表项布局

使用 last-child() 来控制右边和下边的边距

<div class="container">
  <div class="item">宽度已知，最多放三个</div>
  <div class="item">宽度已知，最多放三个</div>
  <div class="item">宽度已知，最多放三个</div>
  ...
</div>

<style>
  /* scss code */
  .container {
    .item {
      margin-right: 30px;
      margin-bottom: 20px;

      &:nth-child(3n) {
        margin-right: 0;
      }
      &:nth-last-child(-n + 3) {
        margin-bottom: 0;
      }
    }
  }
</style>

flex 和负 margin 布局

flex 布局的 justify-content 主轴属性来控制元素的间距

<div class="wrapper">
  <div class="container">
    <div class="item">两个才能成一行呀</div>
    <div class="item">两个才能成一行呀</div>
    <div class="item">这三个字</div>
    <div class="item">独成一行呀独成一行呀独成一行呀独</div>
    <div class="item">两个才能成一行呀</div>
    <div class="item">四个</div>
  </div>
</div>

<style>
  /* scss code */
  .wrapper {
    padding: 10px;
    border: 2px solid rgb(240, 103, 103);

    .container {
      display: flex;
      flex-wrap: wrap;
      margin-right: -30px;
      margin-bottom: -20px;

      .item {
        margin-right: 30px;
        margin-bottom: 20px;
      }
    }
  }
</style>