7.1 经典行布局
盒子水平居中
常使用：margin: 0 auto;
position属性设置的是左上角那个点的位置，所以如果需要设置整个盒子居中，就要设置负margin属性
这里使用position属性设置absolute，意为相对最近的父元素偏移，由于没有父元素，所以相对浏览器框定位
当我加入一个父元素时（换个颜色）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css基本布局</title>
<style type="text/css">
body{margin: 0;padding: 0;text-align: center;}
.a{
width: 400px;height: 200px;background-color: pink;
position: absolute;left:50%;top: 50%;
/*当position没有父元素，父元素就是浏览器框*/
margin-left: -200px;margin-top: -100px;
}
.root{
width: 600px;height: 400px;background-color: gray;
position: relative;left:50%;
/*该元素作为父元素有定位*/
margin-left: -300px;
}
</style>
</head>
<body>
<div class="root">
<div class="a">盒子水平居中</div>
</div>
</body>
</html>
他就变成了相对灰色父元素的定位
文字垂直居中
line-height属性值等于盒子高度时，文字垂直居中
固定导航栏
为需要固定的盒子添加: position:fixed; 属性
就可以实现导航栏固定效果
但是这个效果其实有问题，真相是是红色盒子将蓝色盒子覆盖住，填充内容之后就会有问题（上面显示缺一行），解决方法如下：
在被覆盖的盒子内添加padding-top属性，值为覆盖它的盒子的高度，相当于把蓝盒子上面的空白增加了，随便他红盒子覆盖，反正把内容放下面，覆盖的也是没用的
7.2 经典列布局
两列盒子居中自适应
通过给两个列盒子外包裹一个盒子来实现两列盒子居中效果。（外层盒子宽等于俩列盒子宽之和）
并给两个盒子分别设置float:left和float:right属性
现在解决自适应的问题：将父元素和子元素额width全部改为百分比
效果如下
三列盒子居中自适应
三个盒子宽度和等于外部盒子宽度，都使用float属性实现三盒子同一行，如果有超出宽度会把盒子挤到下一行
效果如下
自适应部分跟两列一样，都将width设置为百分比形式
7.3 混合布局
自适应行布局和列布局
效果如下
总结：
- 行布局
-
margin:0 auto;上下为0，左右居中
-
width:100%;页面自适应
-
垂直，水平都居中
position:absolute;
left:50%;
right:50%;
margin-left:-50% width;
margin-right:-50% height;
其余类似
- 列布局
- 混合布局
