HTML（总结）-白红宇

HTML（总结）

阅读量：7287 次

发布时间：2019-06-30

本文共 17404 字，大约阅读时间需要 58 分钟。

HTML

浏览器内核有哪些

Trident：IE

Gecko：Firefox

Webkit：Chrome Safari

Presto：Opera（投奔Webkit）

html5的一些新特性

1. 拖拽释放(Drag and drop) API 2. 语义化更好的内容标签（header,nav,footer,aside,article,section）3. 音频、视频API(audio,video)4. 画布(Canvas) API5. 地理(Geolocation) API6. 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；7. sessionStorage 的数据在浏览器关闭后自动删除8. 表单控件，calendar、date、time、email、url、search  9. 新的技术webworker, websocket, Geolocation参考资料：http://www.jb51.net/html5/45220.html

h5有个api能定位你知道是哪个吗

CSS

position

• 分为fix absolute relative static

• absolute:绝对定位。参照父级对象，使用top,bottom,left,right定位，脱离文档流，可以使用z-index层次分级

• fix:固定定位。参照浏览器窗口，可以使用z-index层次分级

• relative:相对定位，不脱离文档流，参照自身静态位置，top,bottom,left,right定位，可以使用z-index层次分级

• static:静态，默认设置，不可以使用z-index作用域

CSS放在顶部/底部有什么区别

CSS放在顶部是页面渲染时首先是根据DOM结构生成一个DOM树然后加上CSS样式生成一个渲染树，如果CSS放在后面可能页面会出现闪跳的感觉，或者是白屏或者布局混乱样式很丑直到CSS加载完成。

CSS link/import区别

(1) link属于HTML标签，而@import是CSS提供的;

(2) 页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;

(3) import只在IE5以上才能识别，而link是HTML标签，无兼容问题;

(4) link方式的样式的权重高于@import的权重.

刚才说有些浏览器不兼容@import，具体指哪些浏览器？

src和href的区别

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

• href是Hypertext Reference的缩写，表示超文本引用。用来建立当前元素和文档之间的链接。常用的有：link、a。浏览器会识别该文档为css文档，并行下载该文档，并且不会停止对当前文档的处理。这也是建议使用link，而不采用@import加载css的原因。

• src是source的缩写，src的内容是页面必不可少的一部分，是引入。src指向的内容会嵌入到文档中当前标签所在的位置。常用的有：img、script、iframe。当浏览器解析到该元素时，会暂停浏览器的渲染，直到该资源加载完毕。这也是将js脚本放在底部而不是头部得原因。

伪类的用法

CSS选择器优先级

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

css选择器优先级

优先级(1)、同类型，同级别的样式后者先于前者(2))、ID > 类样式 > 标签 > *(3)、内联>ID选择器>伪类>属性选择器>类选择器>标签选择器>通用选择器(*)>继承的样式(4)、具体 > 泛化的，特殊性即css优先级(5)、近的 > 远的 (内嵌样式 > 内部样式表 > 外联样式表)  内嵌样式：内嵌在元素中，span  内部样式表：在页面中的样式，写在中的样式      外联样式表：单独存在一个css文件中，通过link引入或import导入的样式(6)、!important 权重最高，比 inline style 还要高

计算特殊性值important > 内嵌 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符权重、特殊性计算法：  CSS样式选择器分为4个等级，a、b、c、d(1)、如果样式是行内样式（通过Style=“”定义），那么a=1，1,0,0,0 (2)、b为ID选择器的总数 0,1,0,0 (3)、c为属性选择器，伪类选择器和class类选择器的数量。0,0,1,0(4)、d为标签、伪元素选择器的数量 0,0,0,1(5)、!important 权重最高，比 inline style 还要高比如结果为：1093比1100，按位比较，从左到右，只要一位高于则立即胜出，否则继续比较。

display 的值的作用

1.block 象块类型元素一样显示。

2.inline 缺省值。象行内元素类型一样显示。

3.inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。

4.list-item 象块类型元素一样显示，并添加样式列表标记。

css中用什么进行屏幕的判定

css中实现阴影的有什么

flex

设置在容器上的属性：

 flex-directio：属性决定主轴的方向（即项目的排列方向）。

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

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

 justify-content：项目在主轴上的对齐方式。

 align-items：属性定义项目在交叉轴上如何对齐。

 align-content：定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

设置在项目上的属性

 order：定义项目的排列顺序。数值越小，排列越靠前，默认为0。

 flex-grow：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

 flex-shrink：定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

 flex-basis：定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

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

 align-self：align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

