HTML和CSS基础（二）

最新推荐文章于 2024-07-25 11:26:35 发布
最新推荐文章于 2024-07-25 11:26:35 发布
阅读量1.3k 收藏 14
点赞数 26
分类专栏： 前端 文章标签： html css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/way311/article/details/139740672
版权

四、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设置高度，根据块级元素的特点，脱离文档流的子元素不能支撑它的高度，它的高度变为零。
这个时候为了不让父元素高度坍塌有以下两个办法：

  1. 使用清除浮动的元素（Clearfix）：
    • 这是一种传统方法，通过在父元素内部的最后一个浮动元素后添加一个具有clear: both;属性的元素来清除浮动。
 <!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>
  1. 使用overflow属性：
    • 给父元素设置overflow属性为hidden或auto，这可以创建包含浮动元素的块级格式化上下文（BFC），防止高度塌陷。
<!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是一种强大的布局工具，可以很容易地实现子元素在父元素中的居中对齐。

<!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布局也是一种非常强大的布局方式，可以轻松实现子元素的居中对齐。

<!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 属性来实现居中对齐。

<!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 属性来实现居中对齐。

<!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 属性也可以实现子元素的居中对齐。

<!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）来设置字体大小。这样，字体大小就可以根据其父元素或根元素的字体大小进行缩放。

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

2.媒体查询（Media Queries）：

使用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（视口高度的百分比）单位来设置字体大小，使字体大小与视口大小成比例。

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

4.CSS Clamp函数：

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

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环境变量）来控制字体大小，然后在媒体查询中调整这些变量的值。

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

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

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

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

