对于百度前端技术学院的task0003-个人任务管理系统开发的一个记录

第一眼看到它列出的需求和实现要求，就觉得头晕，毕竟真的有点乱，好在自己时刻记得偶像的那一句话，“编程，最重要的是解决问题的能力。”

那我现在遇到需求杂乱的话，是不是要把这些要求分类出来？html、css、JS按这个分类出来后，再继续拿草稿图来画最基础的结构（这个是最重要的，不然一开始就乱写，到时候处bug都不知道在哪里找，可读性也不高），结构弄好后可以弄基础的css上去了。

但是这时候又遇到一个问题了，任务实现要求中有提到高宽度要自适应，宽度倒是好弄（填个width：100%就好），但是高度这样弄无济于事，于是我就谷歌了一下，看到了一篇名为CSS布局奇淫技巧之-高度自适应之后才恍然大悟！高度自适应可以利用绝对定位来解决。但一个元素是绝对定位时，如果没有给它设定高度或宽度，则它的的高度和宽度是由它的top、right、bottom、left属性决定的。

.menu {
    position: absolute;
    display: flex;
    width: 100%;
    top: 50px;
    bottom: 0;
    border: 1px solid #CCCCCC;

}

于是盒子的高度自适应就这样解决了，太感谢前辈的那篇文章了。按钮贴到底部的办法：利用子绝父相加bottom:0 即可：

<div class="container">
  <div class="content">
    <!-- 这里放置内容 -->
  </div>
  <button>按钮</button>
</div>

.container {
  position: relative;
}

.content {
  /* 内容的样式 */
}

button {
  position: absolute;
  bottom: 0;
}

如果遇到右侧窗口出现元素横向排列的话，可以这样做：

.detail {
    /* 让盒子变成弹性容器 */
    display: flex;
    /* 让盒子里面的子元素以纵向排列 */
    flex-direction: column;
}

至于JS的实践，先分好类，一步步完成。