一，今天做的事情

   准备工作，搜索下载sublime，webstorm，github桌面端。麻蛋，全英文界面，幸亏我很努力每天花26个小时来学习英文，再花6个小时来刷刷视频，看看书。勉勉强强能使用，两个工具都使用了下，工欲善其事必先利其器嘛！个人感觉webstorm更强大，功能很多还能直连githu 写了代码之后直接鼠标轻松点击就能运行在浏览器，查漏补缺杀人放火必备啊！但是就是界面文字和背景不友好，没有sublime初始的界面醒目。sublime做为渣渣的我没有找到在那里快捷运行到浏览器。

  之前一直有刷云课堂，W3C。自己也买的JS高程，精通CSS看。一些Html CSS的基本姿势，脑子里面一直有点印象，只是一直找不到东西来验证。聪明如我，一直觉得带着问题来复习来验证自己的学习成果是最棒哒！而我也是这么做的。看看问题，嗯，来分析下：

  九宫格（9个块状元素）---盒子模型

  背景色全部是橙色（等会看看如果块元素不需要单独设置，是不是有办法 直接类选择器设置呢？太机灵了。）

  宽度，高度自动适应浏览器 （貌似这个我还真的不太熟悉，百分比设置？）

手机pad 自适应没学过翻书 <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>手机屏幕尺寸与分辨率，device-width解决IE横竖屏部分自适应，initial-scale=1.0解决iPad iPhone系列的问题。

OK，没了！带着这些问题我首先想到的是table 表格  如果用表格来处理的话 应该很简单很简单！等，等，不对，如果只用表格来做只需要刷过表格那一章应该就可以搞定了！不会需要这么多的学习资料，陷阱一定是陷阱，那么真相只有一个用div元素来实现咯！哈哈，走起！

二，遇到的问题

   .class{width:33%;height:33%......} 变形了，尼玛  高度各种换 PX ，% 啊啊啊各种变形。加span标签还是不行 - -|||各种翻资料各种尝试此路不通！啊！

  接着又尝试一个DIV元素 把border 变成4个不同颜色的块，什么鬼？4个梯形 中间一个正方形 而且中间没有间隙啊 word哥啊！

 再试3个div 分9个不同色块来看看，还是有间隙 - -|||失败！ 等等，冷静，冷静 我他吗已经从早晨9点冷静到下午5点了！就是卡这里。去尼玛蛋高度直接删除。

 好像貌似成功啦！问题好像解决了！这是为什么呢？查资料吧，原来是高度溢出啊，就是子元素的大小超过了父元素，就会覆盖住！

解决办法.父元素{height:100%; }。添加border-radius：10px...  全部圆角 大功告成！！

任务完成引升想到的：九宫格不管float：左 还是右  都是可以达到想到的效果。

只要是块状元素应该都能达到想要的效果都能做到这个自适应9工口(好吧，九宫格)亲测UL元素套LI达到同样效果 float方向一致 没有问题（错乱方向没有试过，因为那样要单独块设置，我怕蛋疼就没试）

我是收获：我他吗的被艹了一天后面竟然会举一反三了！盒子模型块元素自己有了一个稍微深刻的理解 块元素也有了比较深的认识。

明天的任务：

刷过任务2 ，继续了解学习内联元素  最起码常用的要有个深刻的印象。

欢乐的时光总是短暂的又到时候说了