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

1，多列布局中的全体布局，进行了学习

<div class="parent">

<div class="top">top</div>

<div class="middle">

<div class="left">left</div>

<div class="right">right</div>

</div>

<div class="bottom">bottom</div>

</div>

.parent{display:flex;flex-direction:column;}

.top{height:100px;}

.bottom{height:50px;}

.middle{flex:1;display:flex;}

.left{width:200px;}

.right{flex:1;overflow:auto;}

2，对bootstrap进行了学习，会引用样式，并进行修改样式了

3，对响应式设计，进行了初步了解

【响应式设计】

响应式Web设计是网站制作使用的一个叠层样式表( CSS3media queries)，结合流体网格适应各种布局，还可灵活使用图像。用户可跨越不同设备和浏览器的限制，访问相同内容，布局也利于阅读和浏览，只需细微的调整、平移或滚动。

【视口viewport】

<meta name="viewport" content="width=device-width, initial-scale=1.0">

【网格视图】

给人的感觉就是长长的纵列。

网格视图的特点就是比较突出图片，它主要适用于文字较少，主要展示图片的页面，还有就是层级比较明显的页面。

还有一个就是展示量大，不管在哪些屏幕下看到的内容都要比列表视图多得多。

* { box-sizing: border-box;}

【媒体查询】

媒体查询是向不同设备提供不同样式的一种不错方式，它为每种类型的用户提供了最佳的体验。

【响应式图像】

如果 width 属性设置为百分比，且高度设置为 "auto"，则图像将进行响应来放大或缩小：

img {  width: 100%;  height: auto;}

【响应式视频】

如果 width 属性设置为100％，则视频播放器将响应并放大和缩小：

video {width: 100%;height: auto;}

4，对网格方面进行初步了解

【网格布局模块】

提供了带有行和列的基于网格的布局系统，它使网页设计变得更加容易，而无需使用浮动和定位。

网格布局由一个父元素以及一个或多个子元素组成。

display 属性设置为 grid 或 inline-grid 时，它就会成为网格容器。

【网格容器】

grid-template-columns 属性定义网格布局中的列数，并可定义每列的宽度。

grid-template-rows 属性定义每列的高度。

justify-content 属性用于在容器内对齐整个网格。

align-content 属性用于垂直对齐容器内的整个网格。

【网格项目】

grid-column 属性定义将项目放置在哪一列上。

grid-row 属性定义了将项目放置在哪一行。

grid-area 属性可以用作 grid-row-start、grid-column-start、grid-row-end 和 grid-column-end 属性的简写属性。

5，task8首页做了大半部分

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

1，计划复习今天学过的知识点

2，计划继续搞task8

3，计划优化完成了的task，让师兄满意

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

1，对于元素较多，不规律的布局，不知如何下手，明天学删格系统尝试解

2，细节方面很不到位，做完的任务，反复修改，效果总是差了点

3，代码不规范，这个问题存在较长时间，明天得好好请教师兄

4，白天状态很散乱，晚上能集中注意力做任务，真的是很奇怪。。。

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

1，初步学会bootstrap

2，对响应式设计有初步了解

3，对网格方面有初步了解