让你设计一个前端css框架你怎么做

CSS3

CSS3 有哪些新特性

边框

border-color 属性

boder-image 属性

border-radius 属性

box-shadow 属性

背景

background-origin 属性和 background-clip 属性

background-size 属性

多重背景

颜色

HSL 颜色值

HSLA 颜色值

opacity 属性

RGBA 颜色值

文字效果

text-shadow 属性

text-overflow 属性

word-wrap 属性

用户界面

box-sizing 属性

resize 属性

outline 属性

nav-top、nav-right、nav-bottom、nav-left 属性

选择器

属性(attribute)选择器

基本盒模型

overflow-x 属性和 overflow-y 属性

生成的内容

content 属性

其它模块

media queries 模块

multi-column layout 模块（多栏布局）

Web 字体模块

Speech 模块

Css实现动画效果

Animation还有哪些其他属性。

Alt text

css3动画优化

盒子模型

ie 盒子模型和标准盒子模型范围：
margin、border、padding、content，

和标准 w3c 盒子模型不同的是：
标准盒子模型：content 部分不包含其他部分。
ie 盒子模型的：content 部分包含了 border 和 pading。

画出盒子模型，要使谷歌浏览器的盒子模型显示得跟IE浏览器一致（让谷歌跟ie一致，不是ie跟谷歌一致），该怎么做

Alt text

从上图可以看到标准 w3c 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。

从上图可以看到 ie 盒子模型的范围也包括 margin、border、padding、content，和标准 w3c 盒子模型不同的是：ie 盒子模型的 content 部分包含了 border 和 pading。

使用css实现一个三角形（盒模型border和css旋转两种方法，主要考察css3旋转）

css3画一个三角形

用content：0，boder：很大，三面border透明

#triangle-up {    width: 0;    height: 0;    border-left: 50px solid transparent;    border-right: 50px solid transparent;    border-bottom: 100px solid red;}

Alt text

#triangle-down {    width: 0;    height: 0;    border-left: 50px solid transparent;    border-right: 50px solid transparent;    border-top: 100px solid red;}

Alt text

#triangle-left {    width: 0;    height: 0;    border-top: 50px solid transparent;    border-right: 100px solid red;    border-bottom: 50px solid transparent;}

Alt text

#triangle-right {    width: 0;    height: 0;    border-top: 50px solid transparent;    border-left: 100px solid red;    border-bottom: 50px solid transparent;}

Alt text

#triangle-topleft {    width: 0;    height: 0;    border-top: 100px solid red;    border-right: 100px solid transparent;}

Alt text

#triangle-topright {    width: 0;    height: 0;    border-top: 100px solid red;    border-left: 100px solid transparent; }

Alt text

#triangle-bottomleft {    width: 0;    height: 0;    border-bottom: 100px solid red;    border-right: 100px solid transparent;}

Alt text

#triangle-bottomright {    width: 0;    height: 0;    border-bottom: 100px solid red;    border-left: 100px solid transparent;}

伪类和伪元素区别

border的设置，border的上下左右具体范围

行内元素和块级元素的区别

浮动

清除浮动有几种方法，各自优缺点

(1)、父级div定义 height

原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。

优点：简单、代码少、容易掌握

缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题

建议：不推荐使用，只建议高度固定的布局时使用

(2)、结尾处加空div标签 clear:both

原理：添加一个空div，利用css提高的clear:both浮动，让父级div能自动获取到高度

优点：简单、代码少、浏览器支持好、不容易出现怪问题

缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，让人感觉很不好

建议：不推荐使用，但此方法是以前主要使用的一种清除浮动方法

(3)、父级div定义伪类:after 和 zoom

原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE转有属性)可解决ie6,ie7浮动问题

优点：浏览器支持好、不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）

缺点：代码多、不少初学者不理解原理，要两句代码结合使用才能让主流浏览器都支持。

建议：推荐使用，建议定义公共类，以减少CSS代码。

代码如下：

.clearfix:after{  
    content:".";display:block;height:0;clear:both;visibility:hidden;}// 为兼容IE6,IE7，因为ie6,ie7不能用after伪类。加上下面代码.clearfix{zoom:1}// 一般情况下，如果父层内部有浮动(float)可能导致父层的高度为0，加上clearfix后就行了：
    
     
      left
     
     
      right

(4)、父级div定义 overflow:hidden

原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度

