06_标准流 + 浮动 + Flex 布局

01_标准流

标准流也叫文档流, 指的是标签在页面中默认的 排布规则, 例如: 块元素独占一行, 行内元素可以一行显示多个

02_浮动

01_浮动

作用: 让块元素水平排列

属性名: float

属性值

left: 左对齐
right: 右对齐

特点:

浮动后的盒子 顶 对齐
浮动后的盒子具备 行内块 特点
浮动后的盒子 脱标, 不占 用标准流的位置

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    .one {
      width: 100px;
      height: 100px;
      background-color: brown;

      /* 1.浮动: 左对齐 */
      float: left;
    }

    .two {
      width: 200px;
      height: 200px;
      background-color: orange;

      /* float: left; */

      /* 2.浮动: 右对齐 */
      float: right;
    }

    /* 3.特点: 顶对齐, 具备行内块显示模式特点, 浮动的盒子会脱标 */
  </style>
</head>

<body>
  <div class="one">one</div>
  <div class="two">two</div>
</body>

</html>

02_总结

浮动后的盒子有什么特点?

顶 对齐
具备 行内块 特点
脱标

03_产品区域布局

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    * {
      margin: 0;
      padding: 0;
    }

    li {
      list-style: none;
    }

    .product {
      margin: 50px auto;
      width: 1226px;
      height: 628px;
      background-color: pink;
    }

    .left {
      float: left;
      width: 234px;
      height: 628px;
      background-color: skyblue;
    }

    .right {
      float: right;
      width: 978px;
      height: 628px;
      background-color: brown;
    }

    /* 1.细节: 如果父级宽度不够, 浮动的盒子会掉下来 */
    .right li {
      float: left;
      margin-right: 14px;
      margin-bottom: 14px;
      width: 234px;
      height: 300px;
      background-color: orange;
    }

    /* 2.第四个 li 和 第八个 li 去掉右侧的 margin */
    .right li:nth-child(4n) {
      margin-right: 0;
    }
  </style>
</head>

<body>
  <!-- 版心: 左右, 右面 ==> 8 个产品 ==> 8 个 li -->
  <div class="product">
    <div class="left"></div>
    <div class="right">
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
  </div>
</body>

</html>

02_清除浮动

01_浮动的影响

场景: 浮动元素会 脱标, 如果 父级没有高度, 子级 无法撑开父级高度 (可能导致页面布局错乱)

解决方法: 清除浮动 (清除浮动带来的影响)

浮动的影响

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    .top {
      margin: 10px auto;
      width: 1200px;

      /* 1.浮动元素会 脱标, 如果 父级没有高度, 子级 无法撑开父级高度 (可能导致页面布局错乱) */
      /* height: 300px; */

      background-color: pink;
    }

    .left {
      float: left;
      width: 200px;
      height: 300px;
      background-color: skyblue;
    }

    .right {
      float: right;
      width: 950px;
      height: 300px;
      background-color: orange;
    }

    .bottom {
      height: 100px;
      background-color: brown;
    }
  </style>
</head>

<body>
  <div class="top">
    <div class="left"></div>
    <div class="right"></div>
  </div>
  <div class="bottom"></div>
</body>

</html>

02_额外标签法

在 父 元素 内容的最后 添加一个 块 级元素, 设置 CSS 属性 clear: both

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    .top {
      margin: 10px auto;
      width: 1200px;

      /* 浮动元素会 脱标, 如果 父级没有高度, 子级 无法撑开父级高度 (可能导致页面布局错乱) */
      /* height: 300px; */

      background-color: pink;
    }

    .left {
      float: left;
      width: 200px;
      height: 300px;
      background-color: skyblue;
    }

    .right {
      float: right;
      width: 950px;
      height: 300px;
      background-color: orange;
    }

    .bottom {
      height: 100px;
      background-color: brown;
    }

    /* 1.额外标签法: 在 父 元素 内容的最后 添加一个 块 级元素, 设置 CSS 属性 clear: both */
    .clearfix {
      clear: both;
    }
  </style>
</head>

<body>
  <div class="top">
    <div class="left"></div>
    <div class="right"></div>
    <div class="clearfix"></div>
  </div>
  <div class="bottom"></div>
</body>

</html>

