HTML5前端第六章节

NaZiMeKiY2025-03-30 22:56

一.标准流，浮动，flex布局

1.标准流

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

2.浮动

（1）.作用：

让块元素水平排列

（2）.属性名：

float

（3）.属性值：

left（左对齐），right（右对齐）

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  .test_one {
    width: 300px;
    height: 300px;
    background-color: blueviolet;

    float: left;
  }

  .test_two {
    width: 300px;
    height: 300px;
    background-color: blue;

    /* 建议读者自己试试左右对齐不同的效果 */
    float: right;
  }
</style>
</head>
<body>
  <div class="test_one">div标签</div>
  <div class="test_two">div标签</div>
</body>
</html>

（4）.特点：

①：顶部对齐

②：具备行内块显示模式的特点

③：浮动的盒子会脱离标准流的控制，具体还是要通过案例来理解这一特点

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  /* 第三个特点 */
  /* 优先显示的是浮动元素 */
  .test_one {
    width: 150px;
    height: 150px;
    background-color: green;

    float: left;
  }
  /* 在这个类选择器中没有设置浮动，也就是说使用这个类的标签仍在标准流的控制中 */
  .test_two {
    width: 300px;
    height: 300px;
    background-color: blue;
  }
</style>
</head>
<body>
  <div class="test_one">div标签</div>
  <div class="test_two">div标签</div>
</body>
</html>

（5）.常用的布局模式：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  /* 去除默认样式 */
  * {
    margin: 0;
    padding: 0;
  }

  li {
    list-style: none;
  }

  /* 设置盒子 */
  .product {
    margin: 100px auto;

    width: 1226px;
    height: 628px;
    background-color: blueviolet;
  }

  /* 父级盒子中又分出两个子级盒子 */
  .left {
    width: 234px;
    height: 628px;
    background-color: green;

    float: left;
  }

  .right {
    width: 978px;
    height: 628px;
    background-color: blue;

    float: right;
  }

  .right li {
    width: 234px;
    height: 300px;
    background-color: black;

    margin-right: 14px;
    margin-bottom: 14px;

    float: left;
  }

  /* 如果不设置这一复合选择器，第四个和第八个小盒子会因为右margin被挤出盒子，这也是
  浮动有时会出现的问题 */
  .right li:nth-child(4n) {
    margin-right: 0;
  }
</style>
</head>
<body>
  <div class="product">
    <div class="left"></div>
    <div class="right">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </div>
  </div>
</body>
</html>

（6）.浮动可能脱离标准流，这时我们就需要清除浮动

具体场景：浮动元素脱标，如果父级没有高度，子级就无法撑开父级高度（导致页面布局错乱）

因此我们需要清除浮动，以消除浮动带来的影响

这是设置了高度，所以没有出现浮动脱标现象的案例：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  /* 此时都设置了高度，就不会出现浮动元素脱标的现象 */
  .top {
    margin: 10px auto;
    width: 1200px;
    height: 300px;
    background-color: red;
  }

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

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

    float: left;
  }

  .right {
    width: 950px;
    height: 300px;
    background-color: blue;

    float: right;
  }
</style>
</head>
<body>
  <div class="top">
    <div class="left"></div>
    <div class="right"></div>
  </div>
  <div class="bottom"></div>
</body>
</html>

以下是没有设置高度导致元素脱标的案例：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  .top {
    margin: 10px auto;
    width: 1200px;
    /* height: 300px; 消去了设置的高度 */
    background-color: red;
  }

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

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

    float: left;
  }

  .right {
    width: 950px;
    height: 300px;
    background-color: blue;

    float: right;
  }
</style>
</head>
<body>
  <div class="top">
    <div class="left"></div>
    <div class="right"></div>
  </div>
  <div class="bottom"></div>
</body>
</html>
元素脱标后的解决方法：
①：额外标签法：

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

