CSS有哪些布局方式可以一劳永逸地解决网页排版难题？

本文共计1143个文字，预计阅读时间需要5分钟。

CSS布局方式：1. 单列布局，包括header、content、footer等宽度的单列布局，以及header和footer占满屏幕宽度的布局；2. 双列自适应布局；3. 三列布局，包括圣杯布局和双飞翼布局。

css布局方式：1、单列布局，包括header、content、footer等宽的单列布局和header、footer占满屏幕宽度，content略窄的单列布局；2、两列自适应布局；3、三栏布局，包括圣杯布局、双飞翼布局。

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

一、单列布局

常见的单列布局有两种：

header、content、footer等宽的单列布局

实现：
对header、content、footer都用width或者max-width设置同样的宽度（当屏幕小于设置的宽度时，前者会出现滚动条，后者显示的是屏幕的实际宽度），然后再用margin:0 auto;实现水平居中。
html部分：

css部分：

header、footer占满屏幕宽度，content略窄的单列布局

实现：

对header、footer不设置宽度，块级元素会占满屏幕宽度，对content用width或者max-width设置同样的宽度（区别同上），然后再用margin:0 auto;实现水平居中。