今天完成的事情：

1.学习了一下bootstrap框架，并且在任务6中配置了bootstrap，套用了bootstrap中的栅格布局

2.学习了将margin设置为负数所产生的效果

3.使用css模拟了下拉选框，制作出了任务6中的表头

4.完成了任务6并提交

明天计划的事情：

1.开始任务7

遇到的问题：

1.对bootstrap栅格布局中默认存在的margin和padding的作用不是很理解。

2.在用css模拟下拉选框时，下拉选框将下面的元素挤下去了，后来将下拉选框设置了position将其脱离文档流就好了。

3.在套用bootstrap栅格布局时，在最上层row设置了行高和高相等使文本垂直居中后，再在里面嵌套3个row，所嵌套的3个row会继承父级row的高和行高，然后这几个嵌套的row会挤出父级row，不知道有什么方法可以使嵌套的row高度自动适应父级row并且等分？后来是将嵌套row的行高和高都设为了父级row的1/3解决的。

4.设置屏幕缩小时文本隐藏，并且溢出文本使用“...”代替时，应该在直接嵌套文字的盒子里设置

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

如果在父级盒子设置会不起效果。

5.在body中设置宽度100vw时，将视窗切到电脑屏幕时会发现页面有一部分会被右边的垂直滚动条挡住，后来将body宽度设置为100%就解决了。

6.在引入bootstrap框架时，应该将自己定义的样式放在框架样式后面，不然框架样式会影响到自己定义的样式。

7.引入bootstrap后，使用viewport时应该这样写：<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> ，如果这样写：<meta name="viewport" content="width=device-width, initial-scale=1">，viewport会不起作用。

收获：

1.bootstrap

（1）配置bootstrap

下载bootstrap，在html中引入bootstrap.min.css，jquery.min.js，bootstrap.min.js这三个文件，就可以使用bootstrap框架了，注意：引入jquery.min.js一定要在引入bootstrap.min.js之前，因为后者对前者有依赖。

（2）bootstrap栅格布局

基本格式为：

一行宽度为12，上面代码中“12”表示一列占满一行的宽度，“xs”也可以是“sm”“md”“lg”,这是bootstrap中定义的一种媒体查询：

xs：extra small 特别窄屏幕，默认指浏览器像素宽度小于768px；

sm：small 窄屏幕，默认指浏览器像素宽度大于等于768px，通常是平板宽度；

md：middle 中等宽度屏幕，默认值指浏览器像素宽度大于等于992px，通常是桌面显示器，略缩小的情况；

lg：large 大屏幕，默认值指浏览器像素宽度大于等于1200px。

2.将margin-left设置为负数会将盒子往左移动，将margin-right设置为负数会使盒子右边的相邻内联盒子向左移动，而其自身不移动。

3.用display:none;，display:block和鼠标事件:hover可以模拟下拉选框。