[上海|荣耀师兄]JS-陈杰|2018年10月18日的日报-技能树.IT修真院

发表于： 2018-10-18 17:53:12

1 693

今天完成的事情:

提交任务10 11 12

明天计划的事情:

完成任务13，初步分解任务14，15

尝试不用bs做轮播图和sass写出栅格

解决方法

收获:

元素后代选择器

p~ul 选择前面有 <p> 元素的每个 <ul> 元素。

“~”的定义和用法

　　p~ul选择器 p之后出现的所有ul。

　　两种元素必须拥有相同的父元素，但是 ul不必直接紧随 p。

css中“>”是css3特有的选择器，A>B 表示选择A元素的所有子B元素。

　　与A B的区别在于，A B选择所有后代元素，而A>B只选择一代。

.a，.b｛逗号指相同的css样式｝；

.a .b｛空格指后代元素｝；

.a>.b｛大于号指子代元素｝；

.a+.b｛这个“+”是选择相邻兄弟，叫做“相邻兄弟选择器”

　　如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器(Adjacent sibling selector)。

　　例如，如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：

　　h1 + p {margin-top:50px;}

　　这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。｝；

---------------------

一、div+css布局的好处：

1.符合W3C标准，代码结构清晰明了，结构、样式和行为分离，带来足够好的可维护性。

2.布局精准，网站版面布局修改简单。

3.加快了页面的加载速度（最重要的）（在IE中要将整个table加载完了才显示内容）。

4.节约站点所占的空间和站点的流量。

5.用只包含结构化内容的HTML代替嵌套的标签，提高另外搜索引擎对网页的搜索效率。

二、table布局的好处（table布局也不是一点用的没有，这点是毋庸置疑的）

1.容易上手。

2.可以形成复杂的变化，简单快速。

3.表现上更加“严谨”，在不同浏览器中都能得到很好的兼容。

---------------------

~什么是外边距重叠

1.两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。也就是说当第一个div的margin-bottom与第二个div的margin-top都为正数时，它们会自动合成一个单独的外边距，取它们中间比较大的，此时的margin值为20，只要第二div的margin-top小于20，margin值就为20。

2.两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。也就是说当第一个div的margin-bottom与第二个div的margin-top都为负数时，它们会自动合成一个单独的外边距，取它们中间绝对值比较大的，此时的margin值为-20，只要第二div的margin-top绝对值小于20，margin值就为-20。

3.两个外边距一正一负时，折叠结果是两者的相加的和。也就是说当第一个div的margin-bottom与第二个div的margin-top为一正数一负数时，它们会自动合成一个单独的外边距，取它们两者的相加的和，此时的margin值为30。

~~~了解下什么是主流内核

