今天没把持住，浪费了很多时间在游戏上，玩的时候很爽，过后十分后悔，不能再有下次了！

【今天完成的事】

1. 完成了任务三。

2.看了CSS权威指南基本视觉格式化一章，对块级元素和行内元素以及行内块元素(inline-block)有了大致的了解，但因为基础不好，有的地方看得不甚明白，不过收获还是很多。

【明天计划的事】

1. 看CSS权威指南的内边距，边框，外边距和浮动及定位这两章。

2.继续写任务。

【遇到的问题】

今天的任务三真是采坑无数，在让我放弃的边缘反复试探，不过我最终还是坚强的挺过来了，一把辛酸泪。任务三的开局还是很简单了，我以前用过PS，所以切图方面很简单的就过了，之后就兴致勃勃的写好了基本布局，在添加css的时候却发现一个弥天大坑。任务三要求自适应，百度之后发现rem是完成自适应的神器，就将设置了html{font-size: 625%;}，于是问题来了，当时出问题时我也没截图，为了更好的说明问题，我又写了一个demo，代码如下：

这是css

效果图如下：

不知为啥图片四周有了很多空白，我原本以为是padding或者margin没清除，但是f12后发现，无论是div还是img，它们的padding和margin都是0，是的，你没看错，那空白就是如此莫名其妙，我用了很多种方法可还是不明白到底多在哪儿，这赘肉也忒神奇了。随后我就自由发挥了一下，将包裹图片的div设置了float：left；

代码如下：

 body{

         margin: 0;

         padding: 0;

         background: #ddd;

}

 html{

         font-size: 625%;

}

 .one{

         background-color：red；

        float： left;

}

 img{

        height: 84px;

        width: 84px;

}

效果如下，也许你会问为什么不直接将图片float(这是解决办法之一），我当时是自由发挥的，这大概是上天给我的考验吧。

那两大坨红色的空隙依旧是如此耀眼，那么我们继续往下探索，为了能有个对比，我添加了一个class为two的div，里面依旧包裹了一张图片；

<div class="one"><img src="tim1g.jpg"></div>

<div class="two"><img src="tim1g.jpg"></div>

css代码不变，即div.one左浮动，div正常，效果图如下：

然后我发现由于我的手贱，又多造出了一个问题。按照float的特性来讲，浮动的div.one已经脱离的文档流，浮在了半空中，那div.two就应该跑到div.one的下面才对，换句话说，div.one理论上应该将div.two覆盖掉才对，然而并没有。为了验证，我为div.two设置了背景色和高度，发现img的表现方式竟然和内联元素有些相似。效果图如下：

请忽略那个原谅色。事实证明，div.one确实将div.two覆盖了，但由于img比较特殊，有点类似于文字，为了验证，我们将div.two中的图片换成文字，看下图：

<div class="one"><img src="tim1g.jpg"></div>

<div class="two">你好库洛洛团长こんにちはクロロの団長</div>

这不就是float最初的功能，文字环绕么！有此可见img和文字纵是有点联系的，然后我就百度了一下，发现图片和文字一样都是内联元素。基础不好害死人，我绕了一大圈才找到最终结果，其实如图片文字等内联元素，它默认对齐方式都是和它的父级的 baseline 去进行对齐的，但是对齐的是 baseline，撑开高度的却是元素整体的高度（bottom line），这样肯定就会造成一定的间隙。接下来感受一下文字是如何以基线对齐的：

关于基线，行高，内容区，行距等具体内容，请点击这篇博文，写的清楚又明白：深入理解css基线与行高。说到基线对齐就不得不提到vertical-align，这个东西经常用在垂直居中的情况下，但又时灵时不灵，具体原因，请看张鑫旭大神的博客：我对CSS vertical-align的一些理解与认识。

知道了问题的原因就可以上方案了，度娘上有很多，推荐一篇博文：解决img标签上下出现间隙的方法。   

世界终于清静了！

说到这里不得不提一下，img标签支持宽高，如果没有宽高的，就默认为图片本身的大小，如果只给宽度，那么高度是自适应的，如果只给高度，那么宽度也是自适应的。这种宽高等比变动的特性也许可以用来完成任务一的九宫格，具体的实践我还没做，明天有时间可以试一试。

2. 关于自适应和响应式的区别：

找了很多自适应与响应式的资料，结果看的云里雾里，越看越不明白，后来发现一张图，醍醐灌顶了。

3. 关于rem，将根元素html的字体大小设置为font-size:62.5%原因：浏览器默认字体大小是16px，rem与px关系为：1rem = 10px，10/16=0.625=62.5%，只要将设计稿中量到的px尺寸除以10就得到了相应的rem尺寸，方便极了。当然，直接将html元素设置为10px，也是可以的。

实际项目设置成 font-size: 62.5%可能会出现问题，因为chrome不支持小于12px的字体，计算小于12px的时候，会默认取12px去计算，导致chrome的em/rem计算不准确。

针对这个现象，可以尝试设置html字体为625%，即100px，body 修正为16px，这样 0.1rem 就是 10px，而body的字体仍然是默认大小，不影响未设置大小的元素的默认字体的大小。

但是具体有关媒体查询中的rem换算我还没有整明白，明天需要继续奋斗。

4. 关于viewport，参考博客：http://www.cnblogs.com/2050/p/3877280.html 明白了不少东西。

     <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

      width=device-width： 页面宽度等于设备宽度。 

      initial-scale=1          ：初始缩放指数为1，相对于理想视窗缩放。

      minimum-scale=1   ：最小缩放指数为1

      maximum-scale=1  ：最大缩放指数为1

     user-scalable=no     ：用户不能对页面缩放

    Viewport 分为：视觉视窗、理想视窗、布局视窗。

    视觉视窗：设备的实际宽度，可通过window.innerWidth | window.innerHeight来获得对应的宽和高。

    布局视窗：通常比视觉视窗大，可通过document.documentElement.clientWidth | document.documentElement.clientHeight来获得宽和高。

    理想视窗( ideal viewport) : 其意义在于，无论在何种分辨率的屏幕下，那些针对ideal viewport 而设计的网站，不需要用户手动缩放，也不需要出现横                                                向滚动条，都可以完美的呈现给用户。

    布局视窗的宽高值是在页面没添加viewport 时所获得的值。如果你给页面添加了viewport 并且 设置了width = device-width 时，通过上面的代码所获得的值就不是布局视窗的默认值了，而是设备宽度。

    (1) 要得到ideal viewport（理想视窗）就必须把默认的layout viewport（布局视窗）的宽度设为移动设备的屏幕宽度（视觉视窗）。因为meta viewport中的width能控制layout viewport(布局视窗)的宽度，所以我们只需要把width设为width-device（设备宽度）这个特殊的值就行了。

      <meta name="viewport" content="width=device-width">

   (2) 

      <meta name="viewport" content="initial-scale=1">这句代码也能达到和上一句代码一样的效果，也可以把当前的的viewport变为 ideal viewport（理想视窗）。因为这句代码的作用是不对当前的页面进行缩放，也就是页面本该是多大就是多大。这里的缩放是相对于 ideal viewport（理想视窗）来进行缩放的，当对ideal viewport进行100%的缩放，也就是缩放值为1的时候，就得到了 ideal viewport。

【收获】

如上。