html经典布局及其实现

# 多栏布局

- 什么是自适应？

    让同一个页面自动适应不同大小的设备，解决为不同设备提供不同版本的页面问题

- 自适应布局

    大部分自适应布局指的是宽度自适应布局，解决的是在不同大小的设备上呈现相同网页的问题

    页面元素位置发生变化，元素不随窗口大小的调整而变化

## 1、两列自适应布局——左侧宽度固定，右侧宽度自适应

- 1）左右两个盒子，左侧宽度固定，右侧宽度设置100%

- 2）左侧盒子设置绝对定位position: absolute;

- 3）右侧盒子中添加子盒，并为子盒设置padding-left属性，值为左侧盒子的宽度

 

## 左右两列宽度固定，中间部分自适应的三列布局

## 2、圣杯布局

- 1）HTML结构中——先主体内容后侧边栏

- 2）两侧宽度固定，中间宽度设置100%

- 3）主体内容和左右两侧分别加浮动 float:left;

- 4) 将左侧盒子拉到最左边（margin-left: -100%），将右侧盒子拉到右边（margin-left: -右侧盒的宽度）

- 5）通过左中右盒子的父盒将中间内容露出来（在父盒上设置padding: 0 右侧盒子宽度 0 左侧盒子宽度）

- 6）分别还原左侧盒和右侧盒（为左侧盒和右侧盒设置position:relative; 左侧盒设置left属性，值为-左侧盒宽度；右侧盒设置right:-右侧盒的宽度）

## 3、双飞翼布局

- 1）HT