缺点：会增加额外的标签，页面结构变得更复杂

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  .top {
    margin: 10px auto;
    width: 1200px;
    /* height: 300px; 消去了设置的高度 */
    background-color: red;
  }

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

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

    float: left;
  }

  .right {
    width: 950px;
    height: 300px;
    background-color: blue;

    float: right;
  }

  /* 一般使用额外标签法时都使用clearfix这个类名 */
  .clearfix {
    clear: both;
  }
</style>
</head>
<body>
  <div class="top">
    <div class="left"></div>
    <div class="right"></div>
    <!-- 新添的块级标签 -->
    <div class="clear"></div>
  </div>
  <div class="bottom"></div>
</body>
</html>
②：单伪元素法：

在父级元素中添加一个伪元素

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  .top {
    margin: 10px auto;
    width: 1200px;
    /* height: 300px; 消去了设置的高度 */
    background-color: red;
  }

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

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

    float: left;
  }

  .right {
    width: 950px;
    height: 300px;
    background-color: blue;

    float: right;
  }

  /* 单伪元素法 */
  .clearfix::after {
    /* 必须存在content属性，否则伪元素不生效 */
    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>
③：双伪元素法（最推荐使用的方式）

在父级元素中添加两个伪元素

推荐的原因是：既解决了塌陷问题，又解决了元素脱标的问题

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  .top {
    margin: 10px auto;
    width: 1200px;
    /* height: 300px; 消去了设置的高度 */
    background-color: red;
  }

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

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

    float: left;
  }

  .right {
    width: 950px;
    height: 300px;
    background-color: blue;

    float: right;
  }

  /* 双伪元素法 */
  /* before伪元素是为了解决外边距塌陷问题而存在的 */
  .clearfix::before,
  .clearfix::after {
    /* 必须存在content属性，否则伪元素不生效 */
    content: "";
    display: table;
  }

  /* 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>
④：使用overflow

在父元素中添加CSS属性overflow:hidden

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  .top {
    margin: 10px auto;
    width: 1200px;
    /* height: 300px; 消去了设置的高度 */
    background-color: red;

    /* overflow法 */
    overflow: hidden;
  }

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

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

    float: left;
  }

  .right {
    width: 950px;
    height: 300px;
    background-color: blue;

    float: right;
  }
</style>
</head>
<body>
  <div class="top">
    <div class="left"></div>
    <div class="right"></div>
  </div>
  <div class="bottom"></div>
</body>
</html>

（7）.浮动总结：

①：浮动属性名为float，我们常用的属性值为left（左浮动），right（右浮动）

②：浮动后的盒子根据顶部对齐

③：浮动后的盒子具备行内块的特点

④：父级宽度如果不够，那么浮动的子级会换行

⑤：浮动后的盒子会脱离标准流的控制

⑥：清除浮动有四种方法，分别为：双伪元素法（最推荐），单伪元素法，额外标签法和overflow法

⑦：浮动最初的作用是实现图文混排的效果

3.flex布局

概念：

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

优点：

flex模型不会产生浮动布局中脱离标准流的现象，布局网页更简单，更灵活

设置方式：

给父元素设置display:flex属性，之后子元素会自动挤压或者拉伸

在父级盒子中装入三个子级盒子：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  /* 在父级盒子中装入三个子级盒子 */
  .father {
    height: 300px;
    border: 1px solid #000;
  }

  .father div {
    width: 100px;
    height: 100px;
    background-color: blueviolet;
  }
</style>
</head>
<body>
  <div class="father">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</body>
</html>

使用浮动使得这三个盒子排列在同一行：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  /* 使用浮动使得这三个盒子排列在同一行 */
  .father {
    height: 300px;
    border: 1px solid #000;
  }

  .father div {
    width: 100px;
    height: 100px;
    background-color: blueviolet;

    float: left;
  }
</style>
</head>
<body>
  <div class="father">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</body>
</html>

使用flex实现相同的效果：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  .father {
    /* 将展示方式改为flex */
    display: flex;
    /* 自动分隔开每个盒子之间的距离，将其排列整齐 */
    justify-content: space-between;
    height: 300px;
    border: 1px solid #000;
  }

  .father div {
    width: 100px;
    height: 100px;
    background-color: blueviolet;
  }
