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>
③：主轴（默认在水平方向）
④：侧轴（又叫交叉轴，默认在垂直方向）
相关推荐
Mintopia26 分钟前
像素的进化史诗：计算机图形学与屏幕的千年之恋
前端·javascript·计算机图形学
Mintopia29 分钟前
Three.js 中三角形到四边形的顶点变换：一场几何的华丽变身
前端·javascript·three.js
归于尽43 分钟前
async/await 从入门到精通，解锁异步编程的优雅密码
前端·javascript
陈随易44 分钟前
Kimi k2不行？一个小技巧，大幅提高一次成型的概率
前端·后端·程序员
猩猩程序员1 小时前
Rust 动态类型与类型反射详解
前端
杨进军1 小时前
React 实现节点删除
前端·react.js·前端框架
yanlele1 小时前
【实践篇】【01】我用做了一个插件， 点击复制， 获取当前文章为 Markdown 文档
前端·javascript·浏览器
爱编程的喵1 小时前
React useContext 深度解析：告别组件间通信的噩梦
前端·react.js
望获linux2 小时前
【实时Linux实战系列】多核同步与锁相（Clock Sync）技术
linux·前端·javascript·chrome·操作系统·嵌入式软件·软件
热门推荐
01KGG转MP3工具|非KGM文件|解密音频02集群聊天服务器---MySQL数据库的建立03Coze扣子平台完整体验和实践（附国内和国际版对比）04绿色建筑新态势：楼宇自控助力能效提升，推动成本优化新路径05使用Ruby接入实时行情API教程06扣子（coze）实战|我用扣子搭建了一个自动分析小红薯笔记内容的AI应用|详细步骤拆解07【无标题】08基于odoo17的设计模式详解---单例模式09DeepSeek各版本说明与优缺点分析10Java类变量（静态变量）