1. table布局
● 特点：他的特性决定非常适合用来做布局，表格的内容可以自动居中，也可加入display:table;display:table.cell来支持
● 缺点：1.table比其他更多的html标记占更多的字节（会造成下载时间延迟，占用服务器更多的资源）
2. table会阻挡浏览器渲染引擎的渲染顺序（会延迟页面的生成速度，让用户等待更久的时间）
● 优点：本身具备的特点，让有的时候用起来非常的方便，可以很好的达到预期的效果
2. flex布局：
2.1 盒模型：
一个盒子的占用空间是：content+padding+border+margin
2.2 display/position
display的值有
● block（元素表现为块级元素，有固定的宽高，独占一行）
● inline（元素表现为行内元素，不能设置宽高）
● inline-block（对外表现为行内元素，对内表现为块级元素）
position的值有：
● static （默认情况，存在文档流中）
● relative：（根据元素本身原来所处的位置偏移，不会改变布局的计算）
● absolute：（绝对定位，脱离文档流，不会对别的元素造成影响，相对的是父级最近的relative或者absolute定位元素）
● fixed：（绝对定位，脱离文档流，相对于的是 屏幕，这个是固定在一定的位置，但是absolute元素是离开相应的位置就看不见了）
position的层叠是按顺序层叠的，不过可以通过设置z-index来改变层叠的顺序，只有relative，absolute，fixed是可以设置z-index。
2.3 flexbox布局
flexbox布局即弹性盒子布局，他的特点是 盒子本来是并列的，只需要指定宽度。下面是一个经典的三栏布局的例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS布局</title>
</head>
<style>
.container{
height:200px;
width:200px;
display:flex;
}
.left{
background-color:red;
flex:1;
}
.middle{
background-color:yellow;
flex:1;
}
.right{
background-color:green;
flex:1;
}
</style>
<body>
<div class="container">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
</body>
</html>
要是需要两边定宽，中间自适应的话，可以
.left{
background-color:red;
width:20px;
}
.middle{
background-color:yellow;
flex:1;
}
.right{
background-color:green;
width:20px;
}
缺点：就是flexbox布局方式浏览器的支持性不是很好，有些兼容性问题，但是是未来布局的趋势。
3. float布局：
float布局是各大网站用的最多的一种布局方式了，但是相对来说是比较复杂的。
- 什么是浮动呢? 浮动就是脱离文档流，但是不脱离文本流。
- 有什么特点呢？
（1）对自身的影响：
● float元素是可以形成块的，如span元素，可以让行内元素拥有宽和高，因为块级元素就是有宽高的。
● 浮动元素的位置尽量是靠上 的
● 尽量是靠左（float:left）或者是靠右的（float:right），要是哪一行满足不了浮动元素的宽度要求，那么元素是往下掉的。
（2）对兄弟元素的影响：
● 不影响其他块级元素的位置
● 影响其他块级元素的文本
● 上面贴非float元素
● 旁边贴float元素 或者边框
（3）对父级元素的影响：
● 从布局上“消失”
● 高度塌陷
3.1 高度塌陷
什么是高度塌陷呢？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS布局</title>
</head>
<style>
*{
margin:0;
padding:0;
}
.container{
width:200px;
background-color:red;
}
.left{
background-color:yellow;
float:left;
height:50px;
width:50px;
}
.right{
background-color:yellow;
float:right;
height:50px;
width:50px;
}
</style>
<body>
<div id="container">
<span class="left">float</span>
<span>我是字</span>
<span class="right">float</span>
</div>
</body>
</html>
从上面的图中 ，我们可以看到，float元素虽然包含在第一个container中，但是却超出了第一个container的范围，在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。
但是当子元素设置了浮动之后，子元素会完全脱离文档流，此时将会导致子元素无法撑开父元素的高度，那么父元素的高度就会塌陷。
解决的方案：
● 父元素设置overflow:auto 或者overflow:hidden
给父元素设置了之后，效果如下
那么给父元素添加一个伪类效果如何呢
.container::after{
content:'',
clear:both;
display:block;
visibilityhidden;
height:0;
}
3.2 两栏布局
现在要搞清楚的是，为什么要用float去实现布局呢？黄红黄这是一个标准的三栏布局，其实并不是
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS布局</title>
</head>
<style>
*{
margin:0;
padding:0;
}
.container{
width:400px;
height:200px;
}
.left{
background-color:yellow;
float:left;
height:100%;
width:100px;
}
.right{
background-color:red;
/* float:right; */
height:100%;
margin-left:100px;
}
.container::after{
content:'';
display:block;
visibility:hidden;
clear:both;
}
</style>
<body>
<div id="container">
<span class="left"></span>
<span class="right"></span>
</div>
</body>
</html>
上面的代码中，最重要的是margin-left:100px;这一句 将浮动元素的位置让出来了，所以右边栏里面的元素是不会影响到浮动的div 的
这就是浮动布局思想；
3.3 三栏布局
三栏布局主要是思路就是 左边一个浮动元素，右边一个浮动元素，但是这里要注意，中间的元素是要写在最后面的，因为中间的元素假设有块级的话，会影响右边浮动元素的定位的。
因为浮动元素会把块级元素的位置腾出来，所以要把中间的元素放在最后
4. 响应式布局
4.1 meta标签
这个到底是什么
最简单的处理方式其实就是，加上一个meta标签
其中，width=device-width这一句话的意思就是让 页面的宽度等于屏幕的宽度
4.2 使用rem
rem指的就是 html元素font-size，html元素的font-size 默认的是16px 所以1rem=16px， 然后根据rem去算各个元素的宽高，然后去配合media query就可以实现自适应。
4.3 media query
css2允许用户根据特定的Media类型去定制样式，基本的语法是这样的，
@media screen and (max-width:360px){
html{font-size:12px;}
}
意思就是：当屏幕的 宽度小于360px的时候html的字体的大小为12px
要值得注意的就是，范围大的要放在上面。