今天完成的事情：

任务十三

明天计划的事情：

开始任务十四

遇到的问题

#方块高度自适应问题

解决办法：利用padding当margin/padding取形式为百分比的值时，无论是left/right，还是top/bottom，都是以父元素的width为参照物的。

代码如下：

& :first-child {
padding-bottom: calc(30% - 0.6rem);
padding-top: calc(30% - 0.6rem);
font-size: 1.2rem;
   line-height: calc(60%);
text-align: center;
background-color: #f5c97b;
  }

  & :nth-child(2) {
padding-bottom: calc(20% - 0.5rem);
padding-top: calc(20% - 0.5rem);
font-size: 1rem;
text-align: center;
background-color: #83b09a;
  }

#如上设置后，如图所示，高度不足

 解决办法：出现问题原因是，字体所占高度并不是字体的大小，content-area的高度代表文字高度 ，这是字体设计领域的一个概念。

有些文字的样子喜欢往上突出，有些文字喜欢往下突，再者，行与行文字之间需要一定的空间，所以content-area在上下两个区域预留出空白的区域是很正常的，如图：

font-size不能直接控制文字的高度(content-area的高度)，它控制的是文字主体部分的高度(em-square的高度)。 而content-area和em-square之间的比例，完全是由字体设计师决定，作为程序员是无法统一的。

所以再经过调查， 没有属性能直接控制文字的高度，我们只能通过font-size间接控制文字的高度。

只要限制字体所在盒子高度即可

height: 1.2rem;
box-sizing: content-box;

（差0.025px未查明原因）

#absolute定位，设置宽度100%，过大

解决办法: absolute 元素的百分比宽高 是相对于其最近的 父级别的absolute／relative 元素来计算的（如没有则对body）

给父级元素加上 position: relative;

#图片大小自适应

解决办法：设置四个盒子，套住图片即可，再设置图片宽度为100%

#sass编译输出要六七秒，影响速度

尚未解决

任务总结：

任务名称：css-task13

任务耗时：2天

任务成果：http://www.jinjun.wiki/task/css/task13

任务脑图：

任务收获：主要是对以前的页面重构，了解了页面样式重置，了解了css架构，和css规范，搭建一个项目时，以及做完一个项目进入到维护期时，我们都需要注意和思考的其中一个问题，就是关于CSS的架构问题。

理想的架构需要，结构清晰，一目了然，符合通用性，看后能马上清楚定位

命名规范，语义清晰，能分清全局还是局部，用在什么场景

低耦合，一方面是css类之间的耦合度降低，另一方面是和html代码之间的耦合降低

高复用，可扩展，多处可以使用，又可以轻易抽离。