今天完成的事情：

今天 上午的话就是，有点事，然后就没写，下午的时候看了grid栅格布局
明天计划的事情：

弄一下小课堂
遇到的问题：

，没有吧，就是不太会用

收获：

　1、table表格布局，通过 Dreamweaver 拖拽表格或者手写 table 标签布局

　　2、float浮动及position定位布局，借助元素元素盒模型本身的特性以及 float position 等属性等进行布局

　　3、flex弹性盒模型布局，革命性的突破，解决传统布局方案上的三大痛点 排列方向、对齐方式，自适应尺寸。是目前最为成熟和强大的布局方案

　　4、grid栅格布局，二维布局模块，具有强大的内容尺寸和定位能力，适合需要在两个维度上对齐内容的布局

　　Grid Layout 是一种基于二维网格的布局系统，旨在完全改变我们设计基于网格的用户界面的方式，弥补网页开发在二维布局能力上的缺陷

　　与flex分为伸缩容器和伸缩项目类似，grid也分为网格容器和网格项

这上面都是经常用的布局还有bootstarp栅格布局，

grid栅格布局，里面的网格线是什么鬼？

      今天也就是他那有一些东西，然后看了一点，然后就是没有写，但是看了一点，就是感觉比bootstrap的栅格布局好用很多，，今天的话就是没有做，

看的那个3D动画效果，但是和我想要的效果不太一样

还有bootstarp的栅格系统需要注意的事项

   1. 首先，栅格布局是将页面分为12列的，在不同的视口宽度之下，栅格布局的每一列的宽度应该是不一样的。从320一直到最大，分别是：col-xs-*，col-sm-*，col-md-*，还有col-lg-*，其中当我们的视口宽度>=768px的时候，我们的视口的宽度是使用col-sm，所以一般情况下我们只需使用col-sm即可，不需要再使用col-md-*。

   2.  当我们遇到在768px以上是左侧文字右侧图片或者右侧文字左侧图片，而768px以下是文字在上图片在下的设计图，我们就可以考虑用栅格布局的左右浮动属性，栅格布局的浮动属性是会随着视口的大小发生变化的，所以我们可以使用col-sm-pull-*左侧是使用push，右侧的使用pull，这样当视口宽度小于768的时候我们的栅格布局浮动就会结束了。

  3.  就是我们使用栅格布局的时候不要改变container的宽度，container的宽度是会随着视口的宽度大小进行适配的。我们的栅格布局外层分别要添加container>row两个标签，