如何利用PS切图以及从UI图中获取所需信息？

使用ps里的切图工具

px、em、rem、%、vw、wh、vm等单位有什么区别？

主要区别（其他详细在收获）：绝对值和相对值的区别

绝对值：

将文本设置为指定的大小

不允许用户在所有浏览器中改变文本大小（不利于可用性）

绝对大小在确定了输出的物理尺寸时很有用

相对大小：

相对于周围的元素来设置大小

允许用户在浏览器改变文本大小

注意：如果您没有规定字体大小，普通文本（比如段落）的默认大小是 16 像素 (16px=1em)。

css有哪些选择器，优先级如何计算？

important>内联>ID>类>标签|伪签|属性选择>伪对象>通配符 通配符>继承（有个i-c-e计算法）(其它看收获）

b.inline-block与float的半深入学习

明天的计划

a.flex知识点的学习

b.任务4的深度思考

遇到的问题

在margin和padding问题的时候，还是有点吃不透，虽然资料有demo辅助了解，感觉还是要多看几遍

收获

px；em;rem;%的单位背景（字数太长就不打了把反正了解一下）：

4个属性的使用准则：

（1）尽量使用相对尺寸单位

使用相对尺寸单位计量，则在调整页面的布局的时候，不需要遍历所有的内部DOM结构，重新设置内部子元素的尺寸大小，同时它也能更好的适应与多中分辨率和屏幕终端。

对于相对尺寸单位的设置：em和%因为它们相对的参考物不同，所以它们也有不同的使用场景。如果希望随着当前元素的字体尺寸而改变尺寸，则使用em最佳，如：行高、字体大小。相反，如果是随着父容器或者是整体页面布局而改变尺寸，则使用%更好，如元素的高度和宽度设置。

（2）字体尺寸尽量使用em、rem

和尽量使用相对尺寸单位一样，为了字体大小的可维护性和伸缩性，W3C更推荐使用em作为字体尺寸单位。需要注意的是，如果存在3层以及3层以上的字体相对尺寸的设置，则对于实际字体大小的计算，就会变得相对麻烦。这个时候，在满足浏览器兼容性的情况下，可以考虑使用CSS3的新特性rem：根据固定根元素的字体大小来设置相对尺寸大小，这也是近几年移动APP所兴起的使用方式

vh和vw的相关知识：vh和vw相对于视口的高度和宽度，而不是父元素的（CSS百分比是相对于包含它的最近的父元素的高度和宽度） 1vh 等于1/100的视口高度，1vw 等于1/100的视口宽度 比如：浏览器高度900px，宽度为750px, 1 vh = 900px/100 = 9 px，1vw = 750px/100 = 7.5 px。 很容易实现与同屏幕等高的框： 设置一个和屏幕同宽的标题，那标题的字体大小就会自动根据浏览器的宽度进行缩放，以达到字体和viewport大小同步的效果。（额外知识：vmin and vmax：关于视口高度和宽度两者的最小值或者最大值。）

Font-size=62.5%这就使em值变为16px*62.5%=10px。这样1em=10px，1.2em（rem)=12px利于我们进行换算。(谷歌浏览器强制最小字体为12号，即使设置成 10px 最终都会显示成 12px，当把html的font-size设置成10px,子节点rem的计算还是以12px为基准。)

font-size 值可以是绝对或相对值。

其他：

css的长度单位：

em:相对父元素字体大小

ex:相对小写字母“x"的高度

gd: 一般用在东亚字体排版上，这个与英文并无关系

rem:相对根元素字体大小

vw：相对于视窗的宽度:视窗宽度是100vw

vh：相对于视窗的高度：视窗高度是100vh

vm:相对于视窗的宽度或者高度，取决于哪个更小

ch:相对于0尺寸

px:相当于屏幕分辨率而不是视窗大小；通常为1个点或者1/72英寸

in:inch.表英寸

cm：centimeter，表厘米

mm：millimeter,表厘米

pt:1/72英寸 绝对长度单位。点（Point） 绝对长度单位。

pc:12点活字，或者1/12点 绝对长度单位，派卡（Pica）。相当于我国新四号铅字的尺寸。1in = 2.54cm = 25.4 mm = 72pt = 6pc

%：相对于父元素。正常情况下是通过属性定义自身或者其他元素。

css选择器优先级计算

important>内联>ID>类>标签|伪签|属性选择>伪对象>通配符 通配符>继承

特指度（specificity）： 特指度表示一个css选择器表达式的重要程度，可以通过一个公式来计算出一个数值，数越大，越重要。

这个计算叫做“I-C-E”计算公式：

I —— Id；

C —— Class；

E —— Element；

即，针对一个css选择器表达式，遇到一个id就往特指度数值中加100，遇到一个class就往特指度数值中加10，遇到一个element就往特指度数值中加1。

CSS选择器表达式   特指度计算结果

p                    1

p .large               11

P #large               101

div p #large            102

div p #large ul .list      113

div p #large ul .list li    114

（特列：!important优先级最高，高于上面一切。* 选择器最低，低于一切。（非继承情况下）根据特指度计算公式计算，哪个的计算结果大，浏览器就会以哪个为优）

拓展分析：

简单分析方法

规则一：包含ID的选择器胜过包含Class的选择器，包含Class的选择器胜过包含元素的选择器；例如下图，第一个特指度更高（虽然根据“就近原则”后边定义的样式会覆盖前边的一样，但是从例子可以看出选择器”特指度“权重更大）：

规则二：不同选择器的特指度比较时，不区分加载的顺序（相同选择器在层叠时，后加载的覆盖前加载的）

规则三：设置的样式高于继承的样式，不用考虑特指度。

margin和padding的深入：

区别：

margin与padding的区别

区别一：pdding能增加元素的容器的可视区域，margin则会减少默认块级元素的可视区域

区别二：margin有负值，padding不能使用负值。

margin和padding的拓展：

未使用绝对定位（固定定位）的元素内外边距的%值都是继承父级盒子，如果是绝对定位(固定定位)则是根据其继承关系的定位元素，没有就是根据html元素为基准

关于margin负值，padding不能负值

总结：这几天主要时间都用来看这些用过但是没有深入了解的知识点了，感觉吧没深入之前知识单纯的知道这个地方做这个效果用这个代码，现在了解后有些明白原理了。

就是比如我要做一个九宫格的代码demo，我以前只是大概明白要用到div然后边做边查资料来不填这个div；现在就是做之前就有了一个大概的构筑：这个九宫格具有哪些属性，要用到那些代码，然后怎么样进行填充这9个div让它达到我想的效果（大概就是这种感觉）

float与inline-block就明天日报写吧，偷个懒，昨天喝到了不好的东西，今天拉稀一天，还没胃口，没精神一天