HTML5前端第六章节

发布于：2025-03-30 ⋅ 阅读:(21) ⋅ 点赞:(0)

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

1.标准流

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

2.浮动

（1）.作用：

让块元素水平排列

（2）.属性名：

float

（3）.属性值：

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

<!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）.特点：

①：顶部对齐

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

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

<!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）.常用的布局模式：

<!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）.浮动可能脱离标准流，这时我们就需要清除浮动

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

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

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

<!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>

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

<!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

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

<!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>
②：单伪元素法：

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

<!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>
③：双伪元素法（最推荐使用的方式）

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

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

<!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

<!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属性，之后子元素会自动挤压或者拉伸

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

<!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>

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

<!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实现相同的效果：

<!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相对于浮动的一个很明显的优点，不会脱离标准流的控制：

<!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（弹性盒子沿着侧轴线被拉伸至铺满容器）

<!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（弹性盒子从终点开始依次排列）

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

<!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（垂直方向，从下向上）

<!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：

弹性伸缩比

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

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

<!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（不换行）

<!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的组成结构：

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

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

<!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>
③：主轴（默认在水平方向）
④：侧轴（又叫交叉轴，默认在垂直方向）

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布