CSS 布局小结
布局基础：
1.盒子模型
2.display：确定元素显示类型（block、inline、inline-block）
3.position:确定元素位置（static/静态（按文档流挨着布局）、relative/相对（以元素本身做参考点，不改变其占据的空间）、absolute/绝对（脱离文档流，不会对其他元素布局产生影响，相对于最近的absolute或relative属性的元素）、fixed/固定（脱离文档流，不会对其他元素布局产生影响，相对于可视区域））
常见布局方式
1.table 表格布局
文字垂直居中
脱离文档流，但不脱离文本流
float对自身影响：
1.形成“块”（BFC）宽和高由自身设置
2.位置尽量靠上和靠左
示例
float对兄弟元素影响：
1.上面贴非 float 元素
2.旁边贴 float 元素
3.不影响其他块级元素位置
4.影响其他块级元素内部文本
float对父集元素影响：
1.从布局上“消失”
2.可能发生高度塌陷
高度塌陷
解决办法：1.overflow = auto (元素超出时自动进行滚动）2.利用其他元素撑开父集元素
布局示例
3.inline-block 布局
1.像文本一样排 block 元素
2.没有清除浮动等问题
3.需要处理间隙，自适应适配困难
解决办法：1.字体大小设为0，在子元素中再重设字体大小
1.弹性盒子
2.盒子本来就是并列的，指定宽度即可
再添加 div 也会平分，依次排列，宽度分别设置即可（低版本IE不支持，版本更迭复杂）
响应式：在不同设备上可以正常使用，一般主要处理屏幕大小问题
主要方法：1.隐藏+折行+自适应空间 2.rem/viewport/media query
示例1.1.隐藏+折行+自适应空间
示例2.