优点：简单、代码少、浏览器支持好

缺点：不能和position配合使用，因为超出的尺寸的会被隐藏。

建议：只推荐没有使用position或对overflow:hidden理解比较深的朋友使用。

(5)、父级div定义 overflow:auto

原理：必须定义width或zoom:1，同时不能定义height，使用overflow:auto时，浏览器会自动检查浮动区域的高度

优点：简单、代码少、浏览器支持好

缺点：内部宽高超过父级div时，会出现滚动条。

建议：不推荐使用，如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。

手写after方式清除浮动，一个冒号和两个冒号的区别

语义化

什么是语义化

语义化的HTML就是写出的HTML代码，符合内容的结构化（内容语义化），选择合适的标签（代码语义化），能够便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

为什么要做到语义化

1.有利于SEO，有利于搜索引擎爬虫更好的理解我们的网页，从而获取更多的有效信息，提升网页的权重。

2.在没有CSS的时候能够清晰的看出网页的结构，增强可读性。

3.便于团队开发和维护，语义化的HTML可以让开发者更容易的看明白，从而提高团队的效率和协调能力。

4.支持多终端设备的浏览器渲染。

语义化HTML该怎么做呢？

在做前端开发的时候要记住：HTML 告诉我们一块内容是什么（或其意义），而不是它长的什么样子，它的样子应该由CSS来决定。

写语义化的 HTML 结构其实很简单，首先掌握 HTML 中各个标签的语义，在看到内容的时候想想用什么标签能更好的描述它，是什么就用什么标签。

<h1>~<h6>，作为标题使用，并且依据重要性递减，<h1>是最高的等级。

<p>段落标记，知道了<p>作为段落，你就不会再使用<br />来换行了，而且不需要 <br />来区分段落与段落。<p>中的文字会自动换行，而且换行的效果优于<br />。段落与段落之间的空隙也可以利用 CSS 来控制，很容易而且清晰的区分出段落与段落。

<ul>、<ol>、<li>，<ul> 无序列表，这个被大家广泛的使用，<ol> 有序列表也挺常用。在 web 标准化过程中，<ul> 还被更多的用于导航条，本来导航条就是个列表，这样做是完全正确的，而且当你的浏览器不支持 CSS 的时候，导航链接仍然很好使，只是美观方面差了一点而已。

<dl>、<dt>、<dd>，<dl> 就是“定义列表”。比如说词典里面的词的解释、定义就可以用这种列表。

<em>、<strong>，<em> 是用作强调，<strong> 是用作重点强调。

<table>、<td>、<th>、<caption>， (X)HTML中的表格不再是用来布局。

position

position有哪些属性？各自有什么特点

1.absolute 生成绝对定位的元素，相对于 static 定位以外的第一个祖先元素进行定位。 2.fixed 生成绝对定位的元素，相对于浏览器窗口进行定位（老IE不支持）。3.relative 生成相对定位的元素，相对于其在普通流中的位置进行定位。 4.static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right z-index 声明）。5.inherit 规定从父元素继承 position 属性的值。

绝对定位与相对定位的区别

相对定位：跟它的名一样，相对嘛，要有一个参照物，但这个参照不是别的，是它自己呢，也就是说没设相对定位的位置，那你会问了，设没设都在那个位置为什么要设呢，因为只有设置了才能使 TOP这些生效，也就是设了才能相对自己原来的位置偏移，原来的位置保留着，偏移后会把其它的层遮罩住。

绝对定位：在布局里不可能有绝对定位的，再怎么样都有一个参照位置的，绝对定位的参照位置就不像相对那样是自己了，至于是哪个，就看它的上级或上上级有没有定位了，也就是有没有position:relative;或position:fixed了，好像position:inherit;也行，前面两个可以，后面那个不设什么的不用也行，最好用position:relative;吧,转入正题，当要绝对定位的层设好要参照位置的层后，就可以用TOP，LEFT这些来定位置了，如果它的上级或上上级都没定位的话只就会根据BODY的位置来定位了,还有最后一点，绝对定位是不占位置的，它会像PS的图层一样单独做一层，至于第几层你可以通过z-index:这个属性来设置

display有哪些值？说明他们的作用

说一个你觉得很好用的css3技能但可能比较少人知道的点。

display有哪些值？说明他们的作用

1.inline 缺省值。象行内元素类型一样显示。

2.block 象块类型元素一样显示。

3.inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。

4.list-item 象块类型元素一样显示，并添加样式列表标记。

