对同一种网页布局以不同CSS技术实现的实例探讨

摘 要：本文通过使用两种主要的CSS布局技术实现一种常规网页的布局，探讨了这两种布局技术在实际开发中的应用情况，以供参考。

关键词：网页布局;float;flex

中图分类号：TP393.09 文献标识码：A DOI：10.3969/j.issn.1003-6970.2021.03.014

本文著录格式：吴瑕.对同一种网页布局以不同CSS技术实现的实例探讨[J].软件，2021，42（03）：049-051+057

Discussion on the Realization of the Same Webpage Layout with Different CSS Technologies

WU Xia

（Sichuan Vocational and Technical College Department of Computer Science， Suining  Sichuan  629000）

【Abstract】：This article uses two main CSS layout techniques to achieve a regular web page layout， the application of these two layout technologies in practical development is discussed， for reference.

【Key words】：web layout;float;flex

0 引言

随着Web前端技术的发展，网页布局结构可实现千变万化。一个良好的网页布局，可以有效提升用户浏览的舒适度，增强用户体验。要实现网页布局可以使用到的CSS技术有多种，一般有浮动定位、绝对定位和相对定位，以及Flex弹性布局[1]。其中最流行的是浮动定位和弹性布局。为了探讨这两种重要的布局技术，下面用这两种技术实现一种常规网页的布局。

1 网页布局实例

1.1 HTML部分

网页布局中有一种很常规的页面布局结构，顶部是标题栏，中间有三栏：左边边栏、内容、右边边栏，底部有腳注栏。布局结构如图1所示。

要实现此网页布局需先编写这个页面的HTML部分，再通过CSS布局技术实现。该布局页面的HTML代码如下：

1.2 外层容器布局

通常对整个页面来说，最外层容器的布局主要有固定布局和液态布局两种。所谓固定布局，就是让最外层的容器固定列宽，页面内容的宽度不会根据浏览器的大小而变化。如果以固定列宽的方式，对外层容器container设置，CSS代码如下[2]：

.container {

width： 1020px;/*固定外层容器（页面内容）宽度为1020px*/

margin： 0 auto; /*设置居中*/

}

液态布局是指最外层的容器列宽以百分比形式指定，页面内容显示的宽度根据浏览器的宽度自动调整。如果……