（1）浏览器最重要或者说最核心的部分是“Rendering Engine”，可大概译为“渲染引擎”，不过我们一般习惯将之称为“浏览器内核”。负责对网页语法的解释并渲染网页。所以，通常所谓的浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。
（2）浏览器内核对于浏览器而言，是基础，是依托。如果没有了浏览器内核，那么浏览器是无法独立存在且产生作用的。它的存在，决定了网页的呈现的内容、格式以及效果。所以说，一个好的浏览器，一定是基于有一个稳定、高端、作用明显的浏览器内核的。
回到我们的主题：四大浏览器内核（目前主流的四大浏览器内核有Trident、Gecko、WebKit和Presto）。下面，我将依次介绍这些内核。
1.Trident/IE内核：该内核程序在1997年的IE4中首次被采用，是微软在Mosaic代码的基础之上修改而来的，并沿用到IE11，也被普遍称作”IE内核”。Trident实际上是一款开放的内核，其接口内核设计的相当成熟，因此才有许多采用IE内核而非IE的浏览器(壳浏览器)涌现。由于IE本身的“垄断性”（虽然名义上IE并非垄断，但实际上，特别是从Windows 95年代一直到XP初期，就市场占有率来说IE的确借助Windows的东风处于“垄断”的地位）而使得Trident内核的长期一家独大，微软很长时间都并没有更新Trident内核，这也导致了后面的两个后果：一是Trident内核曾经几乎与W3C标准脱节（2005年）二是Trident内核的大量 Bug等安全性问题没有得到及时解决，然后加上一些致力于开源的开发者和一些学者们公开自己认为IE浏览器不安全的观点，也有很多用户转向了其他浏览器，Firefox和Opera就是这个时候兴起的。
Trident内核的常见浏览器有：IE6、IE7、IE8（Trident 4.0）、IE9（Trident 5.0）、IE10（Trident 6.0）、2345浏览器、腾讯TT、淘宝浏览器、阿云浏览器（早期版本）、瑞星安全浏览器、蚂蚁浏览器、飞腾浏览器、速达浏览器、佐罗浏览器、海豚浏览器等等
2.Gecko/Firefox内核：Netscape6开始采用的内核，后来的Mozilla FireFox(火狐浏览器) 也采用了该内核，Gecko的特点是代码完全公开，因此，其可开发程度很高，全世界的程序员都可以为其编写代码，增加功能。因为这是个开源内核，因此受到许多人的青睐，Gecko内核的浏览器也很多，这也是Gecko内核虽然年轻但市场占有率能够迅速提高的重要原因。事实上，Gecko引擎的由来跟IE不无关系，前面说过IE没有使用W3C的标准，这导致了微软内部一些开发人员的不满；他们与当时已经停止更新了的 Netscape的一些员工一起创办了Mozilla，以当时的Mosaic内核为基础重新编写内核，于是开发出了Gecko。不过事实上，Gecko 内核的浏览器仍然还是Firefox (火狐) 用户最多，所以有时也会被称为Firefox内核。Gecko核心设计的相对成熟，在无法获取源码的情况下，开放程度仅次于IE。由于其本身Open Source。实际上是目前开发程度最好的浏览器。Firefox的扩展能够给浏览者带来完全不同的浏览体验。市面上Gecko内核的浏览器主要分两类，一类是以Mozilla Firefox为代表的，用XUL作为界面描述语言的浏览器：这类浏览器往往继承了Firefox扩展性好的优点，早前的Madfox和Albatross就是这一类型的浏览器。所以，Gecko内核也被称为Firefox内核。
Gecko内核常见的浏览器： Mozilla Firefox、Mozilla SeaMonkey、waterfox（Firefox的64位开源版）、Iceweasel、Epiphany（早期版本）、Flock（早期版本）等等
3.WebKit内核：Webkit(Safari内核,Chrome内核原型,开源):它是苹果公司自己的内核，也是苹果的Safari浏览器使用的内核。 Webkit引擎包含WebCore排版引擎及JavaScriptCore解析引擎，均是从KDE的KHTML及KJS引擎衍生而来，它们都是自由软件，在GPL条约下授权，同时支持BSD系统的开发。WebKit 内核在手机上的应用也十分广泛，例如 Google 的手机 Gphone、 Apple 的 iPhone, Nokia’s Series 60 browser 等所使用的 Browser 内核引擎，都是基于 WebKit。2003年，Apple 宣布发布首款他们自主开发的 web 浏览器：Safari。它的呈现引擎叫 WebKit。它是 Linux 中的 web 浏览器 Konqueror 呈现引擎 KHTML 的一个分支，几年后，WebKit 的开源吸引了呈现引擎的开发人员。根据最新的浏览器调查表明，该浏览器的市场甚至已经超过了Opera的Presto了——当然这一方面得益于苹果转到x86架构之后的人气暴涨，另外也是因为Safari 3终于推出了Windows版的缘故吧。Google Chrome、360极速浏览器以及搜狗高速浏览器高速模式也使用Webkit作为内核(在脚本理解方面，Chrome使用自己研发的V8引擎)。WebKit 内核在手机上的应用也十分广泛，例如 Google 的手机 Gphone、 Apple 的iPhone， Nokia’s Series 60 browser 等所使用的 Browser 内核引擎，都是基于 WebKit。
WebKit内核常见的浏览器：傲游浏览器3、[1] Apple Safari (Win/Mac/iPhone/iPad)、Symbian手机浏览器、Android 默认浏览器，
4.Presto内核：Presto是一个由Opera Software开发的浏览器排版引擎，供Opera 7.0及以上使用。该款引擎的特点就是渲染速度的优化达到了极致，也是目前公认网页浏览速度最快的浏览器内核，然而代价是牺牲了网页的兼容性。实际上它是一个动态内核，与其它几个内核的最大的区别就在脚本处理上，Presto有着天生的优势，页面的全部或者部分都能够在回应脚本事件时等情况下被重新解析。此外该内核在执行Javascrīpt的时候有着最快的速度，根据在同等条件下的测试，Presto内核执行同等Javascrīpt所需的时间仅有Trident和Gecko内核的约1/3（Trident内核最慢，不过两者相差没有多大）。由于Presto是商业引擎，使用Presto的除开Opera以外，只剩下NDSBrowser、Wii Internet Channle、Nokia 770网络浏览器等，这很大程度上限制了Presto的发展。