今天完成的事情：今天把任务13写完提交上去了。然后看了下任务14的内容
明天计划的事情：明天了解开始做任务14,，下午的话看了看任务14的简单介绍
遇到的问题：

      1，今天在做任务13的时候，侧滑栏超出部分body里面的属性设置为overflow:hidden.     但是超过的部分还是没有吸纳是隐藏，后来百度了下

overflow 可以控制超出框内容的显示方式：隐藏、显示、滚动显示

 overflow 的定义：overflow 属性规定当内容溢出元素框时发生的事情。

对比发现， 把 body 视为元素框了， 于是用 div 试了下， 发现果然问题出在 body 上面了。

由此看来：body 不是一个元素框.

下来又发现了 scroll 和 auto 有意思的地方，

scroll： 无论内容有多少，哪怕一个字，这个元素框都会显示滚动条；

auto：只有内容超出文本框的内容区，才会出现滚动条；

<div class="text">
<input type='checkbox' id='sideToggle'>
<aside>
    <div class="name-one">
        <div class="one-txt">
            <img src="image/task13-icon1.png" height="32" width="32"/>
            <span>公告</span>
        </div>
        <img src="image/task13-icon5.png" height="32" width="32"/>
    </div>
    <div class="name-one">
        <div class="one-txt">
            <img src="image/task13-icon2.png" height="32" width="32"/>
            <span>设置</span>
        </div>
        <img src="image/task13-icon5.png" height="32" width="32"/>
    </div>
    <div class="name-one">
        <div class="one-txt">
            <img src="image/task13-icon3.png" height="32" width="32"/>
            <span>帮助</span>
        </div>
        <img src="image/task13-icon5.png" height="32" width="32"/>
    </div>
    <div class="name-one">
        <div class="one-txt">
            <img src="image/task13-icon4.png" height="32" width="32"/>
            <span>关于</span>
        </div>
        <img src="image/task13-icon5.png" height="32" width="32"/>
    </div>

</aside>
<div id="footer">

    <div class="bg">

        <header>
            <div class="top" id="wrap">
                <label id='sideMenuControl' for='sideToggle'><img src="image/task07-login-top.png"></label>
            </div>
        </header>

.text{
  @include max;
  margin: 0 auto;
  position:relative;
  height: 100%;
  overflow: hidden;
}
body.sideMenu{
  margin:0;
  -webkit-transform:none;
  transform:none; }
#footer {
  position:relative;
  bottom:0; left:0;
  width:100%;
  height: 100%;
  padding:0;
}
#sideToggle{ display:none; }
#sideToggle:checked + aside{ left:0; }
#sideToggle:checked ~ #wrap{ padding-left:220px; }
#sideToggle:checked ~ #footer{ padding-left: 50%;}
#sideToggle:checked ~ aside{visibility: visible;}
.text > aside{
  position:absolute;
  top:0; bottom:0;
  width:50%;
  transition:0.2s ease-out;
  -webkit-transition:0.2s ease-out;
}
#wrap{  transition:0.25s ease-out; -webkit-transition:0.25s ease-out; }
#wrap > label{ display:inline-block; }
#wrap > label{
  color: #FFF;
  display: block;
  font-family: Courier New;
  font-size: 25px;
  font-weight: bold;
  width: 1px;
  height: 30px;
  line-height: 35px;
  text-align: center;
  text-shadow: 0 -4px;
}
html{
  height: 100%;
}

收获： 了解了侧滑栏的使用原理，以及其中的一些注意事项，比如通过设置margin和padding来实现隐藏，还有一个小技巧就是现在设定页面显示在中间，但是背景的话要设置成其他颜色，刚开始的话我是把html,body,以及内容都设置为100%,然后把背景颜色设置成灰色，实现高度的自动充满屏幕。后来的话在和师兄交流的时候发现把高度的值直接设置成100vh也可以达到这个结果。

任务13总结

任务耗时 2天

总结   任务13的内容相对来说会比之前的复杂一点，比如这个任务要求宽度限制，拿着之前所使用的单位就得发生改变。这方面的话还包括自适应，所以以后得注意这方面的问题。也初步了解来怎么样使用css来实现这个效果。对于sass的话使用起来也更加熟悉来把，比如生成自己的经常用的sass文件并且来引用它。

1. 如何做默认样式重置？resetting 和 normalizing 之间有什么区别？

 默认样式重置简单一点可以使用*{margin=0;padding=0;}等类似的来实现。resetting直接重置所有格式，没有任何前提性质的。normalizing：重置部分格式的。

所以建议在设置的时候使用 normalizing 进行重置，避免造成所有数据丢失。resetting 这个需要谨慎使用

2. 任务 13 所学到的架构知识，和任务 12 所学到的规范有没有冲突的地方？如果有冲突，你会选择哪种方式？为什么？

暂时没有吧，多的应该是一个css样式重置，这方面自己完全可以写一个适合自己的css样式来使用

3. 移动端有哪些常见布局方式？

1>. 固定布局

 固定布局是第一次做移动端时最好的选择方式, 思路沿用 PC 端, 上手比较快。在标签里把 viewport 加好, 然后设想整个网页的宽度为 320px 即可。 其他地方根据 PC 端来布局。 缺点: 大屏手机显示网页比较宽, 固定布局宽度参照永远是 320px, 导致左右两 边会有空白。

 2>. 流动布局

 流动布局与固定宽度布局基本不同点就在于对网站尺寸的测量单位不同，流动布局就是使用百分比来代替 px 作为单位。 优点是流动布局可以很好解决自适应需求。缺点是不够灵活，添加元素时，需要更改其他元素的值。

 3>.bootstrap 布局

 bootstrap 是一个比较流行的响应式前端框架，利用 bootstrap 的栅格系统可以实现响应式的移动端布局。栅格系统：Bootstrap 中定义了一套响应式的网格系统，其使用方式就是将一个容器划分成 12 列，然后通过 col-xx-xx 的类名控制每一列的占比， 在使用的时候，我们给相应的 div 设置 col-lg-2 col-md-3 col-sm-4 col-xs-6，以此完成布局。

 4>. 媒体查询 + REM 布局

 使用媒体查询可以根据不同的设备宽度加载不同的 css 样式。rem 是一个相对单位，会根据根节点的字体大小来计算的，使用媒体查询和 rem 可以实现移动端的响应式。

4. 固定宽度布局开发 WebApp 如何实现多终端下自适应？