Day 22

过年回家，重构环境

今天完成的事情

      1.重做任务一，使用clear清除浮动影响

      2.重做任务五，将背景图片分解为细节部分进行布局

遇到的问题

      1.添加背景图片后，图片模糊

通过设置图片属性来实现自适应页面窗口

background-image: url(背景.png);
background-repeat: no-repeat;
background-size: 100% 100%;

      2.个人信息部分很久都理不出思路，排版一直不能达到理想效果

去日报找到一位师兄的代码库，尝试使用span标签进行布局

       随即发现对其设置margin.padding无效，

       设置如下，使其具有块级元素属性

    display: inline-block;

      3.将图片放在div内会被padding影响，且不能在底部。提出div外，却发现与div产生了一段空隙，而开发者工具显示图片高度为0

 解决办法，将图片提出div外并设置

display: block;

     4.text-aligin突然居中失效，撤回了很多操作但没有找到是哪一步出了问题

     图片明明设置了

c
background-size: 100% 100%;

突然也不能自适应了

c

给“个人主页”设置了50%的padding-left然后发现padding已经超出了页面

检查后发现html及body的宽度并未达到100%，不明白，不是已经设置了吗

解决：更改了meta自适应标签 蠢

       5.想不通怎么能设置在一定区域内自动换行

看到有师兄用calc函数属性calc(100% - xxrem)，宽度最终随屏幕宽变化。

但是我的webstorm好像没有width:cala()这个属性，所以没有用.....

尝试了另外一种办法，即将其设置为行内元素并设置宽度，但可见分隔符下移且缩小窗口到一定程度后文字块也会下移。

收获

      1.使用clear清除浮动

      2.学会background-image及其他属性

      3.图片基线与底线间有一段空白，解决办法

给图片img标签设置display：block；或者是vertical-align

定义容器字体大小font-size：0；

明天计划学习

      1.继续完成任务五

      2.看看雪碧图

      3.尽快开始任务六，新年浪费了很多时间