今天完成的事情：（一定要写非常细致的内容，比如说学会了盒子模型，了解了Margin）

1，今天预习了task8首页，开始动手搞他，头部搞完了

2，任务布局有点复杂，把知识点学了下

♠左列定宽，右列自适应

.parent{display:flex;}

.left{width:100px;}

.right{flex:1;}

♠右列定宽，左列自适应（用flex实现）

.parent{display:flex;}

.left{flex:1;}

.right{width:100px;}

♠两列定宽，一列自适应（用flex实现）

.parent{display:flex;}

.left,.center{width:100px;}

.right{flex:1}

♠两侧定宽，中栏自适应（用flex实现）

.parent{display:flex;}

.left{width:100px;}

.center{flex:1;}

.right{width:100px;}

♠一列不定宽，一列自适应（用flex实现）

.parent{display:flex;}

.right{flex:1;}

♠等分布局（用flex实现）

.parent{display:flex;}

.column{flex:1;}

.column+.column{margin-left:20px;}

3，bootstrap进行了环境配置，对相关知识点进行了初步了解

4，wiki上进行了任务总结

明天计划的事情：（一定要写非常细致的内容）

1，明天计划，继续学习bootstrap，能简单运用后，再使用bootstrap做task8首页

2，明天计划对之前完成的任务，进行细节优化，

3，task6在wiki上的总结

遇到的问题：（遇到什么困难，怎么解决的）

1，task进入内容区后，觉得内容元素有点多，还不怎么规律，顿时觉得不知如何布局了。打算初步学会bootstrap后再搞

2，对于页面定宽和自适应，原先一直都很迷惑，今天通过学习，感觉思绪清晰了一些

3，对于bootstrap，就配置了环境，看了下其它知识点，觉得有些懵，明天要加强学习了，争取直接搞懂

4，白天有时候状态不佳，觉得无法集中注意力，打算上班后，把手机放柜子里，免得受影响

收获：（通过今天的学习，学到了什么知识）

1，bootstrap环境的简单配置

2，水平居中

.parent{text-align: center;}

.child{display: inline-block;}                                         水平居中

.child{width: 200px; margin: 0 auto;}                            水平居中

.child{display: table; margin: 0 auto;}                            水平居中

.parent{position:relative;}

.child{position:absolute; left:50%; transform:translate(-50%);}           水平居中

.parent{display:flex; justify-content:center;}                                      水平居中

.parent{display:flex;}

.child{margin:0 auto;}                                                          水平居中

3，.parent{display:table-cell;vertical-align:middle;height:20px;}           垂直居中

.parent{display:inline-block;vertical-align:middle;line-height:20px;}         垂直居中

.parent{position:relative;}

.child{positon:absolute; top:50%; transform:translate(0,-50%);}                  垂直居中

.parent{display:flex; align-items:center;}                                           垂直居中

4，正中心居中

.parent{display:table-cell; vertical-align:middle; text-align:center;}

.child{display:inline-block;}                                                                         水平垂直居中

.parent{position:relative;}

.child{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}                水平垂直居中

.parent{display:flex;justify-content:center;align-items:center;}                        水平垂直居中  

5，多列布局

左列定宽，右列自适应 （用flex实现）

.parent{display:flex;}

.left{width:100px;}

.right{flex:1;}

右列定宽，左列自适应（用flex实现）

.parent{display:flex;}

.left{flex:1;}

.right{width:100px;}

两列定宽，一列自适应（用flex实现）

.parent{display:flex;}

.left,.center{width:100px;}

.right{flex:1}

两侧定宽，中栏自适应（用flex实现）

.parent{display:flex;}

.left{width:100px;}

.center{flex:1;}

.right{width:100px;}

一列不定宽，一列自适应（用flex实现）

.parent{display:flex;}

.right{flex:1;}

等分布局（用flex实现）

.parent{display:flex;}

.column{flex:1;}

.column+.column{margin-left:20px;}