今天完成的事情：

按照师兄要求改进了任务6，暂时还没提交。 改进：1.模拟下拉框（很不熟悉。问题要调很久。） 2.用雪碧代替了页面里面的每个图标（用的很不好） 3.拉窄边框 文字相遇出现省略...（无法达到完美的效果）

明天计划的事情：

这几天放假，跟家人一起出门。比较没有时间来学习。好好计划下改进任务6。根据任务6的提示，footer要用button，当屏幕过小时，表格内容大小能根据屏幕改变。以bootstrap作为基础布局，添加自定义样式表对bootstrap无法表达的细节样式进行调整的

遇到的问题：任意盒子垂直居中的办法一直很困惑，基本用到都要尝试几次才能成功，说明没有彻底理解，不熟悉。

收获：阅读笔记

块级元素（可以配合 clear::after来清除浮动 。一个盒子有外在盒子和内在盒子。）

        width/height作用在内在盒子上。 width默认值为auto 有4中宽度表现1.充分利用可用空间（宽度100%父容器）2.收缩和包裹（浮动，绝对定位，inline-block，table元素等）

3.收缩到最小（minimum content width）4.超出容器限制（例如设置为不换行的超长文本）

        外部尺寸：1.正常流宽度：block容器会像水一样自动铺满容器。ex：默认div宽度会100%于父容器。2.格式化宽度：在绝地定位模型中，于非替换元素时，设置了left/right或者top/bottom对立方位的属性时，元素的宽度会相对于在最近的具有定位特性的祖先元素计算。表现类似正常流宽度。会铺满整个相对于计算的祖先容器。

        内部尺寸：1.包裹性，自适应性：元素的尺寸由内部元素决定，但小于包含块容器（除非容器尺寸小于元素的“首选最小宽度”）。ex：inline-block元素。2.首选最小宽度：中文为14，西方文字为连续的英文字符单元，类似图片的替换元素由内容本身绝定。3.最大宽度：最大连续内联盒子的的宽度。

        盒子模型：1.conten box 2.padding box 3.border box 4.margin box   

默认width作用在content box上。设定了width具体数值后  丢失流动性.  

        利用宽度分离达成流体布局EX: .father{ width:200px; } .son {  margin:20px; padding: 20px; border 1px solid red; }.

        box-sizing改变witdh的作用域. EX：设定box-sizing: border-box；将witdh作用在border上。（box-sizing不支持margin） 

        height的100%在html和body有效。在绝对定位有效（非绝对定位计算基于content box ，绝对定位基于padding box）

        max-width/height初始值为none，min-width/height为auto。 min/max的权重最高。min max同时存在时，以最大的数为准，EX：min-width：1000px；max-width:800px; 此时min-witdh有效；

内联元素

        内联盒子模型：1.内容区域 2.内联盒子（inline box）3.行框盒子（line box）4.包含块 （containing box）。

        每个行框盒子前都有个幽灵空白节点（strut）。