基于HTML5+CSS3的网页布局

摘要：网站是常见的信息传播平台，是通过互联网向人们发布信息和提供网络服务的载体。网站是一组相关网页的集合，除了文字、图像、超链接等HTML元素外，网页布局是网页制作中的核心技术，随着WEB前端开发技术的发展，网页已经从以前普遍使用的表格布局方法过渡到如今的DIV和CSS布局思想，即使用CSS来控制DIV盒子的大小及其在页面中的位置是制作网页时的关键问题。

关键词：Web前端;HTML5;CSS3;盒子模型;网页布局

中图分类号：TP393.09      文献标识码：A

文章编号：1009-3044（2022）14-0049-02

1 网页布局概念

网页布局是指将网页中的所有元素进行排版和定位。在设计与制作网页时，合理的布局可以使页面内容及结构清晰，元素疏密适当，色彩对比分明，让用户拥有良好的页面浏览体验。在CSS3中，使用盒子模型对元素定位，淘汰了传统的采用表格布局的页面排版方法。

2 CSS盒子模型

盒子模型是目前CSS3布局技术所使用的一种思维模型。在盒子模型中，所有的网页元素都可以被看作一个盒子，它们在网页中占据一定的空间，在盒子里面可以放置内容，这些盒子又相互影响，那么通过设置盒子内部的属性和盒子间的位置关系，从而实现整个网页的布局排版。盒子模型通常借助div标签实现网页布局和网页结构。在CSS3中，一个独立的盒子由content（内容）、padding（内边距）、border（边框）和margin（外边距）组成[1]。元素内容（content）通常包含文字、图像、声音、影像、超链接、表格和表单等，这些元素都可以被处理成块级元素（block），即被形象看作为一个个长方形的盒子（div），那么网页元素的布局实质上就是如何在页面中摆放、甚至是嵌套这些大大小小的盒子。使用盒子模型时需要关注盒子的尺寸大小，即盒子的宽度和高度。盒子的宽度除了考虑元素内容的宽度外，还要包含左右外边距、左右内边距以及左右边框的像素，而盒子的高度也是除了元素内容的高度外，还要包含上下外边距、上下内边距以及上下边框的像素。

3 网页布局技术

3.1 标准流布局

网页布局中最基本的布局是标准流或称文档流布局，它使用的是网页元素默认的位置和显示顺序[2]。在HTML中一般使用块元素（div）定义网页布局，而由于块元素是要独立占一行或者多行，在没有为网页元素添加CSS定位或浮动等属性的情况下，这些元素会自然地按照从上到下的顺序依次显示。标准流是默认的布局模式，适用于单列布局的子页面。比如，针对图1所示的页面单列布局架构，实现时的HTML部分的源代码如下。

在HTML代码基础上，CSS代码需要给出每个div盒子里面id选择器的width、height和background-color。通常情况下，页面的整體布局大都采用标准流方式。

3.2 浮动式布局

浮动式网页布局是网页制作中常用的方法。浮动就是对网页元素使用float属性，属性值为left或right，浮动后的元素则脱离文档流，呈现出漂浮状态，直到遇到父元素的包含框或是其他浮动元素拦截为止，可以实现良好的布局效果，从而使网页的布局和结构更加丰富、自由、合理。浮动元素会影响标准流中的网页元素，掌握浮动元素盒子模型的计算方法，根据不同的浮动方案灵活设计HTML结构，在CSS中采用浮动法的块元素将重新设置宽度，否则将按照实际大小呈现在网页上[3]。

浮动属性被频繁地应用在网页设计中，除了常用于图文排版的页面外，更适用于两列或多列布局的网页。两列布局其实与一列布局相似，只不过是页面内容要分为左右两栏。图2给出了一种两列布局示意图，实现时HTML部分源代码如下。

此处的CSS代码除了需要给出每个id选择器的width、height和background-color以外，还需要设置id选择器#leftside和#rightside的浮动属性，即#leftside{float：left;width：30%;}、#leftright{float：right;width：70%}，以便让原本处于标准流的两个盒子浮动，并排显示在同一行，呈现出两栏的页面划分效果。

对于企事业单位的门户网站，特别是电子商务之类的网站，因为页面内容分类众多，通常需要进行左中右等三栏布局的页面效果，而浮动后的盒子都会脱离标准流，并排显示在同一行，从而呈现出三栏的划分效果。图3给出了三列布局架构示意图，实现时HTML部分源代码如下。

与两栏布局相似，此处的CSS代码除了需要给出每个id选择器的width、height和background以外，还需要设置id选择器#leftside（左边栏）、#main（主栏）和#rightside（右边栏）的浮动属性，即#leftside{float：left;width：30%;}、#main{float：left;width：70%;}#leftright{float：left;width：30%}。

