今天完成的事情：（一定要写非常细致的内容，比如说学会了盒子模型，了解了Margin）

今天开始正式任务14的路程。

想了下还是用栅格来写，这里就涉及到怎么写栅格布局。因为这里不能引用bootstrap，所以导航栏。栅格都需要自己来编写样式。

因为对于组件、模块确实没有什么概念，然后就去看了下师兄们的日报，算是有点头绪了。

1、组件的核心可以理解为代码的重复使用。功能单一或者独立。

也可以这样理解，一个html的框架是由三个组件组成，header头部、main主体和footer页脚组成，所以这里的header可以理解为组件。

2、模块的核心可以理解为分离职责，就是功能的划分。例如这里我们写的任务14.15中的导航栏，轮播图就是功能模块，这里我们可以分开来写入单独的css中，然后不同的模块组成组件。

组件化的意义是为了前端可以更好的分离开来，实现独立维护可维护性强。

1、查看了资料相关，对于手写栅格系统的布局大概了解了下，写栅格分为四个步骤；

一、写栅格首先要有容器，容器的宽度设定值，如果要为更大的屏幕设置宽度可以设置max-width。

例如：

container {

      width：100%；

      max-width：1773px；

}

二、然后写行row，防止其他列（column）溢出到其他行，这里需要清除父元素的浮动，栅格用float来制作是比较好的，需要用到伪类:after在row后面清除浮动。

.row:after {

       content""

       display:table;

       clear:both;

}

三、列（column）在栅格里是核心，也比较复杂列的定位有很多种，float、inline-block、flex、table都可以实现栅格布局。避免列浮动紧贴顶部。

[class*=”col-“] {

       float：left；

       min-height：1px

}

设列的宽度，容器的总宽度是100，分成6列就是100/6=16.666%；

[class*=”col-“] {

       float：left；

       min-height：1px；

       width：16.666%；

}

通过简单的计算，可以分成不同列的宽度，

.col-1{ width: 16.66%; } 

.col-2{ width: 33.33%; } 

.col-3{ width: 50%; } 

.col-4{ width: 66.664%;} 

.col-5{ width: 83.33%; } 

.col-6{ width: 100%; }

这个是6列的布局宽度，我不太理解的是66.664%和83.33%这个数值是怎么来的。

四、列的间隙

由于列的宽度单位是响应式的 % ，所以为了避免计算可以设置盒子模型为box-sizing：border-box。

container* {

       box-sizing：border-box；

}

所以写一个栅格系统，也可以单独用一个css文件来写。

[class*=”col-“] 
选择所有类名中含有”col-“的元素 
与此类似的还有： 
[class^=”col-“] 
选择所有类名中以”col-“开头的元素 
[class$=”-col”] 
选择所有类名中以”-col”结尾的元素

2、了解了box-sizing：

       用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型。可以使用此属性来模拟不正确支持CSS盒子模型规范的浏览器的行为。

有两个值：content-box。默认值，标准的盒子模型。

                  border-box。width和height属性包括内容，内边距和边框，但不包括外边距。

明天计划的事情：（一定要写非常细致的内容） 

完成栅格的布局，然后开始导航栏制作。

遇到的问题：（遇到什么困难，怎么解决的） 

在写导航栏的时候就出问题了。

我开始写导航栏，准备写在800px以下就转换成汉堡菜单，准备用display:none和block来转换，后面就发现在大于800px后，content就溢出了。

就变上图的样子，不知道是不是因为布局的问题导致的。

收获：（通过今天的学习，学到了什么知识）

了解了下栅格系统怎么用css来写的。

任务名称：CSS-task13

成果链接：https://guilinxi.github.io/GUI/task13/task13.html

任务耗时：本次任务从19.1.8-19.1.9 共耗时2天。

官方脑图：

个人脑图：

任务总结：

任务13基本上也是用less重新编写前面的任务7的三个页面。但是重写一遍的问题就在于用了新的插件，使用了html：font-size：625%的布局，就会出现一些因为rem单位导致的一些问题。前面没有碰到过的问题，在用less编写后不是设置了定宽，定高导致一些代码属性的影响，就是设置line-height后，会出现莫名的高度。

如：

我在给子级设置了font-size：13px后，父级就会有行高。如下图：

这里我没有设置宽高。不知道怎么有的，后面请教师兄，给父级设置同样的属性就能解决。
导致这个问题的原因是，inlin-block没有内容的时候，会根据font产生一个空白块。就是给子元素设置了display：inline-block，导致撑开了父元素的高度，，但是由于子元素没有人任何内容，那么父级元素就有各个浏览器下默认样式决定。受height/line-height/font-size的影响。
解决方案：给父级元素设置font-size：0，或者设相同的font大小。

涉及到两个知识点：
1、BFC（由显示的声明display：inline-block产生）。
2、各个浏览器的默认样式。

因为设置font-size：625%是为了方便计算rem单位，因为每个浏览器的默认字体大小不一致，故此设置html的字体大小为625%，这样换算下来，100px=1rem；

做这个任务的时候没有注意这是移动端页面，所以设置html为625后在UI图中还原出来的width和height是需要除以2的，因为做的是移动端页面，所以就需要换算成rem单位。

在做第一个页面的时候，出现了一个问题，因为我的宽度是用的百分比，但是因为没有定宽，就导致饿哦要给三角形设绝对定位的时候出现随着页面的移动，后面就用margin值来定左右的宽，解决了这个问题。

给这个简化版这个div设了margin值 ，然后在用绝对定位来固定三角形的位置。

问题都是能解决的，只是在解决的过程需要去理解为什么要这样做，所以现在也是在慢慢摸索。

时间上没有延期。