</style>
</head>
<body>
  <div class="father">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</body>
</html>

flex相对于浮动的一个很明显的优点，不会脱离标准流的控制：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  .father {
    /* 将展示方式改为flex */
    display: flex;
    /* 自动分隔开每个盒子之间的距离，将其排列整齐 */
    justify-content: space-between;
    /* 如果是使用浮动，那么一旦取消父级盒子的高度就会出现脱标的现象，但是flex却不同，请读者
    自己试试取消父级盒子高度的效果 */
    /* height: 300px; */
    border: 1px solid #000;
  }

  .father div {
    width: 100px;
    height: 100px;
    background-color: blueviolet;
  }
</style>
</head>
<body>
  <div class="father">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</body>
</html>
（1）.flex的各个属性：
①：display:flex：

创建flex容器

②：justify-content：

主轴对齐方式

属性值：flex-start（默认值，弹性盒子从起点开始依次排列），flex-end（弹性盒子从终点开始排列），center（弹性盒子沿主轴居中排列），space-between（弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子之间），space-around（弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧），space-evenly（弹性盒子沿主轴均匀排列，弹性盒子与容器之间的间距相等）

③：align-items：

侧轴对齐方式

④：align-self：

单独控制某个弹性盒子的侧轴对齐方式（设置在弹性盒子中）

属性值：

stretch（弹性盒子沿着侧轴线被拉伸至铺满容器）

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  .father {
    display: flex;
    /* 想要使用stretch属性就必须要侧轴方向没有属性，所以得取消子级盒子的高度 */
    align-items: stretch;

    height: 300px;
    border: 1px solid #000;
  }

  .father div {
    width: 100px;
    /* 如果不取消子级盒子的高度那么stretch属性就不会生效 */
    /* height: 100px; */
    background-color: blueviolet;
  }
</style>
</head>
<body>
  <div class="father">
    <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>
</body>
</html>

center（弹性盒子沿侧轴居中排列），flex-start（弹性盒子从起点开始依次排列），flex-end（弹性盒子从终点开始依次排列）

单独控制某子级盒子的侧轴对齐方式：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  /* 单独控制某子级盒子的侧轴对齐方式 */
  .father {
    display: flex;
    align-items: flex-end;

    height: 300px;
    border: 1px solid #000;
  }

  /* 单独控制第二个子级盒子的侧轴对齐方式为center */
  .father div:nth-child(2) {
    align-self: center;
  }

  .father div {
    width: 100px;
    height: 100px;
    background-color: blueviolet;
  }
</style>
</head>
<body>
  <div class="father">
    <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>
</body>
</html>
⑤：flex-direction：修改主轴方向

属性值：row（水平方向，从左向右，默认为row），column（垂直方向，从上到下），row-reverse（水平方向，从右向左），column-reverse（垂直方向，从下向上）

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  .father {
    display: flex;

    /* 修改主轴方向为垂直方向，此时侧轴方向变为水平方向 */
    flex-direction: column;

    /* 排列方式设置为依照主轴中心排列 */
    justify-content: center;

    /* 依照侧轴中心排列 */
    align-items: center;
    /* 最终的效果为子级元素被置于父级盒子最中央 */

    height: 300px;
    border: 1px solid #000;
  }

  .father div {
    width: 100px;
    height: 100px;
    background-color: blueviolet;
  }
</style>
</head>
<body>
  <div class="father">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</body>
</html>
⑥：flex：

弹性伸缩比

作用：控制弹性盒子的主轴方向的尺寸（按照比例分配父级盒子剩余空间）

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

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  .father {
    display: flex;
    flex-direction: column;

    height: 300px;
    border: 1px solid #000;
  }

  .father div {
    height: 100px;
    background-color: blueviolet;
  }

  .father div:nth-child(1) {
    width: 300px;
  }

  .father div:nth-child(2) {
    flex: 1;
  }

  .father div:nth-child(3) {
    flex: 9;
  }
