基于“浮动+定位”网页布局技术在HTML5+CSS3中的研究

Research on“Floating+Positioning”Web Layout Technology in HTML5+CSS3

目前很多网页布局往往采用单一的浮动布局或定位布局技术。二者各有优缺点,浮动布局可以灵活地实现多种页面布局,但不能精确控制元素的位置,而定位布局使元素出现在指定的精确位置。为实现灵活布局和元素的精确定位,文章提出浮动布局和定位布局相结合技术,从而能更简单、有效地完成复杂页面的布局。本文首先分析了页面布局类型,其次研究了页面浮动和定位布局基本原理,最后通过一个案例阐述了浮动和定位布局相结合应用,为学习网页布局技术提供参考。

At present,many web layouts often use a single floating layout or positioning layout technology.Both have advantages and disadvantage:floating layout can flexibly achieve a variety of page layout,but can not precisely control the position of the element;positioning layout makes the element appear in the specified precise location.In order to realize flexible layout and precise positioning of elements,this paper puts forward the technology of combining floating layout and positioning layout,which can complete complex page layout more simply and effectively.This paper first analyzes the types of page layout,then studies the basic principles of page floating and positioning layout,and finally expounds on the combined application of floating and positioning layout through a case,which provides a reference for learning web layout technology.