岳丹丹

（兴义民族师范学院， 贵州 兴义 562400）

网页浮动布局方式和伸缩盒布局方式的比较研究

岳丹丹

（兴义民族师范学院， 贵州 兴义 562400）

浮动布局方式是当下流行的网页布局技术，伸缩盒布局方式是较新的网页布局技术，对浮动布局方式和伸缩盒布局方式进行了比较研究，用简洁的代码实例阐述了伸缩盒布局的优势所在。

网页布局、浮动布局float、伸缩盒布局Flexbox

Abstract:Float layout is the popular web development technology,the layout of the flexbox is a relatively new web technology.This paper compares float with flexboxlayout in web application research,and some simple example are given toillustrate the advantage offlexboxmethod.

Key words:Web layout；float；flexbox

网络技术的迅速发展，使得网络技术融入到了人们的日常生活、工作和学习中。互联网上各种网站和基于Web的应用大量涌现，这些都需要用网页形式进行呈现。网页布局设计指的是根据网站内容和建站目的等基本要素，运用版面设计原理，将网页上的视觉元素进行合理配置与表现的过程。[1]在网站规划建设中，网页布局设计是至关重要的环节，网页布局设计是否美观、规范、合理，关系到网站能否吸引更多人的眼球，直接反映网站的点击率正是网站的生命所在。所以网页布局越来越受到重视。

一、网页浮动布局方式和伸缩盒布局方式的比较

网页浮动布局是目前常用的网页布局方式，许多主流网站都采用浮动布局的方式实现布局。伸缩盒布局方式是较新的技术，目前主要在移动web中使用。下面对两种布局方式进行比较。

1.浮动布局

浮动（float）是基于CSS的现代Web设计用到的主要功能之一，可以用它来创建多列的网页布局，如无序列表创建导航工具条，不是用table而又可创建类似表格的对其方式等。……