今日完成：

      任务十响应式布局完成。 

明日计划：

      1.用div focus 实现下拉框

      2.学习sass less基本概念以及同异点

今日遇到的问题：

     1.select里面的option里面的文字不能设置居中，需要自己制作下拉框

     2.transform中的scale视觉上时元素变小了，但是占据的位置是原来元素的大小。

今日收获：

  1.响应式的优缺点

    响应式网站是老外在2010年提出来的，是为了能让网页在不同设备下兼容多个终端，而不是为每个终端特定一种版本。
优点如下：
1.在不同设备下能有不同的页面排版，这也是响应式最大的优点，在分辨率不同，设备环境进行一些不同的设计，所有开发维护和运营上，相对多个版本成本会降低很多。
2.兼容性好，能在不同的设备下浏览。
3.方便后期维护页面，只需要对必要的页面进行修改，不会影响其他页面。
缺点如下：
1.页面加载过多的代码，当你在pc端加载的时候，css样式也会将手机端的冗余代码一块加载，这样就直接影响了加载速度。
2.在响应式设计中，图片和视频都是统一加载的，当你在设备低的手机上加载不符合当前需要的图片或者视频，就会过多的消耗用户的流量。
3.局限性，对于响应式，局限性较大，不适合一些大型的门户网或者电商网站，一般门户网或电商网站一个界面内容较多，而响应式最忌讳较多内容，代码过多会影响运行速度。

参考自李志林凡

2、外边距折叠问题

折叠的条件：两个元素的 margin 必须是 相邻 的；两个 margin 是邻接的必须满足以下条件：

      必须是处于常规文档流（非float和绝对定位）的块级盒子,并且处于同一个 BFC 当中。

     没有inline盒子，没有空隙，没有 padding 和 border 将他们分隔开。

      都属于垂直方向上相邻的外边距。

解决方法：
破坏产生折叠的条件即可：
   1、给元素添加浮动或者绝对定位（会影响整体布局，改动大）
   2、将元素改为行内元素（会影响整体布局，改动大）
   3、元素间插入一个高度大于0的div
   4、使元素不在同一BFC中

3.内核相关知识

    浏览器内核又可以分成两部分：渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。它负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。JS 引擎则是解析 Javascript 语言，执行 javascript 语言来实现网页的动态效果。最开始渲染引擎和 JS 引擎并没有区分的很明确，后来 JS 引擎越来越独立，内核就倾向于只指渲染引擎。有一个网页标准计划小组制作了一个 ACID 来测试引擎的兼容性和性能。内核的种类很多，如加上没什么人使用的非商业的免费内核，可能会有 10 多种，但是常见的浏览器内核可以分这四种：Trident、Gecko、Blink、Webkit。

1、IE浏览器内核：Trident内核，也是俗称的IE内核；

2、Chrome浏览器内核：统称为Chromium内核或Chrome内核，以前是Webkit内核，现在是Blink内核；

3、Firefox浏览器内核：Gecko内核，俗称Firefox内核；

4、Safari浏览器内核：Webkit内核；

5、Opera浏览器内核：最初是自己的Presto内核，后来加入谷歌大军，从Webkit又到了Blink内核；

6、360浏览器、猎豹浏览器内核：IE+Chrome双内核；

7、搜狗、遨游、QQ浏览器内核：Trident（兼容模式）+Webkit（高速模式）；

8、百度浏览器、世界之窗内核：IE内核；

参考自博主summer_15 https://blog.csdn.net/summer_15/article/details/71249203

进度：CSS-任务10

开始时间：2018.06.09

结束时间：2018.06.11

有无延期风险： 有。

禅道：http://task.jnshu.com/zentao/my/