css布局
按照是否相应浏览器宽度变化划分：
固定宽度布局：body的width是一个固定值，当浏览器的窗口缩小时，底部出现滚动条。无论几栏布局，各栏的width都是事先设为定值。比较复杂的网站一般采用这种布局，例如：京东
弹性（flex）布局：body的width不是一个固定的值，当浏览器窗口缩小时，浏览器里的内容宽度也相应收缩。网页为多栏布局时，即可都为弹性布局，也可部分固定宽度，部分弹性布局。一般用于简单网站，例如：谷歌
响应式布局：设计师事先设计多种方案的布局，前段工程师根据媒体查询，获取当前浏览器的宽度，呈现不同的布局。一般用于多终端（PC、PAD、PHONE等）
按照网页整体内容布局划分
- 单栏布局
单栏布局，是指网页内容呈中心展示。如下图所示。
注：在这里，设置width为固定宽度布局；设置max-width为弹性布局
一栏布局
一栏布局（通栏） - 两栏布局
浮动元素 + 普通元素margin
两栏布局（一栏弹性）
两栏布局（两栏都弹性） -
三栏布局
两侧两列固定宽度，中间列自适应宽度
- 普通三栏布局
html设计：
<div id="content">
<div class="menu">aside</div>
<div class="aside">aside</div>
<div class="main">content</div>
</div>
css设计：两边列宽分别左浮和右浮，中间区块设置左右margin，大小分别为左右列块宽度。普通三栏布局
- 圣杯布局和双飞翼布局
与上面普通三栏布局在html结构上不同。将呈现内容的区块放在两边列块的前面，浏览器优先解析该区块
利用浮动 和负margin：对于相邻的浮动元素，如果因为空间不够导致第n个浮动元素下移，可以通过给第n个浮动元素设置 margin为负值，来让第n个元素上移，其中负值的数值等于第n个元素的
宽度减去父容器被其他元素占用后还剩下的宽度，即第n个元素与其他元素折叠部分的宽度。浮动和负margin让元素上移实例
圣杯布局和双飞翼布局的html结构不一样
- 圣杯布局：两边栏位于父元素的margin上方，为了保证自适应宽度的父元素的宽度>左边栏的宽度，需要为父元素设置
min-width - 双飞翼布局：两边栏位于上一兄弟元素（中间栏）的子元素的margin上方。只需要（中间栏）的子元素的margin大小就可保证（中间栏）的宽度永远>左边栏的宽度
圣杯布局
html设计：
<div id="content">
<div class="main">main</div>
<div class="aside">aside</div>
<div class="extra">extra</div>
</div>
css设计：
#content:after{
content: ''; /*8*/
display: block; /*8*/
clear: both; /*8*/
}
/*父容器设置padding和margin都可使content区块两边出现空白，并且使content内容宽度变小，
即，使main的内容宽度边小，此布局为弹性布局，
当浏览器窗口缩小，content的内容宽度(main的内容宽度)小于左边列块的宽度，
左边列宽将不会上移，布局将发生错乱。
此时需要设置main的min-width为左边列块的宽度*/
#content{
padding-left: 100px; /*5*/
padding-right: 150px; /*5*/
/*margin-left: 110px;*/
/*margin-right: 160px;*/
}
.aside, .main, .extra{
float: left; /*2*/
}
.aside{
width: 100px; /*1*/
height: 300px; /*1*/
background: red; /*1*/
/*浮动和负margin是元素上移。左边列宽上移后还需要移到main的右边*/
margin-left: -100%; /*4*/
/*相对定位*//*左右两个侧边栏仍然包裹在父容器里面，移动相对于自身宽度的位置，就先当于移动到了父容器的margin或者padding上方*/
position: relative; /*6*/
/*两边区块通过负margin上移后，再通过移动自身宽度的位置，实际占用的是父元素的margin*/
left: -100px; /*6*/
}
.extra{
width: 150px; /*1*/
height: 300px; /*1*/
background: yellow; /*1*/
/*浮动和负margin是元素上移*/
margin-left: -150px; /*5*/
/*相对定位*/
position: relative; /*7*/
left: 150px; /*7*/
}
.main{
height: 350px; /*1*/
background: blue; /*1*/
/*main的内容的宽度等于父容器内容的宽度*/
width: 100%; /*3*/
}
双飞翼布局（和圣杯布局里，左右列块上移之前的步骤一样）
圣杯布局中当浏览器窗口减小，使得main内容宽度减小，而左边列宽的负margin值与main内容宽度有关，main内容宽度减小到左边列块宽度以下，导致左边列宽不上移，布局出现混乱的问题，出现了双飞翼布局。
双飞翼布局是基于圣杯布局出现问题的改进。浏览器窗口变小，左边列宽位置不发生变化的关键在与main的内容宽度，即aside的上一个元素main的宽度永远大于等于左边列块的宽度，就能保证布局不发生错乱。为此，双飞翼布局在html排列上做出了改变。
html设计：
<div id="content">
<div class="main">
<div class="wrap">main</div>
</div>
<div class="aside">aside</div>
<div class="extra">extra</div>
</div>
css设计：
main内部多包裹了一层，需要实现的是wrap内容宽度变化，但是main内容宽度自动保持最小值。做法就是给wrap加margin（main的最小值是wrap两边margin和，始终大于左边列块的大小），实现左右列块在页面内容的两边排列。
#content:after{
content: ''; /*8*/
display: block; /*8*/
clear: both; /*8*/
}
#content{ }
.aside, .main, .extra{
float: left; /*2*/
}
.aside{
width: 100px; /*1*/
height: 300px; /*1*/
background: red; /*1*/
margin-left: -100%; /*4*/
}
.extra{
width: 150px; /*1*/
height: 300px; /*1*/
background: yellow; /*1*/
margin-left: -150px; /*5*/
}
.main{
/* background: blue; */ /*第1步添加，第7步注释掉*/
/* height: 350px; */ /*第1步添加，第7步注释掉*/
width: 100%; /*3*/
}
.wrap{
margin-left: 100px; /*6*/
margin-right: 150px; /*6*/
background: blue; /*7*/
height: 350px; /*7*/
}
其他布局知识：
- 水平等距排列
- 浮动和负margin结合，是元素上移，必须都是浮动元素
- 浮动元素的宽度根据内容自动收缩，所以必须设置宽高。若要实现宽度铺满父容器，需要使用width:100%（自身内容的宽度等于父容器内容的宽度）
- 最好不要设置外部容器的宽高，使用内容的宽高撑开父容器
- 浮动元素对margin:0 auto和text-align:center失效
- 先根据页面结构写html，布局交给CSS
- 写了float，一定要清除浮动
- float不要与绝对定位一起使用
-
margin:0 auto和绝对定位一起使用无效 - 文字的高度使用line-height好于height，可使单行文字垂直居中
