HTML和CSS基础（二）

四、HTML布局

4.1文档流

HTML文档流（Document Flow）是网页布局的基础，它决定了元素如何在页面上排列。文档流可以分为两大类：正常流（Normal Flow）和脱离正常流（OutOfFlow）。下面详细介绍这两大类以及它们的子分类：

1. 正常流（Normal Flow）

正常流是文档流的默认布局方式，元素按照它们在HTML文档中的顺序排列。正常流可以分为以下子分类：

块级元素（Block-level elements）：
- 总是开始于新行，并且其宽度默认填满父元素的宽度（除非指定宽度）。
- 高度如果不设置是默认由子元素的高度决定的，但是这种情况是子元素是脱离正常流。
- 例子： <div>, <p>, <h1> 到 <h6>, <hr>, <ul>, <ol>, <li> 等。
内联元素（Inline elements）：
- 不会开始新行，而是在当前行上水平排列，其宽度根据内容自动调整。
- 例子： <span>, <a>, <strong>, <em>, <img> 等。
内联块级元素（Inline-block elements）：
- 表现类似于内联元素，但是可以设置宽度和高度。
- 例子：当display属性设置为inline-block时，如 <div style="display: inline-block;">。

2. 脱离正常流（OutOfFlow）

脱离正常流的元素不再遵循正常文档流的布局规则，它们的位置和尺寸可以通过其他CSS属性如float, position等来控制。脱离正常流的布局方式包括：

浮动元素（Floats）：
- 通过float属性（如float: left;或float: right;）使元素脱离文档流，并向左或向右浮动。
- 浮动元素仍然保留在文本流中，这意味着文本和其他内联元素可以环绕它们。
绝对定位元素（Absolutely positioned elements）：
- 使用position: absolute;或position: fixed;属性，元素的位置相对于其最近的已定位（非 static）祖先元素或- - 视口来定位。
- 绝对定位的元素完全脱离文档流，不占据空间，因此不会影响其他元素的布局。
相对定位元素（Relatively positioned elements）
- 使用position: relative;属性，元素相对于其正常位置进行偏移，但保持在文档流中。
- 相对定位的元素仍然占据原来的空间，影响其他元素的布局。
粘性定位元素（Sticky positioned elements）：
- 使用position: sticky;属性，元素在跨越特定阈值前表现得像相对定位，之后表现得像固定定位。
- 粘性定位结合了相对定位和固定定位的特点。
表格布局元素（Table elements）：
- 表元素（如<table>, <tr>, <td>等）使用表格模型布局，它们在文档流中表现为块级元素，但内部使用表格布局规则。

4.2float多栏布局

float和clear属性是CSS中用于控制布局的重要工具，它们允许开发者创建多列布局和处理元素的浮动。以下是float和clear属性的工作原理：

float属性

脱离文档流：
- 当元素应用了float属性（如float: left;或float: right;），它将脱离正常的文档流，并沿着其指定的方向（左或右）浮动。
文本环绕：
- 浮动元素周围的内联元素（如文本）会尝试环绕该浮动元素，填充其旁边的空间。
元素对齐：
- 浮动元素可以移动到其包含块的左边缘或右边缘，直到它碰到另一个浮动元素或包含块的边缘。
宽度调整：
- 浮动元素的宽度可以被指定，但它会尽可能地收缩以适应内容，除非指定了宽度。
清除浮动：
- 浮动元素可能会导致其他元素（尤其是块级元素）不能正常显示在其下方，因此需要使用clear属性来处理。

clear属性

清除浮动：
- clear属性用于阻止元素旁边的浮动，确保元素在浮动元素下面开始，而不是旁边。
可选值：
- clear属性可以设置为left、right、both或none：
- left：清除左侧的浮动。
- right：清除右侧的浮动。
- both：清除左右两侧的所有浮动。
- none：不清除任何浮动（默认值）。
防止高度塌陷：
- 在包含浮动元素的块级元素中使用clear，可以防止父元素的高度塌陷，确保父元素能够包含其浮动子元素。
创建新行：
- 应用了clear属性的元素会创建新的文本流行，即它下方不会有其他浮动元素。
结合使用：
- 通常在包含浮动元素的容器之后使用一个具有clear: both;的空元素或伪元素（例如::after），以确保容器高度正确。

float创建多栏布局方法

在使用float做多栏布局时，因为布局的子元素div脱离了文档流，如果不给父元素div设置高度，根据块级元素的特点，脱离文档流的子元素不能支撑它的高度，它的高度变为零。

这个时候为了不让父元素高度坍塌有以下两个办法：