老王IT
关注
  • 26
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML和Css的学习
SYX_lh的博客
10-19 3555
学习HTML和Css
网页制作基础学习——HTML+CSS常用代码
热门推荐
北辰的博客
02-01 4万+
HTML（HyperText Markup Language）,即超文本标记语言，是用于描述网页文档的一种描述标记语言。是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。
HTML与CSS基础笔试和期末题库
qq_51066068的博客
07-01 6251
1.使用文本编辑器编辑完HTML后，扩展名可以是__html___或___htm__。 2.表格的标签是____table______，单元格的标签是____td______。 3.在编辑table表格时，合并行使用 __rowspan_____合并列使用_____colspan____。 4.在CSS层叠样式表当中经常用到的三种选择器：___元素选择器___、__类选择器__、__id选择器__。...
CSS基础（超详解）
m0_52896041的博客
11-30 2万+
Css (层叠样式表)是种格式化网页的标准方式， 用于控制设置网页的样式，并且允许CSS样式信息与网页内容(由HTML语言定义)分离的一种技术。
讲解HTML和CSS（超详细）
Jinmuyan_的博客
05-06 1万+
讲解HTML和CSS（超详细）一、初始HTML和CSS1.html的发展历史2.html3.css二、HTML1.基本框架2.HTML5常用的标签和属性三、CSS1.css的使用2.css选择器总结 提示：以下是我的一些经验之谈，下面案例可供参考 一、初始HTML和CSS 1.html的发展历史 HTML 1.0 超文本标记语言(第一版) – 在1993年6月发为互联网工程工作小组(IETF)工作草案发布(并非标准) HTML 2.0 – 1995年11月作为RFC 1866发布，在RFC 2854于2
html+css基础代码
06-16
本资料包“html+css基础代码”显然是为了帮助初学者理解这两门语言的基础知识。 HTML是一种标记语言，它使用一系列预定义的标签来告诉浏览器如何呈现网页内容。例如，`<html>`标签定义整个HTML文档的开始，`<head>`...
html+css基础.md
02-25
HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体...此资源 原创HTML+CSS基础 实战51zxw.net 小清流吖羞羞萌芽之作。
pc网页html css基础
03-10
**CSS基础知识** 1. **选择器**：CSS通过选择器来定位HTML元素，如标签选择器（`p {color: red;}`），类选择器（`.class-name {property: value;}`），ID选择器（`#id-name {property: value;}`）。 2. **属性与值...
html和css的基础测试题
02-09
在这个“html和css的基础测试题”压缩包中，包含的是针对中职学生的HTML与CSS的基础知识测试题目，分为A卷和B卷，旨在检验学习者对这两门技术的基本理解和应用能力。 HTML是一种标记语言，用于定义网页内容的结构，...
基于 HTML+ECharts 实现的大数据可视化平台模板（含源码）
柯晓楠
07-24 3270
大数据的可视化对于企业决策、市场分析和业务洞察至关重要。通过直观的数据展示，团队可以快速理解复杂的数据模式，发现潜在的业务机会。本文将详细介绍如何利用 HTML 和 ECharts 实现一个功能丰富的大数据可视化平台模板。
[HTML]一文掌握
CSDN20221005的博客
07-21 977
场景：在网页的底部导航中通常会用到。语法：dl>dt>dd特点：dd前会默认显示缩进效果注意：dl中只允许包含dt/dd标签dt/dd中可以包含任意内容。
基于 HTML+ECharts 实现的数据可视化大屏案例（含源码）
柯晓楠
07-24 688
数据可视化已成为企业决策和业务分析的重要工具。通过直观、动态的图表展示，数据可视化大屏能够帮助用户快速理解复杂的数据关系，发现潜在的业务趋势。本文将介绍如何利用 HTML 和 ECharts 实现一个功能丰富的数据可视化大屏案例。
html实现酷炫美观的可视化大屏(十种风格示例，附源码)
最新发布
xcLeigh
07-25 1919
html实现酷炫美观的可视化大屏(十种风格示例，附源码)，大屏源码，可视化大屏模板源码，html可视化大屏源码下载，内含十种不同风格的大屏可视化代码，详细的讲解，酷炫的线条，美观的设计，让图文图表结合的更融洽。兼容各种大屏，调整页面到合适的分辨率，F12全屏观看。各种风格都有，代码上手简单，代码独立，可以直接使用。也可直接预览效果。
【HTML — 构建网络】HTML 入门
07-24 1200
如果您查看许多其他站点的代码，您可能会遇到许多奇怪的标记样式，包括不带引号的属性值。在这一点上，你应该了解 HTML 是什么样子的，以及它在基本层面上是如何工作的。在 HTML 中，不需要在 void 元素标记的末尾添加 a，例如： .但是，它也是一种有效的语法，当您希望 HTML 是有效的 XML 时，您可以这样做。现在，您可以在 Web 浏览器中打开此文件，以查看呈现的代码的外观。在本练习中，您可以如前所述在计算机上本地编辑代码，也可以在下面的示例窗口中编辑代码（在本例中，可编辑示例窗口仅表示。
IPython的HTML魔法：%%html_header命令全解析
2401_85762266的博客
07-24 1175
IPython是一个增强的Python交互式解释器，而Jupyter Notebook是一个基于Web的开源项目，允许用户创建和共享包含实时代码、方程、可视化和解释性文本的文档。HTML头部是网页文档的元数据区域，它包含了文档的标题（title）、样式表链接（link）、脚本链接（script）等信息。的使用，可以让您更灵活地定制Notebook的样式和功能，从而提供更加丰富和个性化的文档体验。命令的使用非常简单。你只需要在Notebook的单元格中输入该命令，然后写入你想要添加到头部的HTML代码即可。
HTML 基础知识
07-24 1019
你写的替代文本应该为读者提供足够的信息，以便对图像传达的内容有一个很好的了解。对于我们的Firefox徽标，一个更好的替代品是“Firefox徽标：围绕地球的火焰狐狸”。如果它们如上所示重叠，那么您的 Web 浏览器将尝试对您想说的内容做出最佳猜测，这可能会导致意外结果。正如我们之前所说，它将图像嵌入到我们的页面中，该图像位于它出现的位置。空格（或任何字符）的简单属性值可以保持不加引号的状态，但建议您将所有属性值加引号，因为这可以使代码更加一致和易于理解。创建链接后，单击它以确保它将您发送到您想要的地方。
HTML开发小技巧：根据用户浏览器的分辨率调整控件的大小
ioioppk的博客
07-25 574
在Html页面开发中，我们通常会用Style进行控件的宽度高度进行控件的格式设置，如果直接设置像素的话，无法根据用户的浏览器进行宽高的适配，所以我们要做到根据实际使用的浏览器进行控件大小的自动调整，以下是几种控件自动调整的方式：
HTML（六）——HTML表单和框架
m0_62701594的博客
07-23 814
HTML 表单用于收集用户的输入信息，是一个包含表单元素的区域HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。HTML 表单通常包含各种输入字段、复选框、单选按钮、下拉列表等元素。<form>元素用于创建表单，action属性定义了表单数据提交的目标 URL，method属性定义了提交数据的 HTTP 方法（这里使用的是 "post"）。<label>元素用于为表单元素添加标签，提高可访问性。<input>
HTML5和CSS3基础知识详解
在本文中，我们将对CSS3网页知识进行总结，包括HTML5基础知识、Table属性、表单控件、CSS3基础知识等。 一、HTML5基础知识 在HTML5中，我们可以使用Table标签来创建表格，Table标签有多个属性，包括： * ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值