BFC

http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html

http://www.w3cplus.com/css/understanding-bfc-and-margin-collapse.html

http://www.html-js.com/article/1866

兼容性

常见兼容性

1. png24位的图片在iE6浏览器上出现背景

解决方案：做成PNG8，也可以引用一段脚本处理.

2. 浏览器默认的margin和padding不同

解决方案：加一个全局的 *{margin:0;padding:0;} 来统一。

3. IE6双边距bug：在IE6下，如果对元素设置了浮动，同时又设置了margin-left或margin-right，margin值会加倍。

#box{ float:left; width:10px; margin:0 0 0 10px;}

这种情况之下IE会产生20px的距离

解决方案：在float的标签样式控制中加入 display:inline; 将其转化为行内属性。( 这个符号只有ie6会识别)

4. 渐进识别的方式，从总体中逐渐排除局部。

首先，巧妙的使用“\9”这一标记，将IE游览器从所有情况中分离出来。

接着，再次使用 "+" 将IE8和IE7、IE6分离开来，这样IE8已经独立识别。

.bb{     background-color:#f1ee18; /*所有识别*/    .background-color:#00deff\9; /*IE6、7、8识别*/    +background-color:#a200ff; /*IE6、7识别*/    _background-color:#1e0bd1; /*IE6识别*/ }

5.IE下，可以使用获取常规属性的方法来获取自定义属性，也可以使用 getAttribute() 获取自定义属性；Firefox下,只能使用getAttribute()获取自定义属性

解决方法：统一通过getAttribute()获取自定义属性

6. IE下，event对象有 x、y 属性，但是没有 pageX、pageY属性; Firefox下，event对象有 pageX、pageY 属性，但是没有 x、y 属性

解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。

7. Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示

解决方法：可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决

8. 超链接访问过后 hover 样式就不出现了，被点击访问过的超链接样式不在具有 hover 和 active 了

解决方法：改变CSS属性的排列顺序 L-V-H-A

a:link {}a:visited {}a:hover {}a:active {}

9. 怪异模式问题：漏写 DTD 声明，Firefox 仍然会按照标准模式来解析网页，但在 IE 中会触发怪异模式。

为避免怪异模式给我们带来不必要的麻烦，最好养成书写 DTD 声明的好习惯。现在可以使用推荐的写法：<!DOCTYPE html>

10. 上下margin重合问题：ie和ff都存在，相邻的两个div的margin-left和margin-right不会重合，但是margin-top和margin-bottom却会发生重合。

解决方法：养成良好的代码编写习惯，同时采用margin-top或者同时采用margin-bottom。

11. ie6对png图片格式支持不好

解决方案：引用一段脚本处理

低版本浏览器不支持HTML5标签怎么解决

IE低版本需要支持HTML5标签：

方法1.传统引入js包

方法2.在hmtl 加入（推荐）:

/*html5 tag*/

选择器

CSS选择器，nth-chlid(n)和nth-type(n)区别

:nth-child可以选择父元素下的字元素，:nth-of-type也可以。但是它们到底有什么区别呢？

其实区别很简单：:nth-of-type为什么要叫:nth-of-type？因为它是以"type"来区分的。也就是说：ele:nth-of-type(n)是指父元素下第n个ele元素，

而ele:nth-child(n)是指父元素下第n个元素且这个元素为ele，若不是，则选择失败。

这里附上一个小例子：

上面这个例子，

.demo li:nth-child(2)选择的是<li>one</li>节点，

而.demo li:nth-of-type(2)则选择的是<li>two</li>节点。

优化

SEO

网站结构布局优化

控制首页连接数量：100个以内；页面导航、底部导航等；

扁平化结构：不要超过3层；

导航SEO优化：主导航、副导航；尽量用文字做导航；
面包屑导航：每个网页上提供当前位置；让用户了解网站形式；

细节问题：内容页面布局
@@@LOGO及导航
@@@面包屑导航
@@@正文
@@@热门文章/相关文章
@@@版权信息及友情连接
@@@首页1 2 3 4 5 6 7 8 9 10 V下拉选择
页面大小不要超过100K

网页代码优化（语义化代码）
A、title标题：强调重点
B、meta keywords关键词：列举几个关键词
C、meta description网页描述：高度概括网页的内容
以上信息不要堆积、重复

语义话代码（HTML 标签有自己的意义，在适当的位置用适当的标签）
1、h1~h6 多用于标题
2、ul 多用于无序列表
3、ol 多用于有序列表
4、dl 用于定义数据列表
5、em、strong 表示强调

div、span 是 html 标签中最没有语义的

有利搜索引擎

1、a：访问外部链接时要加上 rel="nofollow"，告诉搜索引擎外部链接无需追踪，加上 title 说明
2、h1：搜索引擎外认为 h1 最重要，使用 css 调整，网页正文标题用 h1，副标题用 h2，其他不要乱用 h 标签
3、br 用于文本间的换行，用在 p 内，也可以用

表示空行

4、caption：表格标题

5、img：使用 title、alt 说明

6、
<strong><em>表示强调，
<em>的权重仅次于
<strong>,如果只想表示加粗斜体，建议使用
<b><i>,表示强调则使用
<strong><i>

7、重要内容 HTML 代码放在最前面（使用 css 改变布局）

8、重要内容不要用 JS 输出（搜索引擎看不懂 JS）

9、尽量少使用 iframe 框架（搜索引擎不喜欢）

10、谨慎使用 display:none（搜索引擎会过滤掉其内容，设置 z-index 代替）

11、精简代码

请列举减少HTTP请求数和资源文件大小的方法

前端优化

（1）、减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。（2）、前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数（3）、用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。（4）、当需要设置的样式很多时设置className而不是直接操作style。（5）、少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。（6）、避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。（7）、图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳。回答二：(1)、减少HTTP请求次数 (2)、使用CDN(3)、避免空的src和href(4)、为文件头指定Expires(5)、使用gzip压缩内容(6)、把CSS放到顶部(7)、把JS放到底部(8)、避 免使用CSS表达式 (9)、将CSS和JS放到外部文件中 (10)、避免跳转 (11)、可缓存的AJAX (12)、使用GET来完成AJAX请求

页面性能优化，为什么CSS放头上，JS放底下

js是阻塞加载，会影响页面加载的速度，如果js文件比较大，算法也比较复杂的话，影响更大。所以要放在底下加载

如果CSS放在底下加载的话，页面出现白屏。CSS放在前端，页面渲染时首先是根据DOM结构生成一个DOM树然后加上CSS样式生成一个渲染树

（1）减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存，图片服务器。

（2）前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数

（3）用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。

（4）当需要设置的样式很多时设置className而不是直接操作style。

（5）少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。

（6）避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。

（7）图片预加载，将样式表放在顶部，将脚本放在底部加上时间戳。

加载性能优化的方法；

谈谈前端页面的优化，雅虎34军规

http://blog.csdn.net/camel20/article/details/7283893

网站性能优化

移动端性能优化

repaint和reflow区别(重排重绘)

（1）Reflow（回流）：浏览器要花时间去渲染，当它发现了某个部分发生了变化影响了布局，那就需要倒回去重新渲染。

（2）Repaint（重绘）：如果只是改变了某个元素的背景颜色，文字颜色等，不影响元素周围或内部布局的属性，将只会引起浏览器的repaint，重画某一部分。 Reflow要比Repaint更花费时间，也就更影响性能。所以在写代码的时候，要尽量避免过多的Reflow。

reflow的原因：

（1）页面初始化的时候；

（2）操作DOM时；

（3）某些元素的尺寸变了；

（4）如果 CSS 的属性发生变化了。

减少 reflow/repaint

　（1）不要一条一条地修改 DOM 的样式。与其这样，还不如预先定义好 css 的class，然后修改 DOM 的 className。　

　（2）不要把 DOM 结点的属性值放在一个循环里当成循环里的变量。

　（3）为动画的 HTML 元件使用 fixed 或 absoult 的 position，那么修改他们的 CSS 是不会 reflow 的。

　（4）千万不要使用 table 布局。因为可能很小的一个小改动会造成整个 table 的重新布局。

缓存

介绍一下cookie,localstorage,sessionstorage,session

共同点：都是保存在浏览器端，且同源的。

区别：cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。Web Storage 的 api 接口使用更方便。

说说离线存储

在较高版本的浏览器中，js提供了sessionStorage和globalStorage。

在HTML5中提供了localStorage来取代globalStorage。

html5中的Web Storage包括了两种存储方式：sessionStorage和localStorage。

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。

localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

它们与cookie的区别

Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。

除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。

但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在，而Web Storage仅仅是为了在本地“存储”数据而生

浏览器的支持除了IE７及以下不支持外，其他标准浏览器都完全支持(ie及FF需在web服务器里运行)，值得一提的是IE总是办好事，例如IE7、IE6中的UserData其实就是javascript本地存储的解决方案。通过简单的代码封装可以统一到所有的浏览器都支持web storage。

localStorage和sessionStorage都具有相同的操作方法，例如setItem、getItem和removeItem等

布局

三列布局

两列布局：左顶宽右+自适应

左边固定宽度为200，右边自适应，而且滚动条要自动选择只出现最高的

方法一：

HTML代码如下：

    
        Document    
        
    
    
    
     第一种方法

CSS代码如下：

.one {    position: absolute;    height: 100px;    width: 300px;    background-color: blue;}.two {    height: 200px;    margin-left: 300px;    background-color: red;}

效果图：

第二种方法

　第二种方法，我利用的是创建一个新的BFC（块级格式化上下文）来防止文字环绕的原理来实现的。BFC就是一个相对独立的布局环境，它内部元素的布局不受外面布局的影响。它可以通过以下任何一种方式来创建：

float的值不为none

position的值不为static或者relative

display的值为 table-cell, table-caption, inline-block, flex, 或者 inline-flex中的其中一个

overflow的值不为visible

　　关于BFC，在w3c里是这样描述的：在BFC中，每个盒子的左外边框紧挨着包含块的左边框（从右到左的格式化时，则为右边框紧挨）。即使在浮动里也是这样的（尽管一个包含块的边框会因为浮动而萎缩），除非这个包含块的内部创建了一个新的BFC。这样，当我们给右侧的元素单独创建一个BFC时，它将不会紧贴在包含块的左边框，而是紧贴在左元素的右边框。

HTML代码：

    
        Document    
        
    
    
    
     第二种方法

CSS代码：

.one {    float: left;    height: 100px;    width: 300px;    background-color: blue;}.two {    overflow: auto;    height: 200px;    background-color: red;}

效果图：

左边定宽右边自适应。两种方法，NEC上的用负边距消除宽度，用弹性布局。然后问我有没有第三种。。

1）#left{ float:left; width:200px; background-color:blue;  } #right{ overflow:hidden; background-color:gray;  }2）#left{ float:left; width:200px; background-color:blue;  } #right{ margin-left:200px; background-color:red;  }3）#left{ position:absolute; top:0px; left:0px; width:200px; background-color:blue;  } #right{ margin-left:200px; background-color:red;  }4）#left{ position:absolute;  top:0px; left:0px; width:200px; background-color:blue;  } #right{ position:absolute; top:0px; left:200px; width:100%; background-color:gray;  }右边固定，左边自适应：1）#left{ float:left; width:100%; background-color:blue; margin-left:-200px; } #right{ float:right; width:200px; background-color:gray;}

css:两个块状元素上下的margin-top和margin-bottom会重叠。啥原因？怎么解决？

（应该给父类元素添加BFC）

如何让各种情况下的div居中(绝对定位的div,垂直居中,水平居中)

给div设置一个宽度，然后添加margin:0 auto属性

div{

width:200px;

margin:0 auto;

}

居中一个浮动元素

确定容器的宽高宽500 高 300 的层

设置层的外边距

.div {  Width:500px ; height:300px;//高度可以不设  Margin: -150px 0 0 -250px;  position:relative;相对定位  background-color:pink;//方便看效果  left:50%;  top:50%;}

(1) 元素水平居中

内联元素水平居中

text-align:center;

块元素水平据居中

margin:0 auto;

(2) 单行文字垂直居中

height:n px;

line-height:n px;

(3) 文字相对图片、输入框垂直居中

vertical-align:middle;

实现布局：左边一张图片，右边一段文字（不是环绕）

    
                
    
             ![](img/1.png)        
                 
      这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字

两列布局的方式；

使用flex布局实现三等分，左右两个元素分别贴到左边和右边，垂直居中

垂直居中，多行文本垂直居中

基本的两列自适应布局

实现左定宽右撑满的布局。盒子模型。要使盒子表现与IE一致该如何？

css垂直水平居中有哪些方法

两列布局

css垂直水平居中的方法，flex布局的具体实现

实现一个左边定宽右边自适应的两列布局，要求使用浮动和flex两种方法

A：

.left {      float: left;      width: 320px;     //这个是面试官给的，面试官画了图 }     //下面这段我少写了，然后面试官就问你上面这样能够让右边自适应吗？囧.right {      margin-left: 320px; }     //flex憋了很久没写出来。。。