日期：2024年9月9日
作者：Commas
签名：(ง •_•)ง 积跬步以致千里,积小流以成江海......
注释：如果您觉
在这里插入代码片得有所帮助，帮忙点个赞，也可以关注我，我们一起成长；如果有不对的地方，还望各位大佬不吝赐教，谢谢^ - ^1.01^365^ = 37.7834；0.99^365^ = 0.0255
1.02^365^ = 1377.4083；0.98^365^ = 0.0006
文章目录
一、前言
互联网的兴起带来了网页设计的革命，经历了数十年的发展和演变。从最初的简单文本和图像展示 ，到如今的复杂交互和响应式设计，网页设计的技术和方法不断进步。今天，让我们一起回顾网页设计的发展历程，探索从表格布局到CSS、Flex布局，再到Grid布局的演变。
二、网页设计起源
网页设计的起源可以追溯到20世纪90年代初，当时互联网刚刚兴起。最早的网页设计主要是基于HTML（HyperText Markup Language）的简单文本和图像展示 。随着互联网的普及和技术的进步，网页设计逐渐发展成为一个独立的领域，涵盖了视觉设计、用户体验、交互设计等多个方面。
三、CSS的诞生与作用
1、CSS是什么
CSS（Cascading Style Sheets，层叠样式表 ）是一种用于描述 HTML 或 XML（包括如 SVG、MathML 等各种 XML 方言）文档样式的样式表语言，它可以控制网页元素的外观，如字体、颜色、布局 等。CSS 的主要作用是将网页的内容（HTML）与样式分离，使得网页设计更加灵活和易于维护。
2、CSS的提出场景
在早期的网页设计中，HTML 不仅用于结构化内容，还用于定义内容的样式，样式和结构是混合在一起的，这导致了 HTML 代码的冗长、网页的维护和修改非常困难。为了解决这个问题，CSS 被提出，它将网页的内容 和样式分离，大大提高了网页的可维护性和可重用性。
四、布局方式的演变
1、表格布局
在 CSS 广泛应用之前，网页布局主要依赖于HTML表格（<table>）。表格布局的优点是简单易用，但缺点也很明显：
- 可维护性差：表格嵌套复杂，修改布局需要大量修改HTML代码。
- 性能问题：复杂的表格布局会导致页面加载速度变慢。
- 灵活性差：表格布局难以实现复杂的响应式设计。
以下例子，我们将通过表格的行和列来划分网页的不同区域：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格布局</title>
</head>
<body>
<table>
<tr>
<td colspan="2">头部</td>
</tr>
<tr>
<td>侧边栏</td>
<td>主体内容</td>
</tr>
<tr>
<td colspan="2">底部</td>
</tr>
</table>
</body>
</html>2、Div+CSS
随着 CSS 的发展，网页布局逐渐转向了 Div+CSS 模式。这种模式下，HTML 用于定义内容的结构，而 CSS 用于定义内容的样式和布局。例如：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Div+CSS布局</title>
<style>
*{
margin:0;
padding: 0;
}
#header {
height: 100px;
background-color: #ccc;
}
#sidebar {
width: 200px;
float: left;
background-color: #eee;
}
#main-content {
margin-left: 200px;
background-color: #fff;
}
#footer {
height: 50px;
background-color: #ccc;
}
</style>
</head>
<body>
<div id="header">头部</div>
<div id="sidebar">侧边栏</div>
<div id="main-content">主体内容</div>
<div id="footer">底部</div>
</body>
</html>3、Flex布局
Flex 布局（Flexible Box Layout Module）是 CSS3 中引入的一种新的布局模式，旨在提供一种更加灵活和强大的方式来排列和对齐容器中的子元素。Flex 布局特别适用于需要响应式设计的场景。例如：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex布局</title>
<style>
* {
margin: 0;
padding: 0;
}
.flex-container {
display: flex;
justify-content: space-between;
}
.item {
width: 100px;
height: 100px;
background-color: #ccc;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="item">项目 1</div>
<div class="item">项目 2</div>
<div class="item">项目 3</div>
</div>
</body>
</html>4、Grid布局
Grid 布局（CSS Grid Layout）是 CSS3 中引入的另一种强大的二维布局系统，旨在提供一种更加直观和灵活的方式来创建复杂的网页布局。Grid 布局特别适用于需要精确控制行和列的场景。例如：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>grid布局</title>
<style>
* {
margin: 0;
padding: 0;
}
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px 100px;
}
.item1 {
grid-column: 1 / 3;
grid-row: 1;
background-color: #ccc;
}
.item2 {
grid-column: 3;
grid-row: 1 / 3;
background-color: #eee;
}
.item3 {
grid-column: 1;
grid-row: 2;
background-color: #fff;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="item1">项目 1</div>
<div class="item2">项目 2</div>
<div class="item3">项目 3</div>
</div>
</body>
</html>五、特别的布局方式
1、绝对定位布局
绝对定位布局通过设置元素的绝对定位（position: absolute），并利用 top、right、bottom、left 属性来精确控制元素在页面中的位置。常用于创建特殊效果，比如：
html
<div style="position: absolute; bottom: 20px; right: 20px;">客服按钮</div>它可以创建出固定在页面特定位置的元素 ，如弹出框、固定导航栏等。但需要注意管理好元素的堆叠顺序和布局结构。
- 绝对定位的元素会脱离文档流，因此它原来的位置不会被保留，下面的元素会向上移动来填补空位。
- 绝对定位的元素可以重叠其他元素。
- 通常，绝对定位的元素需要一个相对定位的父元素作为定位的参考点。
- 如果没有设置偏移属性（
top,right,bottom,left），则绝对定位的元素会位于其父元素的左上角。
2、相对定位布局
相对定位布局是元素相对其原本在文档流中的位置进行偏移。例如：
html
< img src="image.jpg" alt="图片">
<p style="position: relative; left: 10px;">这是图片的描述文字</p >相对定位是CSS布局中一个非常灵活的工具，在不影响其他元素位置的情况下，对元素进行微调，实现更细致的布局调整。
- 相对定位的元素不会脱离文档流，因此它下面的元素不会上移来填补它的位置。
- 相对定位通常用于微调元素的位置，或者作为绝对定位元素的参考点。
- 如果没有设置偏移属性（
top,right,bottom,left），则相对定位的元素不会发生任何位置上的变化。
3、框架布局（Frame 布局）
在 HTML 中，框架布局（Frame Layout）指的是使用框架集（<frameset>）和框架（<frame>）元素来创建一个包含多个 HTML 文档的页面布局。不过，需要注意的是，HTML 框架（frames）已经不被推荐使用，并且在 HTML5 中已经被移除。现代的网页设计更倾向于使用 CSS框架 或 内联框架（<iframe>） 来实现类似的功能。
html
<!DOCTYPE html>
<html>
<head>
<title>框架布局示例</title>
</head>
<frameset rows="25%, 75%">
<frame src="top.html" noresize="noresize">
<frameset cols="25%, 75%">
<frame src="left.html">
<frame src="right.html">
</frameset>
</frameset>
</html>本示例中，<frameset> 元素定义了页面的框架布局，而 rows 属性定义了框架集的行划分，cols 属性定义了框架集的列划分。
<frame src="top.html" noresize="noresize">：定义了一个框架，其内容来自 "top.html" 文件，且用户不能调整框架的大小。<frameset cols="25%, 75%">：在主框架集内部定义了一个新的框架集，它将剩余空间分为两列，比例为25%和75%。
每个<frame>元素都指向一个HTML文件，该文件将显示在相应的框架中。
虽然在老式网站系统中曾有应用，但由于不利于搜索引擎优化和页面加载速度慢等缺点，在现代网页设计中使用较少。
六、标准化和模块化
1、标准化
网页设计的标准化主要体现在 HTML、CSS 和 JavaScript 等技术的规范和标准上。W3C（World Wide Web Consortium）是制定这些标准的主要组织。标准化的好处包括：
- 兼容性：不同浏览器和设备之间的兼容性更好。
- 可维护性：代码更加规范，易于维护和更新。
2、模块化
模块化是指将网页设计和开发过程中的各个部分分解成独立的模块，每个模块负责特定的功能或样式。模块化的优点包括：
- 可重用性：模块可以在不同的项目中重复使用，减少开发时间和成本。
- 可维护性：模块化的代码结构清晰，易于维护和更新。
- 团队协作：模块化使得团队成员可以并行工作，提高开发效率。
七、结语
网页设计从最初的 表格布局 发展到如今的 Flex布局 和 Grid布局 ，经历了不断的演变和进步。CSS的出现使得网页设计更加灵活和易于维护，而标准化和模块化则进一步提高了网页设计的效率和质量。
参考文章：
版权声明：本文为博主原创文章，如需转载，请给出：
原文链接：https://blog.csdn.net/qq_35844043/article/details/142137348