【写在开头：日报权当笔记，如有错误请指正】

今日完成：

1.任务4登录页，还未通过TAT；

2.写了一张简单的静态页面；

明日计划：

1.继续完成jnshu的CSS任务

2.继续完成ife的CSS任务

3.坚持整理笔记

未解决的问题：

1.完成的task4页面在浏览器调试时没问题，但是在手机上打开后，从默认竖屏切换成横屏，水平方向会溢出并且不隐藏，然后出现滚动条。

【折腾了不知道多久，试过修改各种overflow、position、display属性，依旧无动于衷，快抓狂了(╯‵□′)╯︵┻━┻师兄救我！！！】

2.我明明是按照PSD量的尺寸，为什么看起来那么肥，官方展示页面很苗条的呢。

今日收获：

【理解单px,en,rem,%】

浏览器默认字体大小是16px即1em，

在写CSS的时候，需要注意：

1. body选择器中声明Font-size=62.5%；em值变为16px*0.625=10px=1em;

2. 将你的原来的px数值除以10，然后换上em作为单位；

3.em 单位可能受任何继承的父元素字体大小影响

EM特点:

1. em的值并不是固定的；

2. em会继承父级元素的字体大小。

rem（root em，根em）

rem为元素设定字体大小时，仍然是相对大小，但相对的是HTML根元素。

注意：

1.媒体查询中使用 rem 单位

2.不要在多列布局中使用 em 或 rem ,改用%。

【理解poison中relative，absolute，fixed特性】

1.relative相对定位：

相对于元素原始位置定位，未脱离文档流。

2.absolute绝对定位:

绝对定位元素直接从文档流中移出，绝对定位元素的位置直接和父容器是否设置了相对定位（绝对定位）有直接关系。绝对定位元素需要至少一个祖先元素设置了相对定位（绝对定位），不然元素定位会相对于页面的主体进行定位。

3.fixed固定定位：

相对于浏览器窗口，并且不会随滚动条进行滚动。

注意：

1.absolute跟fixed在不设置【明确】宽高的情况下，通过定位撑开容器。

如：同时设置【left=0;right=0;】元素会撑开水平方向。

2.可以通过z-index属性确定显示时的层级。

【理解overflow】

1.hidden

内容会被修剪，并且其余内容是不可见的。

2.auto

如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

3.scroll

一定出现滚动条，其他跟auto相同，暂时没发现区别。

4.inherit

规定应该从父元素继承 overflow 属性的值。

【overflow-x:对x轴方向做处理】

【overflow-y:对y轴方向做处理】

【理解overflow-wrap（这货用来设置文本的）】

1.默认值normal：允许内容溢出容器边界；

2.break-word：内容将在边界内换行；

【:after伪类+content两种使用技巧】

1.清除浮动

:after{

    display:block;

    content:" ";

    height:0;

    clear:both;

    overflow:hidden;

    visibility:hidden

  }

2.图片垂直居中

.pic img{

    vertical-align:middle;

  }

.pic:after{

    display:inline-block; 

    width:0; 

    height:100%; 

    content:" "; 

    vertical-align:middle; 

    overflow:hidden;

  }