今天完成的事：任务8的第一个页面；第2个页面；学习了锚点；margin负值；flex和bootstrap的混合使用；对列表的使用和记忆；

明天要完成的事情：完成任务8。

难题：任务8的难点不多；但是这个文字是什么情况？

师兄的解释了一下；连续特定的英文连在一起停止了换行；

后面修改页面1时图片是用padding固定的；所以页面缩小就像margin为负值一样盖在上面；

请教师兄：用居中；图片可以设最大宽度；要不然就切小一点；我试了一下感觉图片有点变形；不过整体效果不错；我ps绝对有问题；

之后又切了一遍图就解决了。。。。

算是打开了切图的新的大门。

之后又被页面2的英文卡住了；太长了不换行。。word-break:break-all;都没作用；

收获：

word-break:break-all 例如div宽400px，它的内容就会到400px自动换行，如果该行末端有个英文单词很长（congratulation等），它会把单词截断，变成该行末端为conra(congratulation的前端部分)，下一行为tulation（conguatulation）的后端部分了。

2，word-wrap:break-word 例子与上面一样，但区别就是它会把congratulation整个单词看成一个整体，如果该行末端宽度不够显示整个单词，它会自动把整个单词放到下一行，而不会把单词截断掉的。还有就是如果单词太长的话也会进行分割。

我遇到一个情况，就是我设置了：

word-break:break-all 或者word-wrap:break-word都无效，字符串不会自动换行。

经过查证，发现原因会有两个：

1、word-wrap对行内元素是没有效果的

2、一般情况下，元素拥有默认的white-space:normal（自动换行，不换行是white-space:nowrap），可能是元素中设置的white-space是norwrap导致，无法换行。所以需要

white-space:normal;

word-break:break-all;

这样问题就解决了。

white-space    对程序中的空白进行处理，默认是normal （浏览器会对空白进行忽略）