今天完成：

初步完成任务五；

了解浏览器最小字体大小；

了解了position定位的局限性；

了解了“蓝湖”设计图管理平台；

明天计划：

了解开始完成任务六

遇到的问题：

1、 子元素position设置relative，则容易因为定位偏移后内容超出预期宽度，在移动端容易产生横向滚动条；

设置absolute则无法撑起父容器高度，这个无解。

解决，使用替代方法，比如设置float、margin、padding实现类似效果。

如果不能通过设置宽高、或者不知道具体的宽高给父元素则尽量避免使用定位。

这个教训了我，不要习惯性的添加定位。

2、 使用透明opacity后，整个模块都透明了。

本意只想背景颜色透明。

       解决：使用css3的raba。

rgba括号中前3个数字代表着 red green blue三种颜色的rgb值，0-255，最后一个是设定这个颜色的透明度即alpha值。范围从0到1，越接近1，代表透明度越低。

3、 忘了将浏览器恢复至100%尺寸浏览，一直误认为网页元素尺寸不协调……

4、 定位时<header>标签由于fixed定位，被之后的元素穿过；

解决：设置padding-top,撑出一片高度。

收获：

1、 margin-top的百分比是相对于父元素的宽度；

top的百分比值是按离其最近的有定位属性的祖先元素的（内容高+padding）值来计算的；

2、button的字体样式只能定位到button设置；

3、通过photoshop扩展蓝湖插件可以查看各图层之间的距离；

蓝湖可以自动生成标注,与团队共享设计图,展示页面之间的跳转关系；

也可以通过蓝湖设置图片大小，作为网页布局的参考；

4、谷歌浏览器上显示字体最小为12px,css设置font-size:10px,显示的时候还是12px；

因为1rem = 16px*62.5%=10px，网页设计时可通过设置font-size:62.5%或font-size:625%方便编程时，rem与px的换算；

5、定位或网页布局时，思路不能局限于position，margin、padding、folat、position相结合，更为灵活方便，局限于一种属性容易走进死胡同。     

使用padding、margin也要注意想要作用的元素处于标准文档流还是非标准文档流，搞混了会无法达成预期效果。

6、在不严格限制高度时，可以通过设置padding、margin的方法实现视觉上的垂直居中；

另一种方法：

（1）给子元素的父元素添加相对定位属性，同时，要给子元素添加绝对定位属性。

（2）将子元素的top属性设置为50%。

（3）现在我们需要给img元素设置一个负的margin-top值，这个值为你想要实现垂直居中的元素高度的一半，

*如果不确定元素的高度，可以不使用margin-top，而是使用transform:translateY(-50%);属性。

如果你想要同时实现水平居中，可以用实现垂直居中的一样的技巧来实现。

7、 了解了CSS优先级计算

优先级、就近原则，同权重样式定义最近者为准

载入样式以最后载入的定位为准

优先级：

!important > id > class > tag > *(通配符)

8、对于margin、padding来说，设置竖向百分比却是以容器的宽度来计算；

9、响应式设计：集中创建页面的图片排版大小，可以智能的根据用户使用的设备环境（系统平台、屏幕尺寸、屏幕定向等）进行对应的布局。

基本原理：使用@media媒体查询，然后使用不同的CSS规则来实现屏幕的最佳布局。