【CSS|第1期】网页设计的演变：从表格布局到Grid布局

Commas.KM

于 2024-09-15 08:58:58 发布

阅读量340

点赞数 15

分类专栏： CSS 文章标签： css 前端网页布局表格布局 div+css布局 flex布局 grid布局

本文链接：https://blog.csdn.net/qq_35844043/article/details/142137348

版权

CSS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

日期：2024年9月9日
作者：Commas
签名：(ง •_•)ง 积跬步以致千里,积小流以成江海……
注释：如果您觉在这里插入代码片得有所帮助，帮忙点个赞，也可以关注我，我们一起成长；如果有不对的地方，还望各位大佬不吝赐教，谢谢^ - ^
1.01³⁶⁵ = 37.7834；0.99³⁶⁵ = 0.0255
1.02³⁶⁵ = 1377.4083；0.98³⁶⁵ = 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代码。
性能问题：复杂的表格布局会导致页面加载速度变慢。
灵活性差：表格布局难以实现复杂的响应式设计。

以下例子，我们将通过表格的行和列来划分网页的不同区域：

<!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 用于定义内容的样式和布局。例如：

<!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 布局特别适用于需要响应式设计的场景。例如：

<!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 布局特别适用于需要精确控制行和列的场景。例如：

<!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 属性来精确控制元素在页面中的位置。常用于创建特殊效果，比如：

<div style="position: absolute; bottom: 20px; right: 20px;">客服按钮</div>

它可以创建出固定在页面特定位置的元素，如弹出框、固定导航栏等。但需要注意管理好元素的堆叠顺序和布局结构。

绝对定位的元素会脱离文档流，因此它原来的位置不会被保留，下面的元素会向上移动来填补空位。
绝对定位的元素可以重叠其他元素。
通常，绝对定位的元素需要一个相对定位的父元素作为定位的参考点。
如果没有设置偏移属性（top, right, bottom, left），则绝对定位的元素会位于其父元素的左上角。

2、相对定位布局

相对定位布局是元素相对其原本在文档流中的位置进行偏移。例如：

< 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>） 来实现类似的功能。

<!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 文件，该文件将显示在相应的框架中。

虽然在老式网站系统中曾有应用，但由于不利于搜索引擎优化和页面加载速度慢等缺点，在现代网页设计中使用较少。