提起布局，盒模型是最重要的概念。
盒模型：包括 宽、高、外边距、内边距、边框，
注意：当两个垂直盒子算margin时，只会计算比较大的那个元素。盒子的大小，最好是打开开发者模式去看看真实的是多少，有时因为一些原因自己写的可能是样式并没有用上。
css3 box-sizing:border-box; 给这个块级元素设置这个，不会计算margin值，这样只要量出盒子大小（指边框以内的）只要写padding ，border ，content 内容大小会自己计算。
1. 3种定位机制：普通流、浮动、绝对定位
一般都是普通流
但是有时，我们需要在一行显示块级元素，用浮动或者定位都行，但是现在提倡响应式布局，浮动也可以解决，但是文件脱离文档流，需要清除浮动。一个好的方式是 display:inline-block;一行显示块级元素，但是会产生间隔，解决方案是给父级元素 font-size:0; 自己元素再设置font-size:大小;即可。
浮动：float:left right ;
定位：relative absolute fixed
2.整体页面居中
随着现在设备的屏幕越来越大，最好是设计好整体页面的宽高和，然后用
margin:0 auto居中。
3.两列布局
3.1 浮动
左浮动 ，又浮动解决
3.2 定位
相对于父级元素 绝对定位解决
4.三列布局
现在是响应式布局，不推荐使用浮动，因为会出现很多问题，要想完美解决，推荐一种双飞翼的布局。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
.wrapper{
position: relative;
}
.middle{
margin: 0 100px;
text-align: center;
}
.left{
width: 100px;
position: absolute;
left: 0;
top: 0;
}
.right{
width: 100px;
position: absolute;
right: 0;
top: 0;
}
style>
head>
<body>
<div class="wrapper">
<div class="middle">
<span>中间span>
div>
<div class="left">左盒子div>
<div class="right">又盒子div>
div>
body>
html>
4.流式布局
百分比布局，但是这种算上下文的百分比实在麻烦，不停的计算器在计算。
推荐使用min-width ,max-width 设置，元素的宽高不要写死，用margin 和padding隔离开，让元素自动填充区域。
使用rem为单位的设置，sublime有个插件可以自动将px转换为rem 基于浏览器进行计算。
移动端因为物理像素比不同，推荐使用淘宝镜像自动适配屏幕布局 flexible.js
5.弹性布局
移动端的兼容较好