html5css3自适应开发,基于html5+css3的网页自适应布局设计

的位置。

3.3 三列布局

也称为双飞翼布局，中间列自适应宽+左右列固定宽;中间列宽度自适应，放置主体内容，所以需要让中间列在浏览器中优先渲染，因此，在中加入如下代码：

(1)当子元素处于浮动状态时，设置负margin>=子元素宽度时，子元素会叠盖到兄弟元素之上;因此sidebox-left设置为margin-left：-100%，以让其位置出现在main 元素的左边，同理，sidebox-right设置为margin-right：-300px;以让其位置出现在main元素的右边;

(2)main元素添加padding-left和padding-right属性后，根据盒子模型的计算公式，main元素的总宽度会超过100%，因此必须加上box-sizing：border-box;语句，使其变成框架盒子，以保证其总宽度为100%。

完成后，在浏览器中的效果如下图所示：

4 弹性布局

针对越来越多用户用移动端访问网页的情况，W3C提出了一种新的方案：弹性(flex)布局，可以简便、完整、响应式地实现各种页面布局，目前，它已得到大部分浏览器的支持，这意味着，现在就能很安全地使用这种方案，以适应不同分辨率用户的需求。它用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。

如果把ul的width改为100px，则显示效果如图3，每一个li项会自动缩小宽度以适应总宽度;如果把ul的width改为400px，则默认显示效果如图4;如果ul的width保持400px不变，修改justify-content：space-around，则自动把剩余空间平均分配给了每个项目，其显示效果如图5。

除以上属性外，还可以利用flex-direction设置项目的不同排列方向，利用flex-wrap设置项目的换行方式等，因此，弹性(flex)布局可以灵活地应用于不同分辨率的不同元素布局中。需要注意，设为flex布局后，子元素的float、clear和vertical-align属性都会失效。

5 结束语

DIV+CSS3布局模式中，除了上面述及的静态布局和弹性布局，还有响应式(responsive)布局，其原理是通过CSS3中的Media Query(媒介查询)，采用栅格化方式，分别为不同的屏幕分辨率定义布局，适用于一个web设计兼容多个终端的环境。

三者相比之下，弹性(flex)布局能更好地操作和控制内部的子元素，不用关心容器盒子是否有足够的空间;每个子元素可以自动分配到容器的宽高比例;当窗口或容器大小改变时，不用担心子元素会破坏布局;无须修改结构就可以设置其排列方式为行或列，其灵活性更强。随着html5+CSS3新标准的出现及普及，网页自适应布局是目前前端设计技术的关键问题，开发人员必须要在充分掌握基础技术的条件下，进行多编码、多测试、多维护的工作，使开发出来的网页性能、受用户欢迎的程度达到最佳的状态。

参考文献：

[1] 陈承欢.html5+css3网页设计与制作实用教程[M].北京：人民邮电出版社，2018.

[2] 周美玲，陈书理.CSS3和HTML5的优势及其在网页布局中的应用[J].开封大学学报，2017，31.

[3] 岳丹丹.网页浮动布局方式和伸缩盒布局方式的比较研究[J].兴义民族师范学院学报，2016.

[4] 江玉珍.基于终端自适应的网页设计教学拓展[J].计算机时代，2018.

【通联编辑：代影】