浮动是一种比较便利的布局实现方式，无须额外的元素辅助定位，同时兼容性也比较优秀，但存在一定的局限性，无法精确定位元素的位置，因此通常用于实现左右两列宽度固定、中间自适应这种三列布局。采用浮动时需要注意对普通标准流中元素的影响，必要时需要清除（clear）浮动[4]。

3.3 定位式布局

CSS的定位布局可以精确摆放盒子的位置，从而完成比较复杂的网页布局效果。根据定位属性position的属性值来确定具体的定位模式，position的属性值有多个，其中较为常用的是固定定位（fixed）、绝对定位（absolute）和相对定位（relative）三种[3]。

固定定位是相对于浏览器窗口进行的定位的。当元素设置为固定定位（position：fixed）时，会脱离原文档流进行定位，原有的位置会被其他元素占据，而且无论浏览器窗口如何改变，浏览器滚动条如何拖动，固定定位的元素都将显示在浏览器的固定位置，准确位置由左偏移（left）和右偏移（right）设置水平方向，上偏移（top）和下偏移（bottom）设置垂直方向。

采用绝对定位时，首先要找到绝对定位的父元素即参考对象，父元素必须拥有定位属性，如果父元素需要保留在标准流中的位置，一般应设置为relative，当然也需要精确的坐标值。

当页面中元素按照标准流布局，需要对位置进行调整而保留原来的位置时，可以采用相对定位。使用相对定位时，参考点是元素本身在标准流中的位置，坐标值的设置原理与其他定位方式相同。基于定位方式的特性，一般不会单独采用相对定位方式，通常需要结合绝对定位使用，也就是把相对定位的元素作为绝对定位的父元素，这样可以保证子元素与其父元素之间的位置不发生变化[5]。图4给出了一种定位布局示意图，实现时HTML部分源代码如下。

此处，父容器# wrapper设置为相对定位，# wrapper{position： relative; }，两个子元素h2和#face分别设置为绝对定位，h2{position：absolute;left：150px;bottom： 10px; }，#face{position： absolute;left：30px;bottom：-30px; }，如此定位布局后，无论父容器# wrapper如何变动页面位置，h2和#face相对于# wrapper的位置不会受影响。

当然，对结构比较复杂的页面，甚至可以采用标准流、浮动式和定位方式相结合的综合布局模式。图5给出了浮动、相对定位和绝对定位互相搭配的一种布局示意图，实现时HTML部分源代码如下。

此处，父容器# contrainer设置为相对定位，# contrainer { position： relative; width： 260px;height： 80px; background-color： #aaa; }，其子元素#btn设置为绝对定位，并且位于父容器#contrainer的右下角，#btn{position： absolute;height： 20px;width： 100px;right： 5px;bottom： 3px;}，子元素#fang使用了浮動法，以使4个数字按钮显示在同一行中，.fang{float： left;width： 20px;height： 20px;margin-left： 5px;font-size：12px;color： #FFF; background-color： #555;text-align： center;}，这样布局以后，无论父容器# contrainer的位置如何变动，4个数字按钮相对于# contrainer的位置不会受到影响。

4 结束语

页面布局对于改善网站的外观非常重要，是为了使网站页面结构更加清晰、有条理，而对页面进行的排版，达到以最适合用户浏览的形式将文字、图片等页面元素予以展示的效果。相比传统的表格排版布局，DIV和CSS布局技术不仅顺应了技术开发的需求，而且也更加符合Web前端开发标准。

参考文献：

[1] 汪婵婵，徐兴雷.Web前端开发任务驱动式教程：HTML5+CSS3+JavaScript[M].北京：电子工业出版社，2019.

[2] 杨松.网页设计案例教程（HTML5+CSS3+JavaScript）[M].北京：航空工业出版社，2019.

[3] 黑马程序员.网页设计与制作：HTML5+CSS3+JavaScript[M].北京：中国铁道出版社，2018.

[4] 殷正坤，魏红伟，朱希伟.网页设计与制作案例教程：HTML+CSS+JavaScript[M].成都：电子科技大学出版社，2019.

[5] 吕云翔，欧阳植昊，徐硕.HTML5+CSS3+JavaScript网页设计案例开发[M].北京：清华大学出版社，2018.

收稿日期：2022-03-09

基金项目：2019年度陕西省职业技术教育学会基金项目：技能大赛引领高职物联网专业课程体系构建研究（项目编号：SZJYB19-118）

作者简介：李小遐（1968—），女，陕西西安人，教授，硕士，研究方向为软件技术。