使用清除浮动的元素（Clearfix）：
- 这是一种传统方法，通过在父元素内部的最后一个浮动元素后添加一个具有clear: both;属性的元素来清除浮动。

html 复制代码

 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>多栏布局示例</title>
  <style>
    .container {
      border: 1px solid black;
      background: green;
    }
    .container2 {
      height: 100px;
      border: 1px solid black;
      background: orange;
    }

    .column {
      float: left;
      /* 浮动到左侧 */
    }

    .left-column {
      width: 30%;
      /* 第一列宽度 */
      background-color: red;
    }

    .middle-column {
      width: 40%;
      /* 第二列宽度 */
      background-color: yellow;
    }

    .right-column {
      width: 30%;
      /* 第三列宽度 */
      background-color: blue;
    }
    .clear-float {
      display: block;
      clear: both;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="column left-column">
      我是左边栏
    </div>
    <div class="column middle-column">
      我是中间栏

    </div>
    <div class="column right-column">
      我是右边栏我是右边栏我是右边栏我是右边栏我是右边栏我是右边栏我是右边栏我是右边栏我是右边栏我是右边栏我是右边栏我是右边栏我是右边栏我是右边栏我是右边栏我是右边栏我是右边栏我是右边栏
    </div>
    <div class="clear-float"></div>
  </div>
  <div class="container2"></div>
</body>
</html>

使用overflow属性：
- 给父元素设置overflow属性为hidden或auto，这可以创建包含浮动元素的块级格式化上下文（BFC），防止高度塌陷。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>多栏布局示例</title>
  <style>
    .container {
      border: 1px solid black;
      background: green;
      /* 清除浮动 */
      overflow:auto;
    }
    .container2 {
      height: 100px;
      border: 1px solid black;
      background: orange;
    }

    .column {
      float: left;
      /* 浮动到左侧 */
    }

    .left-column {
      width: 30%;
      /* 第一列宽度 */
      background-color: red;
    }

    .middle-column {
      width: 40%;
      /* 第二列宽度 */
      background-color: yellow;
    }

    .right-column {
      width: 30%;
      /* 第三列宽度 */
      background-color: blue;
    }

  </style>
</head>
<body>
  <div class="container">
    <div class="column left-column">
      我是左边栏
    </div>
    <div class="column middle-column">
      我是中间栏
    </div>
    <div class="column right-column">
      我是右边栏我是右边栏我是右边栏我是右边栏我是右边栏我是右边栏我是右边栏我是右边栏我是右边栏我是右边栏我是右边栏我是右边栏我是右边栏我是右边栏我是右边栏我是右边栏我是右边栏我是右边栏
    </div>

  </div>
  <div class="container2"></div>
</body>
</html>

说明： 在HTML4的时代还没有flex布局，那时的网站通常用float来做多栏布局。

4.3flex布局

Flex布局，全称为Flexible Box Layout，是一种用于网页布局的CSS3规范，提供了一种更加高效和灵活的方式来处理一维布局模型（水平或垂直）。Flex布局可以轻松地分配空间、对齐和排列容器内的元素，即使它们的大小未知或是动态变化的。

Flex布局的关键概念：

1. 容器和项目：

使用display: flex;或display: inline-flex;属性将一个容器定义为Flex容器，其直接子元素成为Flex项目。

2.主轴和交叉轴：

Flex容器有两个轴：主轴（main axis）和交叉轴（cross axis）。主轴的默认方向是行（row），可以水平或垂直排列项目。交叉轴垂直于主轴。

3.flex-direction：

用于设置主轴的方向，可以是row、row-reverse、column、column-reverse。

4.justify-content：

用于沿主轴对齐项目，可选值包括flex-start、flex-end、center、space-between、space-around、space-evenly。

5.align-items：

用于在交叉轴上对齐项目，可选值包括flex-start、flex-end、center、baseline、stretch。

6.align-content：

用于在交叉轴上对多行项目进行对齐，当项目数量超过一行时使用，可选值类似于justify-content。

7.flex-grow：

定义项目放大比例，当容器有多余空间时，项目可以扩展。

8.flex-shrink：

定义项目缩小比例，当容器空间不足时，项目可以缩小。

9.flex-basis：

定义项目在主轴上的初始大小。

9. flex：

flex属性是flex-grow、flex-shrink、flex-basis的简写，默认值为0 1 auto。

flex布局在大神阮一峰的博客中图文并茂图文并茂的细致讲解，各位可以移步去学习。

4.4元素居中对齐

在HTML布局中，让子元素在父元素中上下左右居中对齐是一个常见需求。可以使用多种方法来实现这一目标，以下是几种常见的方式：

1. 使用Flexbox

Flexbox是一种强大的布局工具，可以很容易地实现子元素在父元素中的居中对齐。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .parent {
      display: flex;
      justify-content: center; /* 水平居中 */
      align-items: center; /* 垂直居中 */
      height: 200px;
      border: 1px solid black;
    }
    .child {
      width: 100px;
      height: 100px;
      background-color: lightblue;
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child"></div>
  </div>
</body>
</html>

2. 使用Grid布局

CSS Grid布局也是一种非常强大的布局方式，可以轻松实现子元素的居中对齐。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .parent {
      display: grid;
      place-items: center; /* 同时水平和垂直居中 */
      height: 200px;
      border: 1px solid black;
    }
    .child {
      width: 100px;
      height: 100px;
      background-color: lightgreen;
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child"></div>
  </div>
</body>
</html>

3. 使用定位（Positioning）

可以使用 position 属性结合 top, right, bottom, left 和 transform 属性来实现居中对齐。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .parent {
      position: relative;
      height: 200px;
      border: 1px solid black;
    }
    .child {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100px;
      height: 100px;
      background-color: lightcoral;
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child"></div>
  </div>
</body>
</html>

4. 使用表格布局（Table Layout）

可以使用 CSS 的 display: table 和 display: table-cell 属性来实现居中对齐。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .parent {
      display: table;
      height: 200px;
      width: 200px;
      border: 1px solid black;
    }
    .child {
      display: table-cell;
      vertical-align: middle; /* 垂直居中 */
      text-align: center; /* 水平居中 */
      width: 100px;
      height: 100px;
      background-color: lightseagreen;
      margin: auto;
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child">Centered</div>
  </div>
</body>
</html>

5. 使用行内块元素（Inline-block）

使用 text-align 和 vertical-align 属性也可以实现子元素的居中对齐。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .parent {
      text-align: center; /* 水平居中 */
      height: 200px;
      border: 1px solid black;
      display: table-cell;
      vertical-align: middle; /* 垂直居中 */
    }
    .child {
      display: inline-block;
      width: 100px;
      height: 100px;
      background-color: lightgoldenrodyellow;
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child"></div>
  </div>
</body>
</html>

五、响应式设计

在HTML5中，控制字体大小随屏幕变化而变动，主要是通过CSS实现响应式设计。以下是一些常用的方法：

1.使用相对单位：

使用相对单位（如em、rem、%）而不是绝对单位（如px）来设置字体大小。这样，字体大小就可以根据其父元素或根元素的字体大小进行缩放。

html 复制代码

body {
  font-size: 100%; /* 相对于根元素的字体大小 */
}
h1 {
  font-size: 2rem; /* 相对于body元素的字体大小 */
}

2.媒体查询（Media Queries）：

使用CSS媒体查询根据不同的屏幕尺寸或设备特性应用不同的样式规则。

css 复制代码

/* 基础样式 */
body {
  font-size: 16px;
}

/* 当屏幕宽度大于600px时 */
@media (min-width: 600px) {
  body {
    font-size: 18px;
  }
}

/* 当屏幕宽度大于900px时 */
@media (min-width: 900px) {
  body {
    font-size: 20px;
  }
}

3.Viewport单位：

使用vw（视口宽度的百分比）或vh（视口高度的百分比）单位来设置字体大小，使字体大小与视口大小成比例。

css 复制代码

body {
  font-size: 2vw; /* 视口宽度的2% */
}

4.CSS Clamp函数：

clamp()函数可以根据视口大小在指定的范围内调整字体大小，它接受三个参数：最小值、首选值和最大值。

css 复制代码

body {
  font-size: clamp(1rem, 2vw, 2rem);
}
响应式字体大小的JavaScript解决方案：
使用JavaScript根据屏幕宽度动态调整字体大小。

function responsiveFont() {
  const minSize = 12; // 最小字体大小
  const maxSize = 24; // 最大字体大小
  const currentSize = Math.max(minSize, Math.min(window.innerWidth / 100, maxSize)); // 根据屏幕宽度计算字体大小
  document.body.style.fontSize = `${currentSize}px`;
}

// 初始化响应式字体大小
responsiveFont();
// 监听窗口大小变化
window.addEventListener('resize', responsiveFont);

5.使用CSS环境变量：

使用CSS自定义属性（CSS环境变量）来控制字体大小，然后在媒体查询中调整这些变量的值。

css 复制代码

:root {
  --font-size: 16px;
}

body {
  font-size: var(--font-size);
}

@media (min-width: 600px) {
  :root {
    --font-size: 18px;
  }
}

这些方法可以单独使用，也可以组合使用，以实现更精细的控制。在设计响应式网页时，目标是确保在不同设备和屏幕尺寸上都能提供良好的可读性和用户体验。