对同一种网页布局以不同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; /*设置居中*/

}

液态布局是指最外层的容器列宽以百分比形式指定，页面内容显示的宽度根据浏览器的宽度自动调整。如果以液态方式布局，对container设置CSS代码如下：

.container {

width： 80%;/*设置外层容器（页面内容）的宽度始终占浏览器的80%*/

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

max-width： 1020px; /*最大宽度，防止布局在大型显示器上过宽*/

min-width： 480px; /*最小宽度，防止布局过窄*/

}

这里说明一下，液态布局设置完成以后，当调整浏览器宽度，可以看到页面宽度始终保持浏览器的80%，当然，超过最大和最小设置宽度时，将按设置的最大和最小宽度显示。设计者可根据具体情况选择采用哪种方式设置外层container。

1.3浮动定位float

在CSS中，有三种基本的定位可以使用：浮动定位（float：left/right）、绝对定位（position：absolute）、相对定位（position：relative）。

在实际开发中，浮动定位的使用要占大多数，因为其排版简单，方便灵活，易于扩展。外层容器container设置好以后，通常使用浮动定位布局内部元素。绝对和相对定位是在浮动定位之后对一些局部元素定位的补充。

如果设置对象为float： left，对象将向左浮动，之后的内容流到当前对象的右侧;设置对象为float：right，对象将向右浮动，之后的内容流向其左侧。根据这个特点，采用浮动定位实现如图1布局结构。CSS代码如下[3]：

header{

background： #ADB96E;

height： 30px;/*设置标题栏背景颜色和高度*/

}

.sidebar1 {

width： 20%;/*设置左边边栏的宽度始终占container的20%（固定布局也可以精确设置为像素值）*/

height： 500px;/*因为没有填充具体内容只做布局测试，所以高度暂定为500px，实际开发中高度一般由具体内容决定。*/

background： #EADCAE;

float：left/*设置左边边栏定位方式为左浮动*/

}

article {

width： 60%;/*设置内容栏的宽度始终占container的60%（固定布局也可以精确设置为像素值）*/

height： 510px;

background-color： #99CC33;

float：left; /*设置内容栏定位方式为左浮动*/

}

.sidebar2 {

width： 20%;/*设置右边边栏的宽度始终占container的20%（固定布局也可以精确设置为像素值）*/

height：500px;

background： #EADCAE;

float：right /*设置右边边栏定位方式为右浮动（中间三栏的总宽度刚刚等于container的宽度，也可以设置为左浮动，效果一样）*/

}

footer {

clear：both; /*脚注栏要不受前面浮动影响，设置清除浮动*/

background： #CCC49F;

height： 20px;

}

这里说明一下，对于液态布局，因为整个页面宽度是变化的，所以内部子元素宽度只能采用百分比形式设置;对于固定布局，可以利用盒模型精确设置内部每个子元素的宽度，也可以采用百分比形式。

1.4 flex布局

flex布局又称为“弹性布局”，是W3C推出的一种较新的、灵活的布局方式，现已得到所有主流浏览器的支持。当页面需要适应不同屏幕尺寸及设备类型时该布局方式可以确保元素在恰当的位置。

使用该布局需要理解几个关键点：（1）在flex布局中，用于包含内容的组件称为容器（container），容器内部的组件称为项目（item）。容器允许包含嵌套。（2）通过给容器设置 display属性为 flex，將其定义为弹性容器。在弹性容器中的项目，其排列方向由主轴的排列方向来决定。（3）默认情况水平方向从左往右为主轴，用户也可以通过样式属性flex-direction：column将主轴与交叉轴（垂直方向自上而下）互换。（4）flex属性可以分为容器属性和项目属性。容器属性用于规定容器的布局方式，项目属性用于设置容器内部项目的尺寸。

弹性布局的使用原则要遵循几点：（1）给父容器添加属性display： flex或display：inline-flex，即可让父容器的内容弹性布局显示，不再遵循默认文档流的显示方式。（2）容器添加弹性布局后，仅仅是容器内容（即项目）采用弹性布局，而容器自身在文档流中的定位方式依然遵循默认文档流。（3）容器设置为display： flex弹性布局后，显示为块级元素;容器设置为display：inline-flex弹性布局后，显示为行级元素。（4）容器设为 flex布局后，其子元素的float、clear和vertical-align属性将失效，而position属性，依然生效。

弄清楚flex布局的基本原理之后，要实现如图1的结构，就比较容易了。因为外层容器container主轴是垂直方向，边栏及内容的主轴是水平方向，所以需要考虑用到容器嵌套，于是修改HTML将中间三栏放在一个content容器内，代码如下[4]：

边栏

内容

边栏

在CSS中设置布局，首先将外层容器container的display属性设置为flex，flex-direction属性设置为column，可以保证container的内部项目垂直居中。内嵌容器content也设置为弹性布局，并设置内部各项目尺寸的比例。CSS代码如下：

.container{

display：flex;/*设置container为弹性布局*/

flex-direction：column; /*设置container的主轴方向为垂直方向*/

width：80%;

margin：0 auto;

max-width：1020px;

min-width：480px;

}

header{

background：#adb96e;

height：30px;

}

#content{

display：flex;/*设置内嵌容器content为弹性布局，默认主轴方向是水平方向*/

}

.sidebar1{

flex：1;/*该属性简写设置，可理解为设置左边边栏占content容器的比例*/

height：500px;

background：#eadcae;}

article{

flex：3; /*设置内容栏占content容器的比例*/

height：520px;

background-color：#99cc33;

}

.sidebar2{

flex：1; /*设置右边边栏占content容器的比例*/

height：500px;

background：#eadcae;

}

footer{

background：#ccc49e;

height：20px;

}

这里说明一下，采用flex弹性布局，外层container可以是固定布局也可以是液态布局。通常使用弹性布局就是为了适应不同浏览器宽度的需求，所以建议采用液态布局。

2 结语

以上通过探讨两种主要的CSS布局技术，实现了一种常规网页的布局。由于网页布局技术很多，方法灵活，具体使用什么方式，可以根据具体的设计情况。比如想做一个垂直排列且水平方向居中的布局，现成的flex布局就可以又快又好的实现，所以flex特别适用于微信小程序开发;使用浮动定位可以非常方便的增加模块，或交换左右列的顺序，所以在网页布局中非常常见;绝对定位和相对定位常常在浮动定位之后作为补充，比如用在整个布局结束以后对标题栏里面的某些子元素的精确定位。因此在实战开发中，有时候同一个页面会使用到多种技术，开发者不要被技术本身限制，而应该根据具体需要，合理并高效的利用各种CSS布局技术。

参考文献

[1] 周文洁.微信小程序开发零基础入门[M].北京：清华大学出版社，2019.

[2] 张树明.Web前端设计基础[M].北京：清华大学出版社，2020.

[3] 薛玉倩.基于HTML5的Web前端设计与开发[J].内蒙古科技与经济，2019（17）：68-69.

[4] 孟秀霞.Web UI技术的研究与应用[D].北京：中国地质大学（北京），2019.