我是老大钦点的外门弟子

【今天完成的事情】

因为一天只能提交一篇日报，所以打算把星期天和星期一的日报写到一起。

这两天做的事：还是回顾了之前的日报；模板创建了之后新建html和css文档很快。配置nginx都是每天做的事，所以也很快。ps cc里有快速导出png的功能，导出图片也很快。但是相对来说，对图片的命名比较慢。看了一篇公众号的文章，比较table和div+css布局。

【明天计划的事情】

做任务8.思考任务8里第一个页面每个布局的逻辑；以及从设计图里记录一些必要的高度宽度的值，当然记录也要合理考虑到不同的尺寸单位的运用。有些可以不用图片，印象中是可以用font-awesome，比如QQ、微信、微博的小logo，明天在font-awesome里找找它们的相对应。

【遇到的问题】

1、按照之前看的张鑫旭的博客，css是面向属性命名比较合适，那这些需要用到的图片的命名怎么样才比较合适呢？是不是按照psd设计图里的命名就好了呢？

2、1月17号任务4日报里分享了个网站zh.learnlayout.com。再看了一遍，现在对这个网站里面的东西比较能理解了。

3、1月21号任务4日报里的一些小纠结，比如关闭注册这两个字的高度是64px，而中间登录的高度是72px，当时不明白这两者怎么一起垂直居中。然后我今天想到vertical-align这个属性。就去MDN里看。（https://developer.mozilla.org/cn/docs/Web/CSS/vertical-align）。知道这个属性是有个基线来对齐的。

4、1月24号任务5日报提到的：设备像素是一个设备的物理像素，css是逻辑像素。这两个像素不是同一回事。这个留个印象。

5、1月30号任务5日报提到的，导出来的图片很大，把图片尺寸改了一半显示好像好一点，这个可能不太对。我现在的做法是，导出来多大就多大，计算这个图片相对于设计图宽度的一个百分比，然后在css里将图片宽度设置成这个百分比（或vw），然后再设置一个图片的最大值为图片的实际大小。这样可能好一点。包括后面有的日报提到的，还去除以2，我猜我当时的原因似乎是想让电脑端显示的图片跟移动端的设计图的大小看起来差不多大。就是没有按照它的实际大小，只是按照肉眼看起来的大小。

6、2月2号的日报提到知道iconfont的使用方法，现在要推翻这个想法，包括看后面几天日报就知道，其实还是没有学会用，就不能算知道这个方法。不过，倒是知道了一些font awesome的用法，而且也用起来了。

7、2月19号的日报老大提示的可以看看和学习浏览器缓存的知识。看到一个讲得很详细的。还挺有干货，也容易理解。分享一下（http://www.alloyteam.com/2012/03/web-cache-1-web-cache-overview/）。

【收获】

1、复习常用的display属性。每个元素都有默认的display值，可以重写，虽然有的时候会违背语义化的要求，但有的时候还是有必要的，比如把li元素改成inline就可以让列表变成水平的。

2、margin:0 auto可以水平居中，但是要设置一个宽度，而且最好是设置max-width，这样可以避免当浏览器窗口比元素宽度还要窄的时候，出现水平滚动条的情况。

3、有个新的属性，叫做box-sizing可以使得内边距和外边框不再增加宽度。需要加前缀-webkit-和-moz-，支持IE8+.

4、复习了position这个属性，之前不是很能理解，就直接用，现在稍微能理解一点啦。static是默认的值，表示的是，这个元素不会“被位置”，而其他的值就表明这个元素会“被位置”。relative这个值要做的事情是让一个元素通过四个方向上不同的值，偏离它原本处于的位置。并且，这个元素偏离了之后不会影响其他元素的位置。fixed会脱离文档流。absolute是相对于它的父元素来绝对定位，如果父元素没有position（position:static），则相对于文档的body元素。（不知道是不是这么理解，印象中实际做任务跟这个理解有一定偏差。所以明天开始试着做任务8的时候再试验一下）。

5、可以用inline-block达到float:left的效果，而且不用消除浮动。vertical-align 属性会影响到 inline-block元素；可能会把它的值设置为 top ；你需要设置每一列的宽度；如果HTML源代码中元素之间有空格，那么列与列之间会产生空隙。

【2月27日至3月5日的周报】

<这周完成的事>

果然像上周预计的一样，任务7又花了一段时间。这周也把之前几个任务进行了修改并提交审核。后面三天因为外出的原因，只是回顾了前面的日报以及通过搜索引擎来学一些东西。

<下周计划的事>

那这周开始如果任务7提交审核没有问题的话，就开始做任务8了。

<这周的收获>

1、通过用:check这个伪类，可以用纯css做一个遮罩来实现“是否关闭当前页面”的关闭功能。

2、虽然有点费时间和心思，但是通过翻英文的博客来学习这种方式体验挺好。

3、flex的垂直居中的原理虽然不是特别理解，但是暂时还能用,方法是：元素添加这段样式 {display: flex;align-items: center;justify-content: center;flex-direction: column;}；然后父元素添加这段 {display: flex;align-items: center;}。

4、学了transition和transform这两个属性。实现的功能是可以让元素更平滑地进行改变，而改变方式有旋转、移动、倾斜、和尺寸大小的改变。

5、学到了如果屏幕过窄时，设置文字被截断出现”…”省略号。实现的方法是设置强制不换行white-space:nowrap、设置over-flow:hidden、设置text-overflow:ellipsis。通过学习这个也知道了自动换行的写法:word-wrap:break word或者word-break:normal。

6、知道了一些什么叫做域（是网络运行中每一个独立的单位），什么叫做跨域（不同的域之间建立了信任关系之后就可以进行网络资源共享和管理），什么叫做同源策略（域名，协议，端口相同。浏览器执行javascript脚本时，会检查这个脚本属于哪个页面，如果不是同源页面，就不会被执行。这是为了避免别人做坏事盗取你的用户数据。）。知道了nginx作为第三方可以让另外两方的数据互传都能够安全地进行。

7、学到一个思想，可能是在重构网页的时候需要注意的，就是让代码变得更精炼简洁，以及具备拓展性、重用性。为了达到这个目标，学到了其中一个叫做宽度分离（一个元素里margin、padding和border不跟width并存，width设置到父元素里去，里面要怎么变化跟宽度无关。）；不设置固定的宽度值（看情况用各种尺寸单位，不用px）。