今天完成的事情：

1.完成了任务3。

2.了解了居中的几种方式。

3.大概回顾了前几天学习的内容。

明天计划的事情：

1.开始写任务4。

遇到的问题：

解决了的问题就不算问题。

收获：（通过今天的学习，学到了什么知识）

1.大概明白css中单位px和em和rem的区别。

px：为像素单位。它是显示屏上显示的每一个小点，为显示的最小单位。它是一个绝对尺寸单位，是不能变动的；

em：它是描述相对于应用在当前元素的字体尺寸，所以它也是相对长度单位，可以变动。一般浏览器字体大小默认为16px，则2em == 32px；

rem：它是描述相对于当前根元素字体尺寸，除了描述对象与em不同其余都和em一样。

%： 百分比，它是一个更纯粹的相对长度单位，可以变动。它描述的是相对于父元素的百分比值。如50%，则为父元素的一半。

个人的理解是。px是绝对大小。他是多大就一直是多大。不会因为在不同设备上就改变大小。

em是相对大小。初始1em等于浏览器默认字体大小。并且em的值是会一直变动的，因为他会继承父元素字体的大小。

比如祖元素设置font-size：1em，则父元素字体大小为16px。在父元素中设置font-size:2em，则子元素字体大小为2*16px=32px。

rem则一直等于根元素字体的大小。em出现多重继承的时候字体大小会十分混乱。而用rem可以克服这一缺点。

如果图片的单位为rem，则可以通过改变根元素字体的大小而统一改变图片的大小。

浏览器的默认字体大小为16px。但谷歌浏览器有最小字体大小为12px。

设置font-size：6.25,则1rem=16*6.25=100px。改变图片单位的时候可以直接/100然后把px换成rem。

2.了解一般css书写顺序。

可以简记为位置大小、文字背景。

3.浏览css选择器、优先级和匹配原理。

没有详细理解。只记住important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符 通配符 > 继承 。

4.了解了viewport。

https://www.cnblogs.com/2050/p/3877280.html#

阅读本文后尝试理解了三个viewport。

总而言之就是为了使得各种设备满足ideal viewport（理想宽度）。

所以才有了

其中width=device-width（宽度等于设备宽度）即可满足。但是不兼容ie9，所以补充了

initial-scale=1.0（不允许对当前页面进行缩放，兼容ie9）

5.尝试了几种居中的方式。

1>

之前在父元素body中设置有position:relative。

这是第一次做完任务3给文字居中的方法。首先它是浮动的，不进标准文档流。

其实不算通过属性设置完成居中。而是给文字设定好宽度56.4%，left为21.8%，

则right=100%-56.4%-21.8%=21.8%。通过计算完成居中目的。

还有。left，right只能在设置绝对定位position后才能使用。

2>

此方法进入标准文档流。并且设置display：inline-block。

这里学到p标签是一个块元素。尽管进入标准文档流，但是块元素在margin-right没有填满时会默认自动填满。

所以要设置display：inline-block。此时他拥有块元素和行内元素的特性。

块元素可以设置长宽。行内元素不可以设置长宽。

（但是有些行内元素可以设置长宽。分为替代元素如img和不可替代元素如p）

直接设置宽度为56.4%，然后受父级元素设置的

达到居中效果。

这种方法要在子级里加入text-align：left，不然文字也会居中显示。

3.

此为margin:auto法。（父级元素没有设置text-align：center）

用这种方法不可以让div浮动。即必须进入标准文档流。且必须有宽度。（行内元素就不能使用了）

文中text-align：left多余。

此方法最好给块级元素使用。行内元素使用比较麻烦，可能会造成排版混乱。

4.display:table-cell法

先在父元素中display：table-cell，使父元素变为一个大的表格。

然后使子集居中

要求子级不是块级元素。键入display:inline-block。原因同2。

这种方法table-cell中margin设置无效，padding响应