</style>
</head>
<body>
  <div class="father">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</body>
</html>
⑦：flex-wrap：

弹性盒子换行

作用：因为弹性盒子可以自动挤压或拉伸，所以在默认情况下所有的弹性盒子都在一行显示，因此我们需要使用本属性控制弹性盒子中的子级元素换行

属性值：wrap（换行），nowrap（不换行）

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  .father {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    height: 300px;
    border: 1px solid #000;
  }

  .father div {
    width: 100px;
    height: 100px;
    background-color: blueviolet;
  }
</style>
</head>
<body>
  <div class="father">
    <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>
</body>
</html>
⑧：align-content：

行对齐方式（对单行弹性盒子不会生效）

属性值：和主轴对齐方式的属性值的属性名以及效果都是相同的，flex-start，flex-end，center，space-between，space-around，space-evenly

（2）.flex的组成结构：

①：弹性容器
②：弹性盒子

弹性容器和弹性盒子的压缩与拉伸现象：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  /* 弹性容器 */
  .father {
    display: flex;
    justify-content: space-between;

    height: 300px;
    border: 1px solid #000;
  }

  /* 弹性盒子，沿着主轴的方向排列 */
  .father div {
    width: 100px;
    /* 如果不设置子级的高度，那么flex就会将子级盒子的高度拉长到与父级的高度相等的长度上
    这就是flex的拉伸效果 */
    /* height: 100px; */
    background-color: blueviolet;
  }
</style>
</head>
<body>
  <div class="father">
    <!-- 如果子级盒子过多，为了在同一行中放下所有的盒子，flex就会压缩子级盒子的宽度，
     这就是flex的压缩效果 -->
    <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>
</body>
</html>
③：主轴（默认在水平方向）
④：侧轴（又叫交叉轴，默认在垂直方向）
相关推荐
pink大呲花1 小时前
使用 Axios 进行 API 请求与接口封装：打造高效稳定的前端数据交互
前端·vue.js·交互
samuel9182 小时前
uniapp通过uni.addInterceptor实现路由拦截
前端·javascript·uni-app
泯泷2 小时前
JavaScript随机数生成技术实践 | 为什么Math.random不是安全的随机算法？
前端·javascript·安全
benben0442 小时前
Unity3D仿星露谷物语开发35之锄地动画
前端·游戏·游戏引擎
WebInfra2 小时前
🔥 Midscene 重磅更新：支持 AI 驱动的 Android 自动化
android·前端·测试
八了个戒2 小时前
「数据可视化 D3系列」入门第八章：动画效果详解（让图表动起来）
开发语言·前端·javascript·数据可视化
拉不动的猪3 小时前
无缝适配 PC 和移动端‌我们要注意哪些点呢
前端·javascript·面试
慵懒学者4 小时前
JavaWeb 1.HTML+CSS (黑马JavaWeb课程笔记）
css·笔记·html
酱酱们的每日掘金4 小时前
🔥 4 月精选：AICoding Cursor上新与 MCP 实战揭秘！- AI Coding 周刊第 5 期
前端·ai编程·mcp
天天扭码4 小时前
一分钟解决 | 高频面试算法题——和为 K 的子数组(前缀和)
前端·算法·面试
热门推荐
01YOLOv8改进 | 细节创新篇 | iAFF迭代注意力特征融合助力多目标细节涨点02我决定放弃搞 Java 了03RAG 实践- Ollama+RagFlow 部署本地知识库04YOLOv8改进 | 2023检测头篇 | 利用AFPN改进检测头适配YOLOv8版（全网独家创新）05Scipy||第三章 线性代数 (scipy.linalg)06DeepSeek各版本说明与优缺点分析07本地化部署AI知识库：基于Ollama+DeepSeek+AnythingLLM保姆级教程08汽车上的各种质量：整备质量、总质量、装载质量、簧上质量、簧下质量09苍穹外卖面试总结10【上海大学计算机组成原理实验报告】七、程序转移机制