HTML布局技巧：清除默认样式与页面布局详解

本资源是一份关于HTML整片布局的手册，主要针对静态网页设计和布局技巧进行了深入讲解。文档内容分为两大部分：静态页书写和常用布局方法。 首先，静态页书写部分强调了清除默认样式和设置常用类的重要性。通过两种方式消除CSS的全局影响，一是禁用所有元素的内联样式，二是仅针对`body`元素进行设置，同时确保`img`元素默认显示为块级元素。这样做有利于控制页面的整体视觉风格，并提高代码复用性和结构与样式的分离。 页面布局方面，文档指导如何实现全屏和居中的布局策略。全屏布局使用`width:100%`和`min-width:版心宽度`来适应不同屏幕尺寸，而居中布局则通过设置`width:版心宽度; margin:0 auto;`来使元素水平居中。内部格局划分建议先构建一个包含所有子元素的居中容器，然后根据垂直和水平方向组织子元素，利用`div`进行结构划分，并计算好每个盒子的尺寸。 接下来是常用的布局技术： 1. 垂直居中处理。对于单行文本，可以通过设置`line-height`等于元素高度实现；多行文本则利用`display:table`和`display:table-cell`配合`vertical-align:center`实现；块级元素则采用`position: absolute`，将元素上下居中对齐。 2. 水平居中是通过`text-align: center`处理文本，而对于块级元素，使用`margin: 0 auto`使其左右居中。 3. 元素的横排布局涉及浮动技术。当需要兄弟元素全部水平排列时，需让它们都浮动，并且可能需要调整父元素的`overflow`属性或清除浮动影响，以保持布局的稳定。 这份文档提供了HTML布局的基本指南，对于创建响应式、整洁且易于维护的静态网页设计具有实用价值。无论是初学者还是经验丰富的开发人员，都能从中找到适合自己的布局技巧和实践方法。