今天完成的任务

任务8第三给页面的完成

b.拓展知识

明天的计划

a.任务8的全部完成

b.深度思考

c.拓展知识

遇到的问题

a.在main里的排头2个边框线的问题：因为套用的container类，所以列row-1的宽度过长，跟psd图里的长图排版不一样，很烦，去掉套用的container类的话，重新写一个定义类又太麻烦，后来想了一下给加了一个winth:clac (100% - 1.4rem)的属性，强行减去它的长度（后面2个列也是这样用的)。

b.做前端工程师框架的时候，也是psd版面和我写的版面实际尺寸不一样（总的来说就是我的宽度不够，而且比列边距也不对，造成的差异，不过总体的布局还是一样的）没有办法，只有稍微修改了一下页面的宽高数据（因为宽度不够所以p的里面的字多排了1行，所以高度也要加)

c.在代码编程器里的代码复制时，样式格式会稍微后退一个tab的距离，修改有点繁琐（特别是复制几百行的代码时候)，别人给的建议是编码器有一个shift+alt+f 的格式化文件可以解決，使用下，挺管用的。

收获

关于word-break和word-wrap的使用和区别

关键原因:中文是一个字就是一个单词，而英文字母要有一个空格才将他们分割为一个单词.

有时间会出现英文字母的部分把盒子模型撑的不像样，原因其实很简单就是我上面说的，它们把英文字母当作了一个单词，不会有换行操作。

word-break和word-wrap，把这两个元素的其中一个用于包含它们的标签就能解决这个问题。

定义：

word-wrap 属性用来标明是否允许浏览器在单词内进行断句，这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象。

word-break 属性用来标明怎么样进行单词内的断句。

语法：   word-wrap: normal|break-word;

　　　　word-break: normal|break-all|keep-all;

区别：

word-wrap:

哈哈 tidasd dsadas dsa dsa

dsadasdassdasdasdasdasdasdasdasd

word-break:

哈哈 tidasd dsadas dsa dsadsadasdass

dasdasdasdasdasdasdasd

根据上面可以看出长单词在word-wrap作用下换到下一行，后面可以正常换行；

在word-break作用下利用了上一行没有用完的空间。