1:主流浏览器的内核分别是什么？

IE：trident内核 [‘traidnt ]

Firefox：gecko 内核 [ˈɡekəʊ]

Safari：webkit 内核

Chrome,Opera：Blink内核(基于webkit)  

声明位于文档中的最前面的位置，此标签告知浏览器文档使用哪种HTML或XHTMl规范（重点：告诉浏览器按照何种规范解析页面）

严格模式下：页面排版及 JS 解析是以该浏览器支持的最高标准来执行

混杂模式：不严格按照标准执行，主要用来兼容旧的浏览器，向后兼容

不存在或格式不正确会导致文档以混杂模式呈现

（1）div+css布局的好处：

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

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

c.加快了页面的加载速度（最重要的）。

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

a.容易上手。

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

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

alt属性:在图片无法加载的时候才会显示的其值,

title属性:在图片正常加载鼠标划上去显示的值

strong:粗体强调标签，强调，表示内容的重要性

em:斜体强调标签，更强烈强调，表示内容的强调点

渐进增强（progressive enhancement） [prəu'ɡresiv][ɪnˈhɑːnsmənt]

：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级( graceful degradation)[ˈɡreɪsfl ,deɡrəˈdeɪʃn]：一开始就构建完整的功能，然后再针对低版本浏览器进

行兼容。

渐进增强的观点关注内容本身

优雅降级的观点更关注主流浏览器，一些特定的浏览器，除修复较大的错误外，其他的差异将会被直接忽略

网页标准的制定，使得web发展的更健康，提高网站的易用性。

a、开发者遵循统一的标准，降低了开发难度和开发成本

b、SEO优化网页也会更加方便，不会因为滥用代码出现各种bug和安全问题。

src 用于替换当前元素，href 用于在当前文档和引用资源之间确立联系。

Src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在的位置。例如：js脚本，img图片，frame等。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，这也是为什么将js 脚本放在底部而不是头部。

href 是 Hypertext Reference 的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用 link 方式来加载 css，而不是使用@import 方式。

 Png,jpeg,gif,svg,webp

webp格式：谷歌开发的新的图片格式，体积小，质量好，但兼容性略差

微格式（Microformats）是建立在已有的、被广泛采用的标准基础之上的一组简单的、开放的数据格式

作用：

a、在捉取Web内容时，能够更为准确地识别内容块的语义；

b、对内容进行操作，包括提供访问、校对，还可以将其转化成其他的相关格式，提供给外部程序和Web服务使用。

应用例子：

当用手机浏览某公司的网站时，手机浏览器识别出了网页中的 hCard 信息。这个 hCard 标记了该公司的多种联络方式，手机浏览器很聪明地提示我“是否保存到通讯录”，于是我很经松地保存了我所需要的信息

DNS缓存，CDN缓存，客户端(浏览器缓存)，服务器缓存

DNS缓存是指在正常访问ip之后，系统会将这个ip存储起来，当再次访问的时候，系统就会把本地的DNS缓存提取显示，等于是加速了网址的解析。

CDN是Content Delivery NetWork的简称，即‘内容分发网络'的意思，主要用于分地域的集群服务器，当用户浏览网站请求数据时，CDN会选择一个离用户最近的CDN边缘节点来响应用户的请求。

服务器缓存就是存放频繁访问内容的服务器。

a. 图片懒加载，滚动到相应位置才加载图片。

b. 图片预加载，如果为幻灯片、相册等，将当前展示图片的前一张和后一张优先下载。

c. 使用CSSsprite，SVGsprite，Iconfont、Base64等技术，如果图片为css图片的话。

d. 如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。

A:在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构:裸奔时也好看；

B:用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用；

C:有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；

D:方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备），更好的方式来渲染网页；

E:便于团队开发和维护，语义化更具可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

(1).维护网站，提高内容质量，保持更新

(2).网站结构布局优化：尽量简单、开门见山，提倡扁平化结构。

(3).控制首页链接数量,要适中

(4).导航优化：

a:尽量采用文字方式

b:搭配图片导航，但是图片代码一定要进行优化，img标签必须添加“alt”和“title”属性

c:应该加上面包屑导航

(5).控制页面的大小:减少http请求，提高网站的加载速度

(6).适量的关键词和网页描述

title标题，强调重点即可，

meta keywords标签：关键词，列重要关键字即可

meta description标签：网页描述，要高度概括

body中的标签：尽量让代码语义化

a标签：页内链接，要加 “title” 属性加以说明

img应使用 “alt” 属性加以说明

strong、em标签 : 需要强调时使用

巧妙利用CSS布局

谨慎使用 display：none

保留文字效果

A:外部样式表，引入一个外部 css 文件

B:内部样式表，将 css 代码放在 标签内部，里 

C:内联样式，将 css 样式直接定义在 HTML 元素内部

选择器类型

(1)、ID　　#id

(2)、class　　.class

(3)、标签　　p

(4)、通用　　*

(5)、属性　　[type="text"]

(6)、伪类　　a: hover

(7)、伪元素　　li: nth - child

(8)、子选择器（ul < li） 、相邻选择器（h1 + p）、后代选择器（li a）

权重计算规则

一般而言，选择器越特殊，它的优先级越高。也就是选择器指向的越准确，它的优先级就越高。

!important 比 内联优先级高

(1). 第一等：代表内联样式，如: style=””，权值为1000。

(2). 第二等：代表ID选择器，如：#content，权值为0100。

(3). 第三等：代表类，伪类和属性选择器，如.content，权值为0010。

(4). 第四等：代表标签和伪元素选择器，如div p，权值为0001。

(5). 通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。

(6). 继承的样式没有权值。

(7).相同权重

优先级就近原则，样式定义最近者为准,载入样式以最后载入的定位为准;

继承性

可继承： font-size font-family color;

不可继承 ：border padding margin width height ;

CSS3 新增伪类举例：

p:first-of-type 选择属于其父元素的首个

元素的每个

元素。

p:last-of-type 选择属于其父元素的最后

元素的每个

元素。

p:only-of-type 选择属于其父元素唯一的

元素的每个

元素。

p:only-child 选择属于其父元素的唯一子元素的每个

元素。

p:nth-child(2) 选择属于其父元素的第二个子元素的每个

元素。

:enabled、:disabled 控制表单控件的禁用状态。

:checked，单选框或复选框被选中。

display:none；隐藏，并且不占位 ，宽高各种属性值，都‘丢失’visibility：hidden;隐藏，占位，仅是视觉上‘看不见’width:0;height:0;overflow:hidden;这只是通过设置元素的大小使元素不显示

问题是：a标签的四种状态，排序出问题了。

正确排序：L-V-H-A

love hate原则，即l（link）ov（visited）e h（hover）a（active）te。

a:link 普通的、未被访问的链接

a:visited 用户已访问的链接

a:hover 鼠标指针位于链接的上方

a:active 链接被点击的时刻

针对不同的浏览器写不同的 CSS code 的过程，就是 CSS hack。

(1):块级元素(block)特性：

总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;

宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;

(2):内联元素(inline)特性：

宽度(width)、高度(height)、内外边距的上下都不可设置，内外边距的左右可设置，其大小就是里面文字或图片的大小。

(3):inline-block 元素

拥有内在尺寸，可设置高宽,但不会自动换行

、 、 、 、。

外边距重叠就是 margin-collapse。

折叠外边距 :在 CSS 当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。

折叠结果遵循下列计算规则：

两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。

两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。

两个外边距一正一负时，折叠结果是两者的相加的和。

opacity作用于元素，以及元素内的所有内容的透明度(元素会继承其属性)而rgba()只作用于元素的颜色或其背景色(设置rgba透明的元素的子元素不会继承透明效果)

垂直方向：line-height

水平方向：letter-spacing 增加或减少字符间距。

可用于消除 inline-block 元素间的换行符空格间隙问题。

方法一：.child{

  height: 100px;

position: absolute;//父元素相对定位

top:50%;

left:50%;

transform: translate(-50%,-50%);

}

方法二：.child{

width: 100px;

height: 100px;

position: absolute;

top:50%;

left:50%;

margin-top: -50px;

margin-left: -50px;

}

方法三：child {

width: 100px;

height: 100px;

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

margin: auto

}

方法一：的容器

.img-container{

display: table-cell;

vertical-align: middle;

text-align: center;

}

方法二：方法二

.img-container{

display: flex;

justify-content: center;

align-items: center;}

px 和 em 都是长度单位，区别是，px 的值是固定的，指定是多少就是多少，计算比较容易。em 得值不是固定的，并且 em 会继承父级元素的字体大小。

浏览器的默认字体高都是 16px。所以未经调整的浏览器都符合: 1em=16px。

是 CSS 预处理器。他是 CSS 上的一种抽象层。他们是一种特殊的语法/语言编译成

CSS。

优势：

结构清晰，便于扩展。

减少了重复代码的编写，增加了变量等的功能

可以方便的屏蔽浏览器私有语法差异。

可以轻松实现多重继承。

完全兼容CSS代码，可以方便地应用到老项目中。less只是在CSS语法上做了扩展，所以老的CSS代码也可以与less代码一同编译。

Link 属于 html 标签，而@import 是 CSS 中提供的

在页面加载的时候，link 会同时被加载，而@import 引用的 CSS 会在页面加载完成后才会加载引用的 CSS ,@import 只有在 ie5 以上才可以被识别，

 link 是 html 标签，不存在浏览器兼容性问题

Link 引入样式的权重大于@import 的引用（@import 是将引用的样式导入到当前的页面中）

CSS 的盒子模型有两种：IE 盒子模型、标准的 W3C 盒子模型模型

盒模型：内容、内边距、外边距（一般不计入盒子实际宽度）、边框

0417 第二次提问

31:为什么要初始化样式？

由于浏览器兼容的问题，不同的浏览器对标签的默认样式值不同，若不初始化会造成不同

浏览器之间的显示差异

但是初始化 CSS 会对搜索引擎优化造成小影响

BFC（块级格式化上下文），页面上的一个隔离的独立容器，一个创建了新的 BFC 的盒子是独立布局的，盒子内元素的布

局不会影响盒子外面的元素。在同一个 BFC 中的两个相邻的盒子在垂直方向发生 margin

重叠的问题

创建BFC

1、float的值不是none。

2、position的值不是static或者relative。

3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex

4、overflow的值不是visible

1. 所有的标记都必须要有一个相应的结束标记

2. 所有标签的元素和属性的名字都必须使用小写

3. 所有的 XML 标记都必须合理嵌套

4. 所有的属性必须用引号 "" 括起来

5. 把所有 < 和 & 特殊符号用编码表示

6. 给所有属性赋一个值

7. 不要在注释内容中使用 "--"

8. 图片必须有说明文字

浏览器默认的margin和padding不同解决方案：加一个全局的 *{margin:0;padding:0;} 来统一

(1).标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、

(2):使用外 链 css 和 js 脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、

(3):更少的代码和组件，容易维 护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性。

CSS 规范规定，每个元素都有 display 属性，确定该元素的类型，每个元素都有默认

的 display 值

块级元素(默认值是‘block’) ： div  p  h1-h6 form ul hr table

行内元素(默认值是‘inline’) : a  b  br  i  span input img link select  small  strong

Css 盒模型:内容，border ,margin，padding

结构层  Html

表示层  CSS

行为层 j s

display：

none：取消样式

block：块级元素

inline：行内元素

inline-block：行内块元素

normal：默认样式

flex：弹性布局

*absolute

生成绝对定位的元素，相对于离最近的包含块元素进行定位。

*fixed

生成绝对定位的元素，相对于浏览器窗口进行定位。

* relative

生成相对定位的元素，相对于其正常位置进行定位。

* static 默认值。没有定位，元素出现在正常的流中

* inherit 规定从父元素继承 position 属性的值。

(1):b标签和strong标签都可以对文本进行加粗

(2):i标签和em标签同样也可以对文本进行倾斜

但是strong和em有强调的作用，有利于SEO（搜索引擎优化

所以日常工作中建议用strong和em标签。

  定义

标准模式页面按照HTML,CSS的定义渲染，

怪异模式就是浏览器为了兼容很早之前针对旧版本浏览器设计,并未严格遵循W3C标准而产生的一种页面渲染模式。

  区别：

两者盒子模型 渲染模式等的不同

三者之间的区别对比：

特性

Cookie

localStorage

sessionStorage

特性

一般由服务器生成，可设置失效时间。如果在浏览器端生成Cookie，默认是关闭浏览器后失效

除非被清除，否则永久保存

仅在当前会话下有效，关闭页面或浏览器后被清除

存放数据大小

4K左右

一般为5MB

与服务器端通信

每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题

仅在客户端（即浏览器）中保存，不参与和服务器的通信

易用性

需要程序员自己封装，源生的Cookie接口不友好

源生接口可以接受，亦可再次封装来对Object和Array有更好的支持

相同点：都存储在客户端不同点：

1.存储大小

cookie数据大小不能超过4k。

sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

2.有效时间

localStorage    存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；

sessionStorage  数据在当前浏览器窗口关闭后自动删除。

cookie     s     设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

3. 数据与服务器之间的交互方式

cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端

sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

sessionStorage 用于本地存储一个会话（session）中的数据，这些数据只有在同一个会

话中的页面才能访问并且当会话结束后数据也随之销毁。因此 sessionStorage 不是一种持久化的本地存储，仅仅是会话级别的存储。而 localStorage 用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

解决：加入_display：inline

     浏览器根据请求的 URL 交给 DNS 进行域名解析，找到真实 IP 地址，向服务器发起请求；

      服务器交给后台处理完成后返回数据，浏览器接收文件（HTML、CSS、JS、images等）；

      浏览器对加载到的资源（HTML、CSS、JS、images等）进行语法解析，建立相应的内部数据结构（如HTML的DOM）；

      载入解析到的资源文件，渲染页面，完成。

    表格布局,

    浮动布局，

       浮动布局主要采用float和clear两个属性来构建。

    定位布局  

        position属性来实现元素的绝对定位和相对定位。

 流体布局的方式

       1、  flex-direction：排列方向

            flex-direction: row | row-reverse | column | column-reverse

       2、flex-wrap如果一条轴线排不下，如何换行

            flex-wrap: nowrap | wrap | wrap-reverse

       3、flex-flow属性（上述两个组合）

            flex-flow: flex-direction, flex-wrap

            flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap

       4、justify-content属性（在主轴上的对齐方式）横向

            justify-content: flex-start | flex-end | center | space-between | space-around

       5、align-items属性（在交叉轴上如何对齐）纵向

        align-items: flex-start | flex-end | center | baseline | stretch

       6、flex-grow属性（放大比例，默认为0，即如果存在剩余空间，也不放大）

        flex-grow: 默认为0  

       7、flex-shrink属性（缩小比例，默认为1，即如果空间不足，则缩小）

        flex-shrink: 默认为1

       8、flex-basis属性（在分配多余空间之前，项目占据的主轴空间）

        flex-basis: | auto

       9、flex属性

        flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选

        flex: auto; （1 1 auto）

        flex: none; （0 0 auto）

        css reset

        normalize css

        *{}