今天完成的事情：

今天完成了任务十三，对less文件中的一些规则有了细致的了解，做了一个自己的样式库为以后使用，对felx布局有了全新的认识。

明天计划的事情：学习http、协议、端口、路径、参数都是些什么，开始任务十四

遇到的问题：

1、

问题描述：

在做页面二的中间部分的时候因为要让好多个小正方形格子3列分布，任务规定不能使用bootstrap，我就想用flex来布局，但是过程中就发现了一些问题,给正方形给定固定的宽高后设置flex布局，随着浏览器宽度的增加，一行的正方形会不断的增加，但是宽度设置百分数宽度就一直在变化，不能保持正方形的样子。

解决：

又去看了阮一峰的讲解，发现只是设置display：flex，强制元素排成一行，然后又换行的属性wrap/nowrap/wrap-reverse，（分别对应换行，不换行，换行第一行在下方），以前居中总是使用align-item和justify-content属性，今天师兄指导了我下可以只声明flex之后使用margin：0 auto来居中，对于这个问题点我在小正方形外加了个宽度30%的盒子，然后小正方形在盒子里面居中，声明flex布局后设置flex-wrap：wrap；再margin居中，这样每行就三个，而且做到了自动换行，如图

2、将媒体查询的代码放在less文件的头部发现没有效果，放在尾部出现效果，因为后面代码的样式会覆盖之前的样式。

收获：

1、CSS的样式重置

关于样式重置，大部分的重置是没有必要的，如*｛margin：0；padding：0；｝这种是完全没有必要的，可能还会破坏属性原有的布局。所以我做了个自己的重置样式的less文件，现在的代码量有点小，以后再慢慢往上补充吧。

2、CSS架构

CSS架构的好处就是可拓展性，可利用性，以及便于后期的维护等。架构就是建立各种样式库，有了样式库之后以后有相同样式的地方就可以直接引入，当然样式库也必须精简，所以需要判断样式的复用性高不高，同时也要有个分类。我的分类有reset样式，head常用样式，body常用样式，footer常用样式，特殊样式。

在网上看别的大神的样式库还有通用导航样式库、通用按钮样式库、通用选项卡样式库、通用小图标样式库、通用文本框等控件样式库等等。

 理解的不够透彻，仍然需要继续学习

3、CSS的样式分离

css的样式分离不仅需要注意分离同时需要注意命名，避免以后和其他的块有相同名字而导致样式出现bug

css样式越是分离，样式的利用率和覆盖率就越高，css代码就越精简，但是过于简单的css样式会导致html代码过多，所以在判断一个样式是否要加入样式库的时候需要好好思考下影响。

4、关于flex一些不常用属性的理解

flex的三个值分别是flex-grow,flex-shrink,flex-basis默认是0 1 auto，对子元素设置，

flex-grow让元素放大，通过其值调整放大比例，如果此元素flex-grow为3，其他为1则这个元素占据空间是其他元素的3倍

flex-shrink缩小跟grow相反

flex-basis如果轴上有剩余空间，在给每个元素分配这些空间（比如space-around让每个元素间隔相同）的之前为设置此属性的元素提前预留一定的空间，它可以是一个固定的值（如100px、24px...不大于剩余空间的所需的任意值）

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。对子元素单独设置