今天完成的事：css的深度思考；js的预习；继续理解组件库；

明天要完成的事情：学习任务13-14js的预习；并对js任务1有个了解；

难题：今天主要是看理论知识没遇到什么难题；师兄昨天说的双飞燕 圣杯这些基本是margin的负值的作用；

但是今天自己看了一下自己的代码又花了2个小时缩减；真可怕；

明天估计需要师兄帮我看下；还能继续缩

收获：早上到公司把日报打开就看到散修师弟的任务提交；看了一下把错误的地方写出来让他修改；并告诉他还原UI图是最基本的操作；让我也反省了一下自己还原ui图；还有一些最基本的功能；以及UI图里一些细节的地方多看看多注意；只有写之前都有个思路；写起来才不会磕磕盼盼；

 对昨天的进行补充：

垂直居中：

1.position：absolute：在有高度和宽度时top和bottom为0；并不会拉伸只会居中；left和right也是一样的；（即设定高宽即可绝对定位居中；记得加margin：auto；）

position:relative：没有脱离文档流仍坚守着它原来占据的空间；

2.flexbox的align-item：center和align-self：center的区别：align-item是给容器设置的；整个容器全部居中；而align-self：center是给自己设置的只有自己居中；

3.父元素line-height=height时：子元素加一个vertical-align：middle可实现居中；但要注意line-height有继承性；需在子元素中line-height：1；且子元素是display：inline-block；非块元素；

4.父元素flexbox的子元素居中：margin：auto；如果只要水平或者垂直在auto前后加0就好了；

对列表的运用：增加对自定义列表的使用

浏览器和浏览器内核的相关概念：

一、浏览器

什么是浏览器？即展示网页内容的一个“工具”或软件，包含文字、图片及其他信息，通常是通过URL获取及解析HTML及Js。

（简单来说帮助你通过路径访问网页的软件）

浏览器结构

浏览器的主要组件包含：

1. 用户界面层：展示页面窗口及其他操作工具按钮和工具条。
2. 浏览器引擎：用来查询和操作渲染引擎的接口。
3. 渲染引擎：也称为排班引擎，用来显示请求的内容，包含HTML和CSS。我们一般习惯称之为“浏览器内核”。
4. 网络层：用来完成网络调用。
5. UI后端层：用来绘制类似组合选择框及对话框等基本组件。
6. Js解释器：用来解释执行Js代码。
7. 数据存储层：cookie等数据。

渲染引擎一般的基本渲染过程为：

1. 解析HTML文档转换为DOM树
2. 解析CSS渲染树（用于渲染DOM树，包含带有颜色、尺寸等显示属性的顺序矩形）
3. 对渲染树的每个节点进行布局处理
4. 遍历渲染树并用UI后端层将每一个节点绘制出来

以上渲染过程只是渲染引擎的一般处理过程，而每种不同的渲染引擎的具体步骤可能有所不同。
Js引擎，也存在不同的兼容性问题。
总得来说，浏览器网页的兼容性问题，需要留意以下几个层面：
- HTML标准：不同的浏览器或浏览器版本，可能会遵循自己的Web（HTML）标准，或者适用于不同的HTML标准（如HTML 1，2等）。需要衡量、选择可支持的浏览器、或浏览器版本，或者采取响应式/通用框架来做适配。
- CSS标准：不同的浏览器解析CSS都有一点出入，特别是padding、line-height这些要细微控制的地方。这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。（这个针对不同的浏览器写不同的CSS code的过程，就叫CSS hack，也叫写CSS hack。）
- Js标准：某些Js方法在不同浏览器下是不兼容的，
- 屏幕尺寸：不同尺寸需要进行处理。
- 移动端（手机/平板）兼容：不同机型需要处理。

（这一段我只粗略地看了一下有空可以多看看）：https://www.jianshu.com/p/b6a893cc1b0c

css hack ：https://blog.csdn.net/freshlover/article/details/12132801

什么是CSS hack

由于不同厂商的流览器或某浏览器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），对CSS的支持、解析不一样，导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时，我们为了获得统一的页面效果，就需要针对不同的浏览器或不同版本写特定的CSS样式，我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程，叫做CSS hack!

CSS hack的原理

由于不同的浏览器和浏览器各版本对CSS的支持及解析结果不一样，以及CSS优先级对浏览器展现效果的影响，我们可以据此针对不同的浏览器情景来应用不同的CSS。

这个是js的时候看的；看的不是很理解；大概原理和原因倒是知道了

（因为微软浏览器的内核不符合w3标准等情况出现了很多其他的渲染内核；同时微软感觉到压力更新自家内核使其慢慢符合w3标准而大势已去；每种内核其根据css或js渲染画面的方式和标准各不相同因此需要使其兼容才能在各个浏览器上显示一样的页面；）

margin负值的作用和详解：

当非浮动、非定位元素的margin-top/margin-left被赋予负值时，元素将被拉进指定的方向。但这种偏移不同于相对定位，通过相对定位偏移后，其仍然会坚守着它原来占据的空间，不会让文档流的其它元素乘虚而入。而通过负边距进行偏移的元素，它会放弃偏移前占据的空间，这样它后面文档流中的其它元素就会“流”过来填充这部分空间。

（有设置宽度时；margin-top和margin-left为margin负值时元素元素会向指定方向移动其后面文档流的元素就会上来填充 ；但如果你设置margin-bottom/right为负数，元素并不会如你所想的那样向下/右移动，而是将后续的元素拖拉进来，覆盖本来的元素。

如果没有设定width属性，设定负margin-left/right会将元素拖向对应的方向，并增加宽度，此时的margin的作用就像padding一样。）

轮播图：动画做：用vw做单位加上动画即可；可实现自动播放的效果；

js:https://v.qq.com/x/page/e0921gvifj6.html?pcsharecode=BbhAMeW0