03_单伪元素法

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    .top {
      margin: 10px auto;
      width: 1200px;

      /* 浮动元素会 脱标, 如果 父级没有高度, 子级 无法撑开父级高度 (可能导致页面布局错乱) */
      /* height: 300px; */

      background-color: pink;
    }

    .left {
      float: left;
      width: 200px;
      height: 300px;
      background-color: skyblue;
    }

    .right {
      float: right;
      width: 950px;
      height: 300px;
      background-color: orange;
    }

    .bottom {
      height: 100px;
      background-color: brown;
    }


    /* 1.单伪元素法 */
    .clearfix::after {
      content: "";
      display: block;
      clear: both;
    }
  </style>
</head>

<body>
  <div class="top clearfix">
    <div class="left"></div>
    <div class="right"></div>
  </div>
  <div class="bottom"></div>
</body>

</html>

04_双伪元素法 (推荐)

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    .top {
      margin: 10px auto;
      width: 1200px;

      /* 浮动元素会 脱标, 如果 父级没有高度, 子级 无法撑开父级高度 (可能导致页面布局错乱) */
      /* height: 300px; */

      background-color: pink;
    }

    .left {
      float: left;
      width: 200px;
      height: 300px;
      background-color: skyblue;
    }

    .right {
      float: right;
      width: 950px;
      height: 300px;
      background-color: orange;
    }

    .bottom {
      height: 100px;
      background-color: brown;
    }


    /* 1.双伪元素法; before 解决外边距塌陷问题 */
    .clearfix::before,
    .clearfix::after {
      content: "";
      display: table;
    }

    /* 2.after 清除浮动 */
    .clearfix::after {
      clear: both;
    }
  </style>
</head>

<body>
  <div class="top clearfix">
    <div class="left"></div>
    <div class="right"></div>
  </div>
  <div class="bottom"></div>
</body>

</html>

05_overflow 法

父 元素添加 CSS 属性 overflow: hidden

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    .top {
      margin: 10px auto;
      width: 1200px;

      /* 浮动元素会 脱标, 如果 父级没有高度, 子级 无法撑开父级高度 (可能导致页面布局错乱) */
      /* height: 300px; */

      background-color: pink;

      /* 1.overflow 法: 父 元素添加 CSS 属性 overflow: hidden */
      overflow: hidden;
    }

    .left {
      float: left;
      width: 200px;
      height: 300px;
      background-color: skyblue;
    }

    .right {
      float: right;
      width: 950px;
      height: 300px;
      background-color: orange;
    }

    .bottom {
      height: 100px;
      background-color: brown;
    }
  </style>
</head>

<body>
  <div class="top">
    <div class="left"></div>
    <div class="right"></div>
  </div>
  <div class="bottom"></div>
</body>

</html>

03_总结

01_总结

浮动属性 float, left 表示 左 浮动, right 表示 右 浮动

特点

浮动后的盒子 顶 对齐
浮动后的盒子具备 行内块 特点
父级 宽度 不够, 浮动的 子级 会 换行
浮动后的盒子 脱标

清除浮动的影响: 子级浮动, 父级没有高度, 子级 无法 撑开 父级高度, 影响布局效果

双伪元素法

拓展: 浮动本质作用是实现 图文混排 效果

03_Flex 布局

01_认识

Flex 布局也叫弹性布局, 是 浏览器提倡 的布局模型, 非常适合结构化布局, 提供了强大的 空间分布 和 对齐 能力

Flex 模型 不会 产生浮动布局中 脱标 现象, 布局网页 更简单, 更灵活

02_组成

01_组成

设置方式: 给 父 元素设置 display: flex, 子 元素可以 自动挤压或拉伸

组成部分:

弹性容器
弹性盒子
主轴: 默认在 水平 方向
侧轴 / 交叉轴: 默认在 垂直 方向

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    /* 1.弹性容器 */
    .box {
      display: flex;
      
      height: 300px;
      border: 1px solid #000;
    }

    /* 2.弹性盒子: 沿着主轴方向排列, 子元素可以 自动挤压; 沿着侧轴方向, 子元素可以 自动拉伸 */
    .box div {
      width: 200px;
      /* height: 100px; */
      background-color: pink;
    }
  </style>
</head>

<body>
  <div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</body>

</html>

03_主轴对齐方式 + 侧轴对齐方式

01_主轴对齐方式

