今天完成的事情

完成了任务十三第一个页面侧边栏的添加

由于第一个页面新增加了侧边栏，也是第一次做这种侧边栏，虽然任务十做过类似的，但是还是不够熟练，所以今天大部分时间都是花在了侧边栏的制作上。

完成了第二个页面的重构

因为在做任务7的时候，各个参数我都是一个个量的，布局也相对来说还好，所以今天第二个页面参照任务7很快就完成了，由此可见做任务时脚踏实地才是王道，免得后面不停的修改，浪费时间。

今天遇到的问题

问题1：如下图左，侧边栏和主体页面上下排列，在使用弹性盒子后，虽然可以并排显示，但是页面需求如右侧：超出页面不显示

解 决：上图左侧页面，侧边栏宽度200px，主体宽度使用 calc(100% - 200px)，但是使用此做法达不到超出不显示的效果，最后参考师兄代码后使用 min-width解决，即侧边栏 min-width: 200px; 使其宽度始终不小于200px， 主体页面 min-width: 100%;使其不收缩。

问题2：如下图，导航按钮使用了绝对定位，在不点击按钮状况下，按钮状态时正常的，但是点击后发现按钮消失不见了

解 决：后来测试发现，按钮在点击后并没有消失，而是由于背景色原因看不见，它依旧处于位置2处，但是需求时点击后按钮位置相对头部位置不变，也就是依旧处于位置1处，最终通过修改定位参数解决，开始属性写反了，一直找不到原因，还是师兄牛逼，一眼找出来问题所在。代码如下：

不点击:

点击后：

今天的收获

input

在进行任务十的时候就使用到了 input和label for的组合使用，从那时候起就开始曲解了input的使用方法以及原理，经过师兄今天的指导，基本是明白了。   之前一直以为label的作用是让点击按钮后能显示之前隐藏的东西，今天才知道这个是input本身的作用，input会生成一个单选点击框，但是我们一般都不会使用默认的单选框，可以使用-webkit-appearance: none; 去除默认样式，然后通过添加背景图或者自己写的方式来做自己需要的样式。当需要点击input按钮来显示之前隐藏的东西，使用 checked属性完成。如下例子，sidebar默认是消失不见的：

label for

label for 一般是搭配input使用的，主要作用是关联作用，在任务十种，label for就是将input单选框和后面的文字“对口箱" 关联起来，从而当你点击

“对口箱”三个字的时候，单选框同样可以选中，而不是非得点击单选框本身才能选中。

rem

月底的小课堂准备分享rem布局，因为经常在师兄们的代码中看到rem单位，但是不知道十什么意思，所以我一直使用的都是px单位

今天了解了下rem是什么?

rem是CSS3新增的一个相对单位（root em，根em）。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。举一个简单的例子：

浏览器默认的 html font-size=16px， 这样如果我们需要设置字体的大小为12px, 通过计算可知 12 / 16 = 0.75；因此只需要设置 font-size= 0.75rem。

为了计算方便，我们可以设置html font-size=10px 或者 font-size=62.5%，这样设置12px字体的时候就只需要设置 font-size=1.2rem,十进制换算信手拈来。

明天的计划

完成任务十三的第二个页面