8、大型Web应用的布局、容器与CSS实践

大型Web应用的布局、容器与CSS实践

在大型Web应用开发中，布局和容器的设计对于提高代码的可复用性、可维护性和可靠性至关重要。同时，合理运用CSS技巧能确保页面在不同浏览器中呈现一致的效果。

浮动布局的优势

与绝对定位并排排列块级元素相比，浮动布局无需预先知道元素的最大高度，这使其特别适合创建高度可复用的通用布局和容器。当包含浮动元素的块级元素也进行浮动处理时，能确保它们根据浮动内容自动扩展。或者，也可以将浮动元素父元素的 overflow 属性设置为 hidden ， zoom 设置为 1 。

布局与容器的重要性

布局是定义页面总体结构的通用模板，而容器则是可放置在布局中的模块通用分组。它们在大型Web应用中扮演着关键角色，有助于提高组件的复用性、可维护性和可靠性，还能为工程师和设计师提供合作制定标准指南的机会。常见的布局类型包括固定宽度、可变高度和基于网格的布局，不过这些原则也适用于其他类型的布局，如流体布局和自由形式布局。

示例布局

• Results布局 ：适用于包含搜索结果或各种列表的页面。
  • HTML结构 ：

<div id="layres">
   <div class="layreshdr">
      ...