属性名: justify-content

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    .box {
      height: 300px;
      border: 1px solid #000;

      display: flex;

      /* 1.默认值, 弹性盒子从 起点 开始依次排列 */
      /* justify-content: flex-start; */

      /* 2.弹性盒子从 终点 开始依次排列 */
      /* justify-content: flex-end; */

      /* 3.弹性盒子沿主轴 居中 排列 */
      /* justify-content: center; */

      /* 4.父级剩余的尺寸分配成间距: 弹性盒子 之间 的间距相等 */
      justify-content: space-between;

      /* 5.父级剩余的尺寸分配成间距: 间距出现在弹性盒子 两侧; 视觉效果: 弹性盒子之间的间距是两端间距的 2 倍 */
      /* justify-content: space-around; */

      /* 6.父级剩余的尺寸分配成间距: 各个间距都相等 */
      /* justify-content: space-evenly; */
    }

    .box div {
      width: 200px;
      height: 100px;
      background-color: pink;
    }
  </style>
</head>

<body>
  <div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</body>

</html>

center

space-between

space-around

space-evenly

02_侧轴对齐方式

属性名

align-items: 当前弹性容器内 所有 弹性盒子的侧轴对齐方式 (给弹性容器设置)
align-self: 单独控制 某个 弹性盒子的侧轴对齐方式 (给弹性盒子设置)

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    .box {
      height: 300px;
      border: 1px solid #000;

      display: flex;

      /* 1.弹性盒子沿着侧轴线被 拉伸至铺满容器 (弹性盒子没有设置侧轴方向尺寸则默认拉伸) */
      /* align-items: stretch; */

      /* 2.弹性盒子沿侧轴 居中 排列 */
      /* align-items: center; */

      /* 3.弹性盒子从 起点 开始依次排列 */
      /* align-items: flex-start; */

      /* 4.弹性盒子从 终点 开始依次排列 */
      align-items: flex-end;
    }

    /* 5.第二个 div, 弹性盒子沿侧轴 居中 排列 */
    .box div:nth-child(2) {
      align-self: center;
    }

    .box div {
      width: 200px;
      height: 100px;
      background-color: pink;
    }
  </style>
</head>

<body>
  <div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</body>

</html>

04_修改主轴方向

01_修改主轴方向

主轴 默认在水平方向, 侧轴默认在垂直方向

属性名: flex-direction

属性值

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    .box {
      width: 150px;
      height: 120px;
      background-color: pink;

      display: flex;

      /* 1.修改主轴方向 为垂直方向, 侧轴自动变换到水平方向 */
      flex-direction: column;

      /* 2.主轴在垂直方向, 视觉效果: 垂直居中 */
      justify-content: center;

      /* 3.侧轴在水平方向, 视觉效果: 水平居中 */
      align-items: center;
    }

    img {
      width: 32px;
      height: 32px;
    }
  </style>
</head>

<body>
  <div class="box">
    <img src="./images/1.png" alt="">
    <span>媒体</span>
  </div>
</body>

</html>

05_弹性伸缩比

01_弹性伸缩比

作用: 控制弹性盒子的 主轴 方向的 尺寸

属性名: flex

属性值: 整数数字, 表示占用父级 剩余 尺寸的 份数

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    .box {
      height: 300px;
      border: 1px solid #000;

      /* 1.默认情况下, 主轴方向尺寸是靠内容撑开, 侧轴默认拉伸 */
      display: flex;
    }

    .box div {
      /* height: 100px; */
      background-color: pink;
    }

    .box div:nth-child(1) {
      width: 200px;
    }

    .box div:nth-child(2) {
      /* 2.表示占用父级 剩余 尺寸的 份数 */
      flex: 1;
    }

    .box div:nth-child(3) {
      /* 3.表示占用父级 剩余 尺寸的 份数 */
      flex: 2;
    }
  </style>
</head>

<body>
  <div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</body>

</html>

06_弹性盒子换行 + 行对齐方式

01_弹性盒子换行

弹性盒子可以 自动挤压或拉伸, 默认情况下, 所有弹性盒子都 在一行显示

属性名: flex-wrap

属性值

wrap: 换行
nowrap: 不换行 (默认)

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    .box {
      height: 300px;
      width: 900px;
      border: 1px solid #000;

      display: flex;

      /* 1.弹性盒子: 换行 */
      flex-wrap: wrap;

      /* 2.弹性盒子: 不换行 (默认) */
      /* flex-wrap: nowrap; */
    }

    .box div {
      width: 200px;
      height: 100px;
      background-color: pink;
    }
  </style>
</head>

<body>
  <div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
    <div>11</div>
    <div>12</div>
  </div>
</body>

</html>

