浅谈CSS网页的几种布局

认识布局：

以最适合浏览的方式将图片和文字排版放在页面不同的位置；布局模式有多种，不同的制作者会有不同的布局设计。

为什么要学习网页布局？只因制作一个网页的基础。

布局方式：

| 行布局
|
| 多列布局
|
| 混合布局
|
| 圣杯布局
|
| 双飞翼布局
|

*：学习之前需要掌握以下基础

| HTML和CSS基础（不熟练建议大家返回继续看读写）
|
| 会使用DIV+CSS进行排版 |
| 属性float属性与position属性
|

行布局：

基础的行布局

行布局自适应

行布局自适应限制最大宽度

行布局垂直水平居中

行布局固定宽度

行布局某部位自适应

行布局导航随屏幕滚动

多列布局：

两列布局固定

两列布局自适应

三列布局固定

三列布局自适应

混合布局：

混合布局固定

混合布局自适应

圣杯布局：

**定义：**圣杯布局是有国外Kevin Cornell提供的一个布局模型概念，在国内由淘宝UED的工程师传播开来，经改良后也被称为双飞翼布局；

**布局要求：**三列布局，中间宽度自适应，两边定宽；中间栏要在浏览器中优先展示渲染；允许任意列的高度最高；用最简单的css,最少的HACK语句

双飞翼布局：

**定义：**经淘宝UED的工程师针对圣杯布局改良后得出双飞翼布局；去掉相对布局只需浮动和负边距；

**布局特色：**兼容所有的浏览器（IE6+现在浏览器）的终结布局方案，目的都是左右两栏固定宽度，中间部分自适应。

专门建立的学习Q-q-u-n ⑦⑧④-⑦⑧③-零①② 分享学习方法和需要注意的小细节，互相交流学习，不停更新最新的教程和学习技巧（网页制作，网站开发，web开发，从0基础开始的的HTML+CSS+JavaScript。jQuery，Ajax，node，angular框架等到移动端HTML5的项目实战【视频＋工具＋系统路线图】全栈工程师学习路线以及规划都有整理，分享给小伙伴）点：学习前端，我们是认真的