02_行对齐方式

属性名: align-content

属性值

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    .box {
      height: 400px;
      width: 900px;
      border: 1px solid #000;

      display: flex;
      flex-wrap: wrap;

      /* 1.默认值, 弹性盒子从 起点 开始依次排列 */
      /* align-content: flex-start; */

      /* 2.弹性盒子从 终点 开始依次排列 */
      /* align-content: flex-end; */

      /* 3.弹性盒子沿侧轴 居中 排列 */
      /* align-content: center; */

      /* 4.弹性盒子沿主轴均匀排列: 空白间距均分在弹性盒子 之间 */
      align-content: space-between;

      /* 5.弹性盒子沿主轴均匀排列: 空白间距均分在弹性盒子 两侧 */
      /* align-content: space-around; */

      /* 6.弹性盒子沿主轴均匀排列: 弹性盒子与容器之间间距相等 */
      /* align-content: space-evenly; */

      /* 7.行对其方式: 对单行弹性盒子不生效 */
    }

    .box div {
      width: 200px;
      height: 100px;
      background-color: pink;
    }
  </style>
</head>

<body>
  <div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
  </div>
</body>

</html>

04_综合案例

01_抖音解决方案

标签结构

div ==> ul ==> li * 4

ul 样式

flex 布局
弹性换行 flex-wrap: wrap
主轴对齐方式: space-between
行对齐方式: space-between

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    li {
      list-style: none;
    }

    .box {
      margin: 50px auto;
      width: 1200px;
      height: 418px;
      border: 1px solid #ddd;
      border-radius: 10px;
    }

    .box ul {
      /* 1.flex 布局 */
      display: flex;

      /* 2.弹性盒子换行 */
      flex-wrap: wrap;

      /* 3.调整 主轴对齐方式 */
      justify-content: space-between;

      /* 4.调整 行对齐方式 */
      align-content: space-between;

      padding: 90px 40px 90px 60px;
      height: 418px;
    }

    .box li {
      display: flex;
      width: 500px;
      height: 88px;
      /* background-color: pink; */
    }

    .box .pic {
      margin-right: 15px;
    }

    .box .text h4 {
      line-height: 40px;
      font-size: 20px;
      font-weight: 400;
      color: #333;
    }

    .box .text p {
      font-size: 14px;
      color: #666;
    }
  </style>
</head>

<body>
  <div class="box">
    <ul>
      <li>
        <div class="pic">
          <img src="./images/1.svg" alt="">
        </div>
        <div class="text">
          <h4>一键发布多端</h4>
          <p>发布视频到抖音短视频, 西瓜视频及今日头条</p>
        </div>
      </li>
      <li>
        <div class="pic">
          <img src="./images/2.svg" alt="">
        </div>
        <div class="text">
          <h4>管理视频内容</h4>
          <p>支持修改已发布稿件状态和实时查询视频审核状态</p>
        </div>
      </li>
      <li>
        <div class="pic">
          <img src="./images/3.svg" alt="">
        </div>
        <div class="text">
          <h4>发布携带组件</h4>
          <p>支持分享内容携带小程序, 地理位置信息等组件, 扩展内容及突出地域性</p>
        </div>
      </li>
      <li>
        <div class="pic">
          <img src="./images/4.svg" alt="">
        </div>
        <div class="text">
          <h4>数据评估分析</h4>
          <p>获取视频在对应产品内的数据表现, 获取抖音热点, 及时进行表现评估</p>
        </div>
      </li>
    </ul>
  </div>
</body>

</html>

06_标准流 + 浮动 + Flex 布局 ​

01_标准流 ​

01_标准流 ​

02_浮动 ​

01_浮动 ​

02_清除浮动 ​

03_总结 ​

03_Flex 布局 ​

01_认识 ​

02_组成 ​

03_主轴对齐方式 + 侧轴对齐方式 ​

04_修改主轴方向 ​

05_弹性伸缩比 ​

06_弹性盒子换行 + 行对齐方式 ​

04_综合案例 ​

01_抖音解决方案 ​

06_标准流 + 浮动 + Flex 布局

01_标准流

01_标准流

02_浮动

01_浮动

02_清除浮动

03_总结

03_Flex 布局

01_认识

02_组成

03_主轴对齐方式 + 侧轴对齐方式

04_修改主轴方向

05_弹性伸缩比

06_弹性盒子换行 + 行对齐方式

04_综合案例

01_抖音解决方案