前端面试 - HTML、CSS篇_前端面试html css

一、HTML、CSS

1. HTML

<image>标签上title属性与alt属性的区别是什么？

• alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明的。且长度必须少于100个英文字符或者用户必须保证替换文字尽可能的短。这包括那些使用本来就不支持图像显示或者图像显示被关闭的浏览器的用户，视觉障碍的用户和使用屏幕阅读器的用户等。
• title属性为设置该属性的元素提供建议性的信息。使用title属性提供非本质的额外信息。参考《alt和title属性的区别及应用》

分别写出以下几个HTML标签：文字加粗、下标、居中、字体

加粗：<b>、<strong>
下标：<sub>
居中：<center>
字体：<font>、<basefont>

请说说你对标签语义化的理解？

a. 去掉或者丢失样式的时候能够让页面呈现出清晰的结构
b. 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
c. 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
d. 便于团队开发和维护，语义化更具可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?

• 声明位于文档中的最前面，处于标签之前。告知浏览器以何种模式来渲染文档。
• 严格模式的排版和 JS 运作模式是，以该浏览器支持的最高标准运行。
• 在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
• DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

你知道多少种Doctype文档类型？

标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。
HTML 4.01 规定了三种文档类型：Strict、Transitional 以及 Frameset。
XHTML 1.0 规定了三种 XML 文档类型：Strict、Transitional 以及 Frameset。
Standards （标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，
Quirks（包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。

HTML与XHTML 二者有什么区别

a. XHTML 元素必须被正确地嵌套。
b. XHTML 元素必须被关闭。
c. 标签名必须用小写字母。
d. XHTML 文档必须拥有根元素。
参考《XHTML 与 HTML 之间的差异》

iframe的优缺点？

优点：
a. 解决加载缓慢的第三方内容如图标和广告等的加载问题
b. iframe无刷新文件上传
c. iframe跨域通信
缺点：
a. iframe会阻塞主页面的Onload事件
b. 无法被一些搜索引擎索引到
c. 页面会增加服务器的http请求
d. 会产生很多页面，不容易管理。
参考《iframe的一些记录》

Quirks模式是什么？它和Standards模式有什么区别？

IE6以前的页面大家都不会去写DTD，所以IE6就假定 如果写了DTD，就意味着这个页面将采用对CSS支持更好的布局，而如果没有，则采用兼容之前的布局方式。这就是Quirks模式（怪癖模式，诡异模式，怪异模式）。

区别：总体会有布局、样式解析和脚本执行三个方面的区别:

• a. 盒模型：在W3C标准中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，而在Quirks 模式下，IE的宽度和高度还包含了padding和border。
• b. 设置行内元素的高宽：在Standards模式下，给等行内元素设置wdith和height都不会生效，而在quirks模式下，则会生效。
• c. 设置百分比的高度：在standards模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置百分比的高度，子元素设置一个百分比的高度是无效的用
• d. 设置水平居中：使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下却会失效。

请阐述table的缺点

a. 太深的嵌套，比如table>tr>td>h3，会导致搜索引擎读取困难，而且，最直接的损失就是大大增加了冗余代码量。
b. 灵活性差，比如要将tr设置border等属性，是不行的，得通过td
c. 代码臃肿，当在table中套用table的时候，阅读代码会显得异常混乱
d. 混乱的colspan与rowspan，用来布局时，频繁使用他们会造成整个文档顺序混乱。
e. 不够语义
参考《为什么说table表格布局不好？》

简述一下src与href的区别

• src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置，用于替换当前元素；href用于在当前文档和引用资源之间确立联系。
• href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接

viewport

 <meta name="viewport" 
 content="width=device-width,
 initial-scale=1.0,
 minimum-scale=1.0,
 maximum-scale=1.0,
 user-scalable=no" />
1
2
3
4
5
6

width 设置viewport宽度，为一个正整数，或字符串‘device-width’
device-width 设备宽度
height 设置viewport高度， 一般设置了宽度，会自动解析出高度，可以不用设置
nitial-scale 默认缩放比例（初始缩放比例），为一个数字，可以带小数
minimum-scale 允许用户最小缩放比例，为一个数字，可以带小数
maximum-scale 允许用户最大缩放比例，为一个数字，可以带小数
user-scalable 是否允许手动缩放

延伸 ==> 提问
怎样处理 移动端 1px 被 渲染成 2px 问题?

1. 局部处理
   meta标签中的 viewport属性 ，
   initial-scale 设置为 1
   rem 按照设计稿标准走，
   外加利用transfrome 的scale(0.5) 缩小一倍即可；
2. 全局处理
   meta标签中的 viewport属性 ，
   initial-scale 设置为 0.5
   rem 按照设计稿标准走即可

可能用到的meta标签

<!-- 设置缩放 -->
<meta name="viewport" 
content="width=device-width, 
initial-scale=1, user-scalable=no, minimal-ui" />

<!-- 可隐藏地址栏，仅针对IOS的Safari
（注：IOS7.0版本以后，safari上已看不到效果） -->
<meta name="apple-mobile-web-app-capable" content="yes" />

 <!-- 仅针对IOS的Safari顶端状态条的样式
 （可选default/black/black-translucent ） -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />


 <!-- IOS中禁用将数字识别为电话号码/
 忽略Android平台中对邮箱地址的识别 -->
<meta name="format-detection"content="telephone=no, 
 email=no" />

 其他meta标签
   
<!-- 启用360浏览器的极速模式(webkit) -->
<meta name="renderer" content="webkit">

<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!-- 针对手持设备优化，
主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">

<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">

<!-- uc强制竖屏 -->
<meta name="screen-orientation" 
content="portrait">

<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">

<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">

<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">

<!-- UC应用模式 -->
<meta name="browsermode" content="application">

<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">

<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" 
content="no">
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

雅虎面试题-你真的了解HTML吗?

有这么一段HTML，请挑毛病：

<P>  哥写的不是HTML，是寂寞。<br><br>  我说：<br>不要迷恋哥，哥只是一个传说
1

这是原来雅虎一道笔试题（文字变了变），用了很多年了，还没有一个人完全答对过。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 解答部分 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝

这道题的考点：
考点1：html和 xhtml的区别
这行代码在html 4.01 strict下是完全正确的，在xhtml 1.0 strict下是错误一堆的。所以明显是一个考点。在xhtml下所有标签是闭合的，p,br需要闭合, 标签不允许大写，P要小写。同时nbsp和br必须包含在容器里。html下这些都不是错。p在html里是可选闭合标签，是可以不用闭合的。
这个考点告诉你xhtml是多么苛刻。这是基本考点，答对，你能拿到60分。
考点2：考样式分离
用nbsp控制缩进是不合理的。应该用CSS干这事。所以应该删掉nbsp
考点3：合理使用标签
br是强制折行标签，p是段落。原题用连续的br制造两个段落的效果，效果是达到了，但显然用的不合理，段落间距后期无法再控制。正确的做法是用两个p表现两个段落。“我说”后面是正常的文字折行用br是合理的。
上面全答对，你就能拿到100分。

对原题改进的结果：
html 4.01:

<p>哥写的不是HTML，是寂寞。<p>我说：<br> 不要迷恋哥，哥只是一个传说
1

xhtml 1.0:

<p>哥写的不是HTML，是寂寞。</p><p>我说：<br /> 不要迷恋哥，哥只是一个传说</p>
1

加分：合理的用语义化标签
在前面的基础上合理的用语义化标签，对内容进行必要的标记，是加分的。但过度的使用标签，就画蛇添足了。如“我说”的话，可以用q标签标注。

<p>哥写的不是HTML，是寂寞。
<p>我说：<br> <q>不要迷恋哥，哥只是一个传说</q>
1
2

我觉得这就够了，如果再进一步，“我”用cite标注，“HTML” 用abbr或acronym标注（至于再讨论abbr和acronym的区别就太较真了），也OK。再复杂就没必要了。

<p> 哥写的不是<abbr title=”Hyper Text Markup Language”>HTML</abbr>，是寂寞。
<p><cite> 我</cite>说：<br> <q>不要迷恋哥，哥只是一个传说</q>
1
2

2. CSS

HTML是什么？CSS是什么？JavaScript是什么？

（1）HTML（ Hyper Text Markup Language，超文本标记语言）是做网站时使用的些文本标记标签，比如div、span等
（2）CSS（ Cascading Style Sheet，层叠样式表）是做网站时为美化网站而为标签添加的样式，比如 background（背景）、 color（字体颜色） height（高度）、widh（宽度）等。
（3） JavaScript是网站中实现前后台交互效果、网页动画效果的一种开发语言，比如鼠标单击（ click）事件、前后台数据请求（Ajax）等。

为什么要初始化CSS样式？

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。

构成CSS的基本语句是什么？

构成CSS的基本语句如下。

选择器{
	属性名称1：属性值1；
	属性名称2：属性值2；
}

/*如：*/
div{
 	margin-top：20px；
	border：2px solid #red；
}
1
2
3
4
5
6
7
8
9
10

盒子垂直水平居中

1、定位 盒子宽高已知，

position: absolute; 
left: 50%; 
top: 50%; margin-left:-自身一半宽度; 
margin-top: -自身一半高度;
1
2
3
4

2、table-cell布局 父级

display: table-cell; 
vertical-align: middle;  

子级 
margin: 0 auto;
1
2
3
4
5

3、定位 + transform ; 适用于 子盒子 宽高不定时；

position: relative / absolute;    
/*top和left偏移各为50%*/
top: 50%;       
left: 50%;    
/*translate(-50%,-50%) 偏移自身的宽和高的-50%*/
transform: translate(-50%, -50%);
/*注意这里启动了3D硬件加速哦
会增加耗电量的 
（至于何是3D加速 请看浏览器进程与线程篇）
*/
1
2
3
4
5
6
7
8
9
10

4、flex 布局

 父级： 
/*flex 布局*/
display: flex;        
/*实现垂直居中*/
align-items: center;        
/*实现水平居中*/
justify-content: center;

再加一种水平方向上居中 ：
margin-left : 50% ; 
transform: translateX(-50%);
1
2
3
4
5
6
7
8
9
10
11

请列举几种隐藏元素的方法

a. visibility: hidden；这个属性只是简单的隐藏某个元素，但是元素占用的空间任然存在。
b. opacity: 0;一个CSS3属性，设置0可以使一个元素完全透明，制作出和visibility一样的效果。与visibility相比，它可以被transition和animate
c. position: absolute;使元素脱离文档流，处于普通文档之上，给它设置一个很大的left负值定位，使元素定位在可见区域之外。
d. display: none; 元素会变得不可见，并且不会再占用文档的空间。
e. transform: scale(0);将一个元素设置为无限小，这个元素将不可见。这个元素原来所在的位置将被保留。
f. HTML5 hidden attribute；hidden属性的效果和display:none;相同，这个属性用于记录一个元素的状态
g. height: 0; overflow: hidden；将元素在垂直方向上收缩为0,使元素消失。只要元素没有可见的边框，该技术就可以正常工作。
h. filter: blur(0)；将一个元素的模糊度设置为0，从而使这个元素“消失”在页面中。
参考《使用CSS隐藏HTML元素的4种常用方法》《通过HTML和CSS隐藏和显示元素的4种方法》

display:none和 visibility:hidden的区别是什么？

• display:none隐藏对应的元素，在文档流中不再给它分配空间，它各边的元素会合拢，即脱离文档流。
• visibility:hidden隐藏对应的元素，但是在文档流中仍保留原来的空间。

rgba()和opacity的透明效果有什么不同？

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

透明度具有继承性，如何取消透明度的继承？

使用rgba给元素的背景设置透明度的方式，来替代使用opacity设置元素透明度的方式，解决子元素继承父元素透明度的问题。

改变placeholder的字体颜色大小

其实这个方法也就在PC端可以，真机上都没用，当时我就哭了。 但还是贴出来吧

input::-webkit-input-placeholder{ 
 	/* WebKit browsers */ 
	font-size:14px;    
 	color: #333;
} 
input::-moz-placeholder { 
 	/* Mozilla Firefox 19+ */ 
 	font-size:14px;    
 	color: #333;
} 
input:-ms-input-placeholder { 
 	/* Internet Explorer 10+ */ 
	font-size:14px;    
	color: #333;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

如何让一段文本中的所有英文单词的首字母大写

text-transform：
none| capitalize(将每个单词的第一个字母转换成大写) | uppercase(将每个单词转换成大写 ) | lowercase(将每个单词转换成小写 )
1
2

请简述CSS样式表继承,哪些样式可以继承？哪些不可以继承？

CSS样式表继承指的是，特定的CSS属性向下传递到子孙元素。
会被继承下去的属性如下：参考《CSS样式表继承详解》

• 文本相关：font-family，font-size， font-style，font-variant，font-weight， font，letter-spacing，line-height，color

• 列表相关：list-style-image，list-style-position，list-style-type， list-style

• 可继承的样式有font- size、 font-family、 color,、ul、li、dl 、dd、dt…。

• 不可继承的样式有 border、 padding、 margin、width、 height…。

注意：为了方便辨识，与字体相关的样式通常可以继承，与尺寸相关的样式通常不能继承。

CSS选择器（符）有哪些？

（1）id选择器（#myld）。
（2）类选择器（ .my ClassName）。
（3）标签选择器（div,p,h1）
（4）相邻选择器（h1+p）
（5）子选择器（ul>li）
（6）后代选择器（li a）
（7）通配符选择器（*）
（8）属性选择器（ button[disabled=“true”]）。
（9）伪类选择器（ a:hover、 li:nth- child）表示一种状态。
（10）伪元素选择器（li:before、“：after”、“：first- letter”、“：first-line”、“；selecton”）表示文档某个部分的表现。
注意：在CSS3规范中，为了区别伪元素和伪类，CSS3建议伪类用单冒号“：“，伪元素用双冒号”：："。

CSS伪类与CSS伪对象的区别

根本区别在于：它们是否创造了新的元素（抽象）

• 伪类：一开始用来表示一些元素的动态状态，随后CSS2标准扩展了其概念范围，使其成为了所有逻辑上存在但在文档树中却无须标识的“幽灵”分类
• 伪对象：代表了某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中
  参考《CSS伪类与CSS伪元素的区别及由来》

CSS优先级如何排序？

优先级如下:
!important > style（内联） > ld（权重100） > class（权重10） > 标签（权重1）。
同类别的样式中，后面的会覆盖前面的。
一个行内样式+1000，一个id+100，一个属性选择器/class类/伪类选择器+10，一个元素名/伪对象选择器+1。

请写出多种等高布局

• 假等高列：使用背景图片，在列的父元素上使用这个背景图进行Y轴的铺放，从而实现一种等高列的假像
• 给容器div使用单独的背景色（固定布局）（流体布局）：用元素中的最大高度撑大其他的容器高度
• 创建带边框的两列等高布局：用border-left来做，只能使用两列。
• 使用正padding和负margin对冲实现多列布局方法：在所有列中使用正的上、下padding和负的上、下margin，并在所有列外面加上一个容器，设置overflow:hiden把溢出背景切掉
• 使用边框和定位模拟列等高：但不能使用在多列
• 模仿表格布局等高列效果：兼容性不好，在ie6-7无法正常运行

CSS中，自适应的单位都有哪些？

• 百分比：%
• 相对于视口宽度的单位：ww
• 相对于视口高度的单位：vh
• 相对于视口宽度或者高度（取决于哪个小）的单位：vm
• 相对于父元素字体大小的单位：em
• 相对于根元素字体大小的单位：rem

在CSS样式中常使用px、em，各有什么优劣，在表现上有什么区别？

px是相对长度单位，相对于显示器屏幕分辨率而言的。
em是相对长度单位，相对于当前对象内文本的字体尺寸,值并不是固定的，会继承父级元素的字体大小，1 ÷ 父元素的font-size × 需要转换的像素值 = em值。
px定义的字体，无法用浏览器字体放大功能。

浏览器的默认字体高都是16px，所以未经调整的浏览器都符合lem=16px，那么12px=0.75em，10px=0.625em。

与cm对应的另一个长度单位是rem，是指相对于根元素（通常是HTML元素）字体的大小。

说说rem和em的区别

它们都是相对单位

• rem表示相对于根元素的字体大小。
• em表示相对于父元素的字体大小

CSS中 link 和@import 的区别是什么？

a. link属于HTML标签，而@import是CSS提供的，且只能加载 CSS
b. 页面被加载时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载
c. import只在IE5以上才能识别，而link是HTML标签，无兼容问题
d. link方式的样式的权重 高于@import的权重
e. 当使用 Javascript 控制 DOM 去改变样式的时候，只能使用 link 方式，因为 @import 眼里只有 CSS ，不是 DOM 可以控制

position的absolute与fixed共同点与不同点

相同：
a. 改变行内元素的呈现方式，display被置为block
b. 让元素脱离普通流，不占据空间
c. 默认会覆盖到非定位元素上

区别：
absolute的”根元素“是可以设置的，而fixed的”根元素“固定为浏览器窗口。
当你滚动网页，fixed元素与浏览器窗口之间的距离是不变的。

请说明 position:absolute和float属性的异同。

• 共同点是对内联元素设置float和 absolute属性，可以让元素脱离文档流，并且可以设置其宽高。
• 不同点是float仍可占据位置，不会覆盖在另一个BFC区域上，浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止， absolute会覆盖文档流中的其他元素，即遮盖现象。

position的值， relative和absolute分别是相对于谁进行定位的？

absolute：生成绝对定位的元素，相对于 static 定位以外的第一个祖先元素进行定位
fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。 （IE6不支持）
relative：生成相对定位的元素，相对于其在普通流中的位置进行定位
static：默认值。没有定位，元素出现在正常的流中
sticky:是生成黏性定位的元素，容器的位置根据正常文档流计算得出。

解释下 CSS sprites原理，优缺点

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，
再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，
background-position可以用数字精确的定位出背景图片的位置。

优点：
a. 减少网页的http请求
b. 减少图片的字节
c. 解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名
d. 更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。
缺点：
a. 在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易出现背景断裂
b. CSS Sprites在开发的时候，要通过photoshop或其他工具测量计算每一个背景单元的精确位置
c. 在维护的时候比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片

请列举几种可以清除浮动的方法（至少两种）

浮动会漂浮于普通流之上，像浮云一样，但是只能左右浮动。正是这种特性，导致框内部由于不存在其他普通流元素了，表现出高度为0（高度塌陷）。
a. 添加额外标签，例如<div style="clear:both"></div>
b. 使用br标签和其自身的html属性，例如<br clear="all" />
c. 父元素设置 overflow:hidden；在IE6中还需要触发hasLayout，例如zoom:1；
d. 父元素设置 overflow:auto 属性；同样IE6需要触发hasLayout
e. 父元素也设置浮动
f. 父元素设置display:table
g. 使用:after 伪元素；由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。

在CSS2.1里面有一个很重要的概念，那就是 Block formatting contexts （块级格式化上下文），简称 BFC。创建了BFC的元素就是一个独立的盒子，里面的子元素不会在布局上影响外面的元素，同时BFC仍然属于文档中的普通流。

解释下浮动和它的工作原理？

a. 浮动元素脱离文档流，不占据空间（引起“高度塌陷”现象）
b. 浮动元素碰到包含它的边框或者浮动元素的边框停留。

浮动元素引起的问题

a. 父元素的高度无法被撑开，影响与父元素同级的元素
b. 与浮动元素同级的非浮动元素会跟随其后
c. 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构

解决方法如下：

1. 为父元素设置固定高度。
2. 为父元素设置 overflow:hidden即可清除浮动，让父元素的高度被撑开。
3. 用 clear:both样式属性清除元素浮动。
   注意：如果只有左浮动或只有右浮动，可以单独设置 clear:left或 clear:right，但是设置clear:both则都可以解决，所以此方法在工作中用得更多。
4. 外墙法是指在父元素外面，添加“一道墙”，设置属性 clear:both
5. 内墙法是指在父元素内部，浮动元素的最后面，添加“一道墙”，设置属性 clear:both
6. 伪元素是指为了少创建元素，对父元素添加afer伪元素，设置属性 content：“”；display ：block；clear:both。
   注意：这里所说的少创建元素，实际上并没有少创建，添加的伪元素也是元素，只不过没有写在HTML文档中而已。
7. 使用通用类 clearfix, clearfix的实现如下：

clearfix:after {content:" "；
	display:block;
	clear:both;
}
1
2
3
4

注意：推荐以上这种方式，因为 clearfix已经应用在各大CSS框架（如 Bootstrap等）中，并成为行业的默认规范。

如何居中div？如何居中一个浮动元素？

确定容器的宽高，例如宽400px、高200px的div.设置层的外边距。

div{ 
	float:left；
	width：400px；
	height：200px；
	margin：-100px 0 0-200px；
	/*注意，由于左上外边距优先级高于右下外边距优先级，因此，还可以简化设置 margin：-150px-250px；*/
	position:relative；left：50%；top：50%；
	/*为方便看效果，添加一种背景色*/
	background-color:pink
}
1
2
3
4
5
6
7
8
9
10

内联元素可以实现浮动吗？

在CSS中，任何元素都可以浮动。
不论浮动元素本身是何种元素，都会生成个块级框。
因此，对于内联元素，如果设置为浮动，会产生和块级框相同的效果。

什么是 FOUC（无样式内容闪烁）？你如何来避免 FOUC？

• 如果使用import方法对CSS进行导入，会导致某些页面在Windows下的IE出现一些奇怪的现象：
• 以无样式显示页面内容的瞬间闪烁，这种现象称之为文档样式短暂失效(Flash of Unstyled Content)，简称为FOUC。
• 原理：当样式表晚于结构性html加载，当加载到此样式表时，页面将停止之前的渲染。此样式表被下载和解析后，将重新渲染页面，也就出现了短暂的花屏现象。

解决方法：使用link标签将样式表放在文档head中。

line-height三种赋值方式有何区别？（带单位、纯数字、百分比）

• 带单位：px不用计算，em则会使元素以其父元素font-size值为参考来计算自己的行高
• 纯数字：把比例传递给后代，例如父级行高为1.5，子元素字体为18px，则子元素行高为1.5*18=27px
• 百分比：将计算后的值传递给后代
  参考《line-height的理解》、《浅析line-height和vertical》，查看在线源码。

:link、:visited、:hover、:active的执行顺序是怎么样的？

L-V-H-A，l(link)ov(visited)e h(hover)a(active)te
即用喜欢和讨厌两个词来概括

经常遇到的浏览器兼容性有哪些？如何解决？

a. 浏览器默认的margin和padding不同
b. IE6双边距bug
c. 在ie6，ie7中元素高度超出自己设置高度。原因是IE8以前的浏览器中会给元素设置默认的行高的高度导致的
d. min-height在IE6下不起作用
e. 透明性IE用filter:Alpha(Opacity=60)，而其他主流浏览器用 opacity:0.6
f. input边框问题，去掉input边框一般用border:none;就可以，但由于IE6在解析input样式时的BUG(优先级问题)，在IE6下无效

有哪项方式可以对一个DOM设置它的CSS样式？

a. 外部样式表：通过<link>标签引入一个外部css文件
b. 内部样式表：将css代码放在 <style> 标签内部
c. 内联样式：将css样式直接定义在 HTML 元素内部

什么是外边距重叠？重叠的结果是什么？

外边距重叠就是margin-collapse。
在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。
折叠结果遵循下列计算规则：
a. 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
b. 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
c. 两个外边距一正一负时，折叠结果是两者的相加的和。

css属性content有什么作用？有什么应用？

css的content属性专门应用在 before/after 伪元素上，用于来插入生成内容。
可以配合自定义字体显示特殊符号。

content属性与:before及:after伪元素配合使用，用来插入生成的内容，可以在元素之前或之后放置生成的内容。可以插入文本、图像、引号，并可以结合计数器，为页面元素插入编号。比如，查看如下代码。

body{counter-reset:chapter；}
h1:before{content："第" counter（ chapter）"章"}
h1{counter-increment:chapter：}
<h1></h1>
<h1></h1>
<h1></h1>
1
2
3
4
5
6

使用 content属性，并结合 :before选择器和计数器 counter，可以在每个<h1>元素前插入新的内容。

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

display的值有 block、none, inline、 inline- block、list-item、 table和 inherit。其作用如下。

• block是指块类型。默认宽度为父元素宽度，可设置宽高，换行显示。 none是指元素不会显示，已脱离文档流。
• inline是指行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。
• inline- block是指默认宽度为内容宽度，可以设置宽高，同行显示。
• list-item是指像块类型元素一样显示，并添加样式列表标记。
  注意：如，用div模拟li元素<ul>< div style=" display:list-item：">有课前端网</d></ul>。
• table是指此元素会作为块级表格显示。
• inherit是指从父元素继承 display属性的值。

简要描述块级元素和行内元素的区别。

• 块级元素的前后都会自动换行。默认情况下，块级元素会独占一行。
  如<p>、<h1-h6>、<div>都是块级元素，当显示这些元素中间的文本时，都将从新行中开始显示，其后的内容也将在新行中显示。

• 行内元素可以和其他行内元素位于同一行，在浏览器中显示时不会换行。
  如<a>、<span>等，对于行内元素，不能设置其高度和宽度。

• 还有一种元素是行内块级元素，
  如<img>、< input>元素等。这些元素可以和其他行内元素位于同一行，同时可以设置其高度和宽度。

常用的块属性标签及其特征有哪些？

常用块标签有div、hl、h6、ol、ul、li、d、 table、p、br、form。
块标签的特征有独占一行，换行显示，可以设置宽、高，块可以套块和行。

常用的行内属性标签及其特征有哪些？

行标签有span、a、img、var、em、strong、 textarea、select、 option、input。
行标签的特征有在行内显示，内容撑开宽、高，不可以设置宽、高（img, input、 textarea等除外），行只能套用行标签。

对行内元素设置 margin-top和 margin-bottom是否起作用？

不起作用
（需要注意行内元素的替换元素img、 Input，它们是行内元素，但是可以设置它们的宽度和高度，并且 margin属性也对它们起作用， margin-op和 margin- botton有着类似于 inline- block的行为）

如何用DIV+CSS实现3栏布局（左右固定200pX，中间自适应）？

具体代码如下：
html

<div class="container">
<div class="main">
<h2>有课前端网</h2>
</div>
<div class="left">左边内容</div>
< div class="right" >右边内容</div>
</dv>
1
2
3
4
5
6
7

CSS

.container div {height：200px；}
.container{ padding：0 200px；}
.main,.left,.right{position:relative；float:left；}
.left.right{width：200px；}
.main{ width：100%；background:yellow；}
.left {background:blue：margin-left：-100%；left：-200px；}
.right {background:green；margin-left：-200px；left：200px；}
1
2
3
4
5
6
7

在书写高效CSS时有哪些问题需要考虑？

（1）样式，从右向左解析一个选择器
（2）类型选择器的速度，ID选择器最快， Universal（通配符*）最慢。对于常用的4种类型选择器，解析速度由快到慢依次是ID、 class, tag和 universal。
（3）不要用标签限制ID选择器（如：ul#main- navigation{}，ID已经是唯一的，不需要Tag来限制，这样做会让选择器变慢）。
（4）后代选择器最糟糕（换句话说， html body ul li a{}这个选择器是很低效的）。
（5）想清楚你的需求，再去书写选择器。
（6）CSS3选择器（如nth- child）能够漂亮地定位我们想要的元素，又能保证CSS整洁易读。然而，这些神奇的选择器会浪费很多的浏览器资源。
（7）我们知道ID选择器的速度最快，但是如果都用ID选择器，会降低代码的可读性和可维护性等。在大型项目中，相对于使用ID选择器提升速度，代码的可读性和可维护性带来的收益更大。

说出几种解决IE6 Bug的方法。

解决方案如下：
（1）双边距问题，是使用float引起的。
解决方法是使用 display:inline。
（2）3像素问题，是使用float引起的。
解决方法是使用 margin- right:-3px。
（3）超链接 hover伪类样式，单击后失效。
解决方法是使用以下正确的书写顺序：L→V→H→A（link, visited, hover.， active）。
（4）z- index问题。
解决方法是给父级添加 position：relative
（5）PNG图片半透明问题。
解决方法是使用 JavaScript代码库，或使用IE滤镜
注意：在使用E滤镜解决PNG图片透明度的时候，在1E6中，会对事件产生影响。

如何定义高度很小的容器？

因为有一个默认的行高，所以在IE6下无法定义小高度的容器。
两种解决方案分别是 overflow:hidden或font-size:容器高度px

如何在图片下方设置几像素的空白间隙？

定义img为 display:block，或定义父容器为font-size:0。

如何解决IE6双倍 margin的Bug？

display:inline

如何让超出宽度的文字显示为省略号？

当文本溢出时，为了不显示省略标记（…），通过clip直接将溢出的部分裁剪掉。

1. 单行文本溢出

overflow:hidden;
width:xxx;
white-space:nowrap;
text-overflow:ellipsis;
1
2
3
4

2. 多行文本溢出

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;overflow: hidden;
1
2
3

适用范围：
因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；

注意：
-webkit-line-clamp用来限制在一个块元素显示的文本的行数。
为了实现该效果，它需要组合其他的WebKit属性。
常见结合属性：
（1）display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
（2）-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。

如果你觉着这样还不够美观， 那么就接着往下看：

div {    
	position: relative;    
	line-height: 20px;    
	max-height: 40px;    
	overflow: hidden;
}

div:after {    
	content: "..."; 
	position: absolute; 
	bottom: 0; right: 0; 
	padding-left: 40px;    
	background: -webkit-linear-gradient(left, transparent, #fff 55%);    
	background: -o-linear-gradient(right, transparent, #fff 55%);    
	background: -moz-linear-gradient(right, transparent, #fff 55%); 
	background: linear-gradient(to right, transparent, #fff 55%);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

注意：弊端：未超出行的情况下也会出现省略号，这样会不会很挫！！！ 没办法， 只能结合JS 进行优化该方法了。
1、将height设置为line-height的整数倍，
防止超出的文字露出。
2、给p::after添加渐变背景可避免文字只显示一半。
3、由于ie6-7不显示content内容，所以要添加标签兼容ie6-7（如：<span>…<span/>）；
兼容ie8需要将::after替换成:after。

如何使英文单词发生词内断行？

word-wrap:break-word

如何实现文本换行？

使用word-wrap属性。
normal，只在允许的断字点换行（浏览器保持默认处理）。
break-word，在长单词或URL地址内部进行换行。

如何实现IE6下的 position:fxed？

html_{overflow:hidden；}
body_{overflow:auto；height：100%：}
.fixed{position:fixed；
	position:absolute；
	left:0；
	top:0；
	padding:10px；
	backgroun:#000；
}
1
2
3
4
5
6
7
8
9

如何让min- height兼容IE6？

.min-height{
	min-height:100px；
	height:100px；
	background:red；
}
1
2
3
4
5

已知高度的容器如何在页面中水平垂直居中？

<style type=text/css">
# box{
	width：200px；
	height：200px；
	background:red；
	position:absolute；
	left：50%；
	top:50%;
	margin：-100px 0 0-100px；
	/*或者 marion：-100px*/
}
</style>
<div id="box“></div>
1
2
3
4
5
6
7
8
9
10
11
12
13

什么叫优雅降级和渐进增强？两者有什么区别？

• 优雅降级 graceful degradation是指一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

• 渐进增强 progressive enhancement是指针对低版本浏览器构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进并追加功能，以达到更好的用户体验。

两者的区别如下。

（1）优雅降级从复杂的现状开始，并试图减少用户体验的供给。
（2）渐进增强则从一个非常基础并且能够起作用的版本开始，并不断扩充，以适应未来环境的需要。
（3）降级（功能衰减）意味着往回看，而渐进增强则意味着朝前看，同时保诬其根基处于安全地带。

网页制作会用到哪些图片格式？

JPG：压缩率高，文件小，最常用。
PNG：支持无损压缩，色彩损失小，保真度高，文件稍大。
GIF：支持动画显示，但只支持256色显示，目前已经被Fash大量取代。

div+css的布局较table布局有什么优点？

（1）改版的时候更方便，只须改动CSS文件。
（2）页面加载速度更快、结构清晰、页面简洁。
（3）表现与结构分离。
（4）搜索引擎优化（SEO）更友好，排名更靠前。

如果设置<p>的font-sze为10rem，那么当用户重置或拖曳浏览器窗口时，它的文本会不会受到影响？

不会

谈谈你对BFC、IFC、GFC、FFC规范的理解。

• BFC（ Block Formatting Context）指块级格式化上下文，即一个创建了新的BFC的盒子是独立布局的，盒子里面的子元素的样式不会影响到外面的元素。在同一个BFC中，两个毗邻的块级盒在垂直方向（和布局方向有关系）的 margin会发生折叠。
  BFC决定元素如何对其内容进行布局，也决定与其他元素的关系和相互作用。

• IFC（ Inline Formatting Context）指内联格式化上下文，IFC的线框（ line box）高度由其包含行内元素中最高的实际高度计算而来（不受竖直方向的 padding/margin的影响）。IFC中的线框一般左右都贴紧整个IFC，但是会被foat元素扰乱。同一个IFC下的多个线框高度不同。
  IFC中是不可能有块级元素的，当插入块级元素时（如在p中插入div），会产生两个匿名块，两者与div分隔开，即产生两个IFC，每个IFC对外表现为块级元素，与div垂直排列。

• GFC（ GridLayout Formatting Context）指网格布局格式化上下文，即当把一个的 display值设为grid的时候，此元素将会获得一个独立的渲染区域。可以通过在网格容器（ grid container）上定义网格定义行（ grid definition row）和网格定义列（grid definition column），在网格项目（ grid item）上定义网格行（ grid row）和网格列（grid column）来为每一个网格项目定义位置和空间。

• FFC（ Flex Formatting Context）指自适应格式化上下文，即== display值为fex或lne-flex的元素将会生成自适应容器==。伸缩容器中的每一个子元素都是一个伸缩单元。伸缩单元可以是任意数量的。伸缩单元内和伸缩容器外的一切元素都不受影响。简单地说， Flexbox定义了伸缩容器内伸缩单元的布局。

访问超链接后 hover样式就不出现的原因是什么？应该如何解决？

因为访问过的超链接样式覆盖了原有的 hover和 active伪类选择器样式，解决方法是将CSS属性的排列顺序改为L→V→H→A（link, visited, hover, active）。

CSS中可以让文字在垂直和水平方向上重叠的两个属性是什么？

• 垂直方向的属性是 line-height；
• 水平方向的属性是 letter-spacing。

你知道哪些关于 letter- spacing的妙用？

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

在CSS中可以通过哪些属性定义，使得一个DOM元素不显示在浏览器可视范围内？

• 设置 display属性为none，

• 或者设置 visibility属性为 hidden技巧性的方式如下。
  设置宽高为0，透明度为0，设置z- index位置为-1000。

浏览器标准模式和怪异模式之间的区别是什么？

它们的区别是盒子模型的渲染模式不同。
可以使用 window. top document compatMode判断当前模式为何种模式结果为 Back Compat，表示怪异模式结果为 CSSICompat，表示标准模式。

如何避免文档流中的空白符合并现象？

空白符合并是标准文档流的特征之一，可以通过设置 white-spac修改这一特征，属性值如下。
pre表示不会合并空白符，渲染换行符，不会自动换行，相当于pre元素。
pre-wrap表示不会合并空白符，渲染换行符，自动换行pre-line表示合并空白符，渲染换行符，自动换行。
nowrap表示合并空白符，不会渲染换行符，不会自动换行。
normal表示默认值，按照文档流特点渲染，合并空白符，不会渲染换行符，自动换行。

常见的兼容性问题有哪些？

• png24位的图片在IE6浏览器上出现背景，解决方案是改成png8；也可以引段脚本进行处理浏览器默认的 margin 和 padding 不同,解决方案是用一个全局的*{ margin:0; padding:0;} 来统一它们。

• IE6双边距Bug是指在块属性标签float后又有横行的 margin时，在IE6中显示的margin比设置的大浮动IE产生的双倍距离（IE6的双边距问题是指在IE6下，如果对元素设置了浮动，同时又设置了 margin-left或 margin-right, margin的值会加倍）
  #box{ float:left；width：10px；margin：00 100px;}，这种情况下IE会产生20px的距离，解决方案是在float的标签样式控制中加入display:inline，将其转换为行内属性（这个符号只会被IE6识别）。

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

首先，巧妙地使用“\9”这一标记，将IE浏览器从所有情况中分离出来。然后，再次使用“+”将IE8和IE7、IE6分离开，这样IE8就能被独立识别。

.bb{
	background-color:#f1ee18；/所有识别*/ 
	background- color：#00deff\9；/IE6、7、8识别”/
	background- color：#a200ff；/*E6、7识别*/ 
	background- color：#1e0bdl；/"IE6识别”/
}
1
2
3
4
5
6

怪异模式问题是指漏写DTD声明， Firefox仍然会按照标准模式来解析网页，但在IE中会触发怪异模式。为避免怪异模式给我们带来不必要的麻烦，最好养成书写DTD声明的好习惯。现在可以使用[hml5]
推荐的写法是<doctype html上下 margin重合的问题IE和FF中都存在，相邻两个div的 margIn-et和 margin- right不会重合，但是margin-top和 margin- bottom会重合。

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

二、HTML5、CSS3

1. HTML5

1、HTML5有哪些新特性？移除了哪些元素？

• 拖放（ Drag and drop）API
• 语义化更好的内容标签（ header、nav、 footer、 aside、 article、section）
• 音频、视频（ audio、 video）API
• 画布（ Canvas）API
• 地理（ Geolocation）APl
• 本地离线存储（ localStorage），即长期存储数据，浏览器关闭后数据不丢失。
• 会话存储（sessionStorage），即数据在浏览器关闭后自动删除
• 表单控件包括 calendar、date、time、 email、url、search。
• 新的技术包括 webwork、 websocket、 Geolocation

移除的元素如下：

• 纯表现的元素，包括basefont,big、 center、font、s、striket、u
• 对可用性产生负面影响的元素，包括 frame、frameset、 Noframes

2、如何处理HTML5新标签的浏览器兼容问题？

IE8、IE7、IE6支持用 document. create Element产生标签，可以利用这一特性让这些浏览器支持HTML5新标签。浏览器支持新标签后，还需要添加标签默认的样式（最好的方式是直接使用成熟的框架，使用最多的是 html5shim框架），可以用 IE hack引入该框架

<！--[if 1t IE 9]>
	<script>src="http://html5shim.googlecode.com/svn/trunk/htm15.js</script>
<！[end if]-->
1
2
3

3、如何区别HTML和HTML5？

用 DOCTYPE声明新增的结构元素和功能元素来区别它们。

4、什么是HTML5？

HTML5是最新的HTML标准，它的主要目标是提供所有内容，而不需要任何Flash、 SilverLight等的额外插件，这些内容来自动画、视频、富GUI等.

HTML5是万维网联盟（W3C）和网络超文本应用技术工作组（ WHATWG）合作输出的。

5、新的HTML5文档类型和字符集是什么？

HTML5文档类型是<!doctype html>。

HTML5使用的字符集<meta charset="UTF8">。

6、HTML5 Canvas元素有什么作用？

Canvas元素用于在网页上绘制图形，该元素标签的强大之处在于可以直接在HTML上进行图形操作。

7、HTML5新增了哪些功能AP？

• Media APl
• Text Track API
• Application Cache API
• User Interaction
• Data Transfer API
• Command API
• Constraint Validation API
• History API

8、HTML5的离线存储有哪些？

localStorage，可长期存储数据，即浏览器关闭后数据不丢失;
sessionStorage，数据在浏览器关闭后自动删除，

9、HTML5的form如何关闭自动补全功能？

将不想要提示的form元素下的 Input元素的 autocomplete属性设置为off

10、如何在HTML5页面中嵌入音频、视频？

• 音频支持的格式包括MP3、Wav和Ogg等，嵌入方式如下。

<audio controls>
	<source src="icketang.mp3" type="audio/mpeg">
Your browser does'nt support audio embedding feature.
</audio>
1
2
3
4

• 视频支持的格式包括MP4、WebM和Ogg等，嵌入方式如下。

< video width=”450” height=”340” contro1s>
	<source src="icketang.mp4"  type="video/mp4">
Your browser does'nt support video embedding feature.
</video>
1
2
3
4

11、HTML5引入了哪些新的表单属性？

• datalist
• datetime
• output
• keygen
• date
• month
• week
• time
• number
• range
• emailurl

12、如何显示我们自己画的一个弹框？

• 在页面上单击一个按钮，
• 弹出一个弹框，而弹框也是自己写的一个div。
• 单击前，先把弹框隐藏， onclick事件发生之后就会显示出来

13、HTML5应用缓存和常规的HTML浏览器缓存有什么差别？

HTML5应用缓存最关键的就是支持离线应用，可获取少数或者全部网站内容，包括HTML、CSS、图像和 JavaScript脚本并存在本地。该特性提升了网站的性能，可通过如下方式实现。

<！doctype html>
<html manifest="example. appcache">
......
</html>
1
2
3
4

与传统的浏览器缓存比较，该特性并不强制要求用户访问网站。

14、为什么HTML5里面不需要DTD（ Document Type Definition，文档类型定义）？如果不放入<!doctype html>标签，HTML5还会工作吗？

HTML5没有使用SGML或者 XHTML，它是一个全新的类型，因此不需要参考DTD。对于HTML5，仅须放置下面的文档类型代码，让浏览器识别HTML5文档。

如果不放入<!doctype html>标签，HTML5不会工作。浏览器将不能识别出它是HTML文档，同时HTML5的标签将不能正常工作。

15、本地存储和会话（事务）存储之间的区别是什么？

• 本地存储数据持续永久，
• 会话存储在浏览器打开时有效，在浏览器关闭时会话重置存储数据。

16、HTML5中的应用缓存是什么？

帮助用户离线浏览页面。
换句话说，如果网络连接不可用，打开的页面就来自浏览器缓存，离线应用缓存可以帮助用户达到这个目的。
应用缓存可以帮助用户指定哪些文件需要缓存，哪些不需要

17、如果把HTML5看成一个开放平台，它的构建模块有哪些？

如果把HTML5看成一个开放平台，它的构建模块至少包括以下几个，如<nav><header><section><footer>。

• <nav>标签用来将具有导航性质的链接划分在一起，使代码结构在语义化方面更加准确
• < header>标签用来定义文档的页眉。
• < section>标签用来描述文档的结构。
• < footer>标签用来定义页脚。在典型情况下，该元素会包含文档作者的姓名、文档的创作日期和联系信息

18、HTML5应用程序缓存为应用带来什么优势？

应用程序缓存为应用带来3个优势。

1. 离线浏览，让用户可在应用离线时（网络不可用时）使用它们。
2. 速度，让已缓存资源加载得更快。
3. 减少服务器负载，让浏览器将只下载服务器更新过的资源。

19、与HTML4比较，HTML5废弃了哪些元素？

• frame
• frameset
• noframe
• applet
• big
• center
• basefont

20、请你说一下 Web Worker和 WebSocket的作用。

• Web Worker的作用如下：

  1. 通过 worker= new Worker（url）加载一个 JavaScript文件，创建一个 Worker，同时返回一个 Worker实例
  2. 用 worker.postMessage（data）向 Worker发送数据
  3. 绑定 worker.onmessage接收 Worker发送过来的数据
  4. 可以使用 worker.terminate()终止一个 Worker的执行。

• WebSocket的作用如下。
  它是Web应用程序的传输协议，提供了双向的、按序到达的数据流。它是HTML5新増的协议， WebSocket的连接是持久的，它在客户端和服务器之间保持双工连接，服务器的更新可以及时推送到客户端，而不需要客户端以一定的时间间隔去轮询。

21、如何实现浏览器内多个标签页之间的通信？

在标签页之间，调用 localstorge、 cookies等数据存储，可以实现标签页之间的通信

22、如何让 Websocket兼容低版本浏览器？

使用 Adobe Flash Socket、 ActiveX HTMLFile（E）、 multipart编码发送XHR

与长轮询发送XHR等，可以实现不支持 WebSocket API的浏览器对 Web Socket的兼容。

23、HTML5为浏览器提供了哪些数据存储方案？

HTML5中的 Web Storage包括两种存储方式，分别是 sessionStorage和 localStorage。

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

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

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

24、localStorage和 cookie的区别是什么？

localStorage的概念和cookie相似
区别是:

• localStorage是为了更大容量的存储设计的。 localStorage拥有 setlten, getItem、 removeltem、 clear等方法,localStorage仅因为是为了在本地“存储”数据而已，无法跨浏览器使用。
• cookie的大小是受限的，并且每次请求一个新页面时， cookie都会被发送过去，这样无形中浪费了带宽。另外， cookie还需要指定作用域，不可以跨域调用。cookie则需要前端开发者自己封装 setCookie和 get Cookie。但 cookie也是不可或缺的，因为 cookie的作用是与服务器进行交互，并且还是HTP规范的一部分，
  而

25、请你谈谈 cookie的特点。

cookie虽然为持久保存客户端数据提供了方便，分担了服务器存储的负担，但是有以下局限性。

1. 每个特定的域名下最多生成20个 cookie。
2. IE6或更低版本最多有20个 cookie。
3. IE7和之后的版本最多可以有50个 cookie。
4. Firefox最多可以有50个 cookie。
5. Chrome和 Safari没有做硬性限制。

IE和 Opera会清理近期最少使用的 cookie, Firefox会随机清理 cookie。

cookie最大为4096字节，为了兼容性，一般不能超过4095字节。

IE提供了一种存储方式，可以让用户数据持久化，叫作 userdata，从IE5.0就开始支持此功能。每块数据最多128KB，每个域名下最多1MB。这个持久化数据放在缓存中，如果缓存没有被清理，就会一直存在。
优点如下：

1. 通过良好的编程，控制保存在 cookie中的 session对象的大小。
2. 通过加密和安全传输技术（SSL），降低 cookie被破解的可能性。
3. 只在 cookie中存放不敏感数据，即使被盗也不会有重大损失。
4. 控制 cookie的生命周期，使之不会永远有效。数据偷盗者很可能得到一个过期的 cookie。
   缺点如下：
5. “ cookie”的数量和长度有限制。每个 domain最多只能有20条 cookie，每个cookie的长度不能超过4KB，否则会被截掉。
6. 安全性问题。如果 cookie被别人拦截了，就可以取得所有的 session信息。即使加密也于事无补，因为拦截者并不需要知道 cookie的意义，他只要原样转发 cookie就可以达到目的。
7. 有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务器端保存一个计数器。如果把这个计数器保存在客户端，那么它起不到任何作用

26、cookie和 session的区别是什么？

区别如下：

1. cookie数据存放在客户的浏览器上， session数据存放在服务器上。
2. cookie不是很安全，别人可以分析存放在本地的 cookie并进行 cookie欺骗。考虑到安全问题应当使用 session。
3. session会在一定时间内保存在服务器上。当访问增多时，会占用较多服务器的资源。为了减轻服务器的负担，应当使用 cookie。
4. 单个 cookie保存的数据不能超过4KB，很多浏览器都限制一个站点最多保存20个 cookie。

所以个人建议可以将登录信息等重要信息存放在 session中，其他信息（如果需要保留）可以存放在 cookie中。

27、什么是SVG？

SVG即可缩放失量图形（ Scalable Vector Graphics）。它是基于文本的图形语言，使用文本、线条、点等来绘制图像，这使得它轻便、显示迅速。

28、Canvas和SVG的区别是什么？

两者的区别如下：

1. 一旦 Canvas绘制完成将不能访问像素或操作它；任何使用SVG绘制的形状都能被记忆和操作，可以被浏览器再次显示。
2. Canvas对绘制动画和游戏非常有利；SVG对创建图形（如CAD）非常有利。
3. 因为不需要记住以后事情，所以 Canvas运行更快；因为为了之后的操作，SVG需要记录坐标，所以运行比较缓慢。
4. 在 Canvas中不能为绘制对象绑定相关事件；在SVG中可以为绘制对象绑定相关事件。
5. Canvas绘制出的是位图，因此与分辨率有关；SvG绘制出的是矢量图，因此与分辨率无关。

29、如何使用 Canvas和HTML5中的SVG画一个矩形？

使用SVG绘制矩形的代码如下：

<svg xmlns=http://www.w3.org/2000/svg  version="1.1">
	<rect style="fill:rgb（255,100，0）；"height=200"  width="400"></rect>
</svg>
1
2
3

使用 Canvas绘制矩形的代码如下。

<canvas id="myCanvas" width=500" height="500"></canvas>
var canvas=document.getElementById（'mycanvas'）；
var ctx= canvas.getContext（'2d'）；
ctx.rect（100,100,300,200）；
ctx.fillstyle = 'pink '
ctx.fill()
1
2
3
4
5
6

30、本地存储的数据有生命周期吗？

本地存储的数据没有生命周期，它将一直存储数据，直到用户从浏览器清除或者使用 JavaScript代码移除。

31、HTML5中如何实现应用缓存？

首先，需要指定“manifest”文件，" manifest”文件帮助你定义缓存如何工作以下是“ manifest”文件的结构。

CACHE MANTEEST 
# version 1.0
/demo. css
/demo. js
/demo.png
1
2
3
4
5

所有 manifest文件都以” CACHE MANIFEST"语句开始。
#（散列标签）有助于提供缓存文件的版本。
manifest文件的内容类型应是"text/ cache- manifest”。
创建一个缓存 manifest文件后，在HTML页面中提供 manifest链接，代码如下所示。

<html manifest="icketang. appcache">
1

第一次运行以上文件时，它会添加到浏览器应用缓存中，在服务器宕机时，页面从应用缓存中获取数据。

32、如何刷新浏览器的应用缓存？

应用缓存通过变更“#”标签后的版本号来刷新，如下所示：

CACHE  MANIFEST
 # version 2.0
/icketang.css
/icketang.js
/icketang. png
NETWORK：
 login. php
1
2
3
4
5
6
7

33、应用缓存中的回退是什么？

应用缓存中的回退会帮助你指定在服务器不可访问时，显示某文件。例如在下面的manifest文件中，如果用户输入了“/home”，同时服务器不可到达，“404htm”文件应送达。

FALLBACK：
/home//404. html
1
2

34、应用缓存中网络命令的作用是什么？

网络命令描述不需要缓存的文件，例如以下代码中“ login.php”始终都不应该缓存或者离线访问。

NETWORK 
login. php
1
2

34、什么是 Websql？

Websql是一个在浏览器客户端的结构关系数据库，是浏览器内的本地 RDBMS（关系型数据库管理系统），可以使用SQL查询。

35、Websql是HTML5的一个规范吗？

不是，许多人把它标记为HTML5，但是它不是HTML5规范的一部分，这个规范是基于 SQLite的

36、HTML5如何实现跨域？

在服务器端设置允许在其他域名下访问，例如允许所有域名访问以下内容。

response.setHeader（"Access-Control-Allow-Origin"，"*"）；
response.setHeader （"Access-Control-Allow-Methods"，"POST"）；
response.setHeader（"Access-Control-Allow-Headers"，"x-requested-with, content-type"）；
1
2
3

2. CSS3

CSS3有哪些新特性？

• 圆角（ border- radius）；
• 阴影（box- shadow）；
• 对文字加特效（text- shadow）；
• 线性渐变（ gradient）；
• 变换（ transform ） 如（ transform:rotate（9deg）scale（0.85,0.90）translate（0px, 30px）skew（-9deg,0deg）；// 旋转、缩放、定位、倾斜。
• 更多的CSS选择器；
• 多背景设置；
• 色彩模式，如rgba；
• 伪元素::selection;
• 媒体查询；
• 多栏布局；
• 图片边框（ border-image）。

CSS3新增伪类有哪些？

• p:first- of-type，选择属于其父元素的首个<p>元素的每个<p>元素。
• p:last-of-type，选择属于其父元素的最后一个<p>元素的每个<p>元素。
• p:only- of-type，选择属于其父元素的唯一<p>元素的每个<p>元素。
• p:only- child，选择属于其父元素的唯一子元素的每个<p>元素。
• p:nth- child(2)，选择属于其父元素的第二个子元素的每个<p>元素。
• :enabled:disabled，控制表单控件的禁用状态.
• :checked，单选框或复选框被选中。

first-child与first-of-type的区别是什么？

• first-child匹配的是父元素的第一个子元素，可以说是结构上的第一个子元素。
• first- of-type匹配的是该类型的第一个元素，类型就是指冒号前面匹配到的元素，并不限制是第一个子元素，只要是该类型元素的第一个即可。当然，这些元素的范围都属于同一级，也就是同辈。

<div>
<p></p>
<span></span>
</div>
1
2
3
4

p:first-child匹配到p元素，因为p元素是div的第一个子元素。
span:first-child匹配不到span元素，因为span是div的第二个子元素。
p:first-of-type匹配到p元素，因为p是div所有为p的子元素中的第一个。
span:first-of-type匹配到span元素，因为span是div所有为span的子元素中的第一个。

当使用 transform:translate属性时会出现闪烁现象，如何解决？

-webkit-backface-visibility:hidden;
//隐藏转换的元素的背面
webkit-transform-style:preserve-3d；
//使被转换的元素的子元素保留其3D转换
webkit-transtorm:translate3d（0,0,0）；
//开启GPU硬件加速模式，使用GPU代替CPU渲染动画
1
2
3
4
5
6

注意：在某些 Android系统中，有时会有莫名其妙的Bug，建议慎重使用。

CSS3动画如何在动作结束时保持该状态不变？

采用 animation- fill-mode。其可以设置为以下值。
none，不改变默认行为。
forwards，当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）
backwards，在 animation-delay所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
both，向前和向后填充模式都可以应用。

用两种方式实现某DⅣ元素以每秒50px的速度左移100X。

方法一，使用 jQuery

$('div‘).animate({'left':100},2000）;
1

方法二，使用 JavaScript+CSS3
css

div{
 transition:all  2s linear；
 // linear 规定以相同速度（匀速）开始至结束的过渡效果
  }
1
2
3
4

JavaScript：

div.style.left =（div.offsetLeft + 100）+'px'；
1

介绍一下box-sizing属性。

• box-sizing属性主要用来控制元素盒模型的解析模式。默认值是 content-box。
• content-box让元素维持W3C的标准盒模型。元素的宽度/高度由 border+ padding+content的宽度/高度决定，设置 width/height属性指的是指定 content部分的宽度/高度。
• border-box让元素维持IE传统盒模型（IE6以下版本和IE6、IE7的怪异模式）。设置 width/height属性指的是指定 border+ padding+ content的宽度/高度。
  标准浏览器下，按照W3C规范解析盒模型。一旦修改了元素的边框或内距，就会影响元素的盒子尺寸，就不得不重新计算元素的盒子尺寸，从而影响整个页面的布局。

你对 content-box盒模型了解多少？

布局所占宽度（ Width）如下：

Width =width + padding-left + padding-right+ border-left + border-right
1

布局所占高度（ Height）如下：

Height= height + padding-top + padding-botton + border-top + border-bottom
1

你对 padding-box盒模型了解多少？

布局所占宽度（Width）如下：

Width= width（包含 padding-left+ padding-right)+ border-top+ border-bottom
1

布局所占高度（ Height）如下：

Height= height（包含 padding-top+ padding-bottom)+ border-top +border-bottom
1

你对 border.-box盒模型了解多少？

布局所占宽度（ Width）如下：

Width= width（包含 padding-left + padding-right +border-left+ border-right)
1

布局所占高度（ Height）如下：

Height= height（包含 padding-top+ padding-bottom+ border-top +border-bottom）
1

CSS3动画的优缺点是什么？

优点：

• （1）在性能上会稍微好一些，浏览器会对CSS3的动画做一些优化。
• （2）代码相对简单。

缺点:

• （1）在动画控制上不够灵活
• （2）兼容性不好。
• （3）部分动画功能无法实现

Animation与 Transition的异同是什么？

Animation与 Transition的功能相同，都是通过改变元素的属性值来实现动画效果的。

它们的区别在于:

• Transition的功能时只能用指定属性的开始值和结束值，然后在这两个属性值之间使用平滑过渡的方式实现动画效果，因此不能实现比较复杂的动画效果。
• Animation功能通过定义多个关键帧，以及定义每个关键帧中元素的属性值来实现更为复杂的动画效果。

Animation属性值有哪些？

• animation-name，即动画名称。
• animation- duration，即动画持续时间。
  其他属性值如下。
• animation- play-state，即播放状态（ running表示播放， paused表示暂停），可以用来控制动画暂停。
• animation- timing- function，即动画运动形式。
• animation- delay，即动画延迟时间。
• mation-iteration- count，即重复次数。
• animation-direction，即播放前重置（ alternate动画直接从上一次停止的位置开始执行）。

媒体查询的使用方法是什么？

@media媒体类型and（媒体特性）{样式规则}
这通常在移动端使用。在做移动端开发的时候，为了适配多屏幕，使用rem单位，然后根据屏幕尺寸的改变动态地设置根节点HIML的font-size值。这样可以解决多屏幕适配的问题。

html{
	font-size：20px;
} 
@media （min-width：320px） {
	html {
		font-size：12px；
	}
}
@media （min-width：360px）{
	html{
		font-size：16px；
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13

但是这种做法有两个缺点:
（1）适配屏幕的尺寸不是连续的。
（2）会在CSS文件中添加大段的查询代码，增加了CSS文件的大小，为改进上述缺点，可以使用 JavaScript获取移动设备屏幕的宽度，根据设计稿的原型尺寸，动态地计算font-size的值。

如何设置CSS3文本阴影？

h1{text- shadow：水平阴影，垂直阴影，模糊距离，阴影颜色}
1

如何把元素从左侧移动50像素，从顶端移动100像素？

div{
 	transform:translate（50px,100px）；
	-ms-transform:translate（50px, 100px）；/*IE9*/
	-webkit-trans form:translate（50px, 100px）；  /*Safari 和 Chrome */
	-o-trans form:translate（50px, 100px）；/*opera*/
	-moz-transform:translate（50px, 100px）；/* Firefox */
}
1
2
3
4
5
6
7

如何把一个元素旋转30°？

div{
 	transform:rotate（30deg）；
	-ms-transfornm:rotate （30deg）；/*IE9*/
	-webkit-transform:rotate（30deg）；/* Safar1和 Chrome*/
	-o-transform:rotate（30deg）；/* opera*/
	-moz-transform:rotate（30deg）；/*Firefox*/
}
1
2
3
4
5
6
7

如何使用matrix()将di元素旋转30°？

div{
	 transform:matrix（0.866,0.5，-0.5,0.866,0,0）；
	-ms-transform:matrix(0.866,0,5=0,5,0,866,0,0);   /*IE9*/
	-moz-trans form:matrix(0. 866,0.5，-05,0.866,0,0);  /*Firefox */
	-o-transform:matrix(0.866,0.5，-0,5,0.866,0,0);  /*Opera*/
}
1
2
3
4
5
6

如何利用CSS3制作淡入淡出的动画效果？

（1）定义动画关键帧，名称为 fadeIn

@-webkit-keyframes fadeIn {
 	from {
		opacity：0；/*初始状态，透明度为0*/ 
	}to { 
		opacity：1；/*结尾状态，透明度为1*/
	}
}
@-webkit-keyframes fadeout {
 	from { 
 		opacity：1；/*初始状态，透明度为1*/
	}to{
	 	opacity：0；/*结尾状态，透明度为0*/
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

（2）为div增加如下动画代码。

div{
	-webkit- animation-name:fadeIn；/*动画名称*/
	- webkit- animation-duration：3s；/*动画持续时间*/
	- webkit- animation-iteration- count：1；/*动画次数*/
	- webkit- animation- delay：0s；/*延迟时间*/
}
1
2
3
4
5
6

说一说盒阴影。

盒阴影的语法结构与文本阴影类似，如box- shadow：5px 5px 5px rgba（255，15，255，0.5）。
但是，盒阴影多了一个属性，即外延值 inset.，如box- -shadow：5px 5px 25px rgba（0,0,255，0.5）inset。

如何为盒子添加蒙版？

demo {
	height：144px ；
	width：144px；
	background:url（logo.png）；
	-webkit-mask-image:url（shadow.png）；
	-webkit-mask-position：50%  50%；
	-webkit-mask-repeat:no-repeat；
}
1
2
3
4
5
6
7
8

蒙版复合属性的语法是-webkit-mask:url（ pro_pho_show_pic.png）50% 50% no- repeat。

蒙版相关属性如下。

• -webkit-mask-clip，即蒙版裁剪位置。
• -webkit-mask- origin，即蒙版原点位置。

如何通过CSS3实现背景颜色线性渐变？

div{
	background：-webkit-linear-gradient （left, red, green 50%， blue）；
}
1
2
3

如何实现CSS3倒影？

通过-webkit-box-reflect设置方向、距离。

方向可以设置为 below、 above、left、 right。

下面给出一段示例代码

.demo {
	height：144px；
	width：144px；
	background:url （logo. png）；
 	-webkit-box-reflect:below 10px；
 }
1
2
3
4
5
6

当元素不面向屏幕时其可见性如何定义？

backface-visibility:visible | hidden。

CSS3中 transition属性值及含义是什么？

transition属性是一个简写属性，用于设置以下4个过渡属性。

• transition- property，哪个属性需要实现过渡
• transition- duration，完成过渡效果需要多少秒/毫秒
• transition- timing- function，速度效果的运动曲线，如 linear、ease-in、ease、ease-out、 ease-in-out, cube-bezier。
• transition- delay，规定过渡开始前的延迟时间。

消除transition闪屏

 .css {
  	-webkit-transform-style: preserve-3d;
  	-webkit-backface-visibility: hidden;
  	-webkit-perspective: 1000;
}
1
2
3
4
5

以上的 解决方案只是改变 视角 来启动硬件加速的一种方式；

过渡动画（在没有启动硬件加速的情况下）会出现抖动的现象，
启动硬件加速的 另外一种方式：

.css {
 	-webkit-transform: translate3d(0,0,0);
 	-moz-transform: translate3d(0,0,0);
	-ms-transform: translate3d(0,0,0);            
	transform: translate3d(0,0,0);
}
1
2
3
4
5
6

启动硬件加速
最常用的方式：

• translate3d、
• translateZ、
• transform
• opacity属性/过渡动画
  （需要动画执行的过程中才会创建合成层，动画没有开始或结束后元素还会回到之前的状态）
• will-chang属性（这个比较偏僻），一般配合opacity与translate使用（而且经测试，除了上述可以引发硬件加速的属性外，其它属性并不会变成复合层），

弊端： 硬件加速会导致 CPU性能占用量过大，电池电量消耗加大 ；
因此 尽量避免泛滥使用硬件加速。

如何相对于内容框定义图像？

语法为 background- origin:padding- box | border- box |content-box。

.demo{
	height：200px；
	width：200px；
	padding：50px；
	border: 1px solid #ccc；
	background-image: url（'logo. png'）；
	background-repeat: no-repeat；
	background-position: left top；
	background-origin: content-box;
}
1
2
3
4
5
6
7
8
9
10

background-clip和 background-origin的区别是什么？

• background-clip规定背景（包括背景颜色和背景图片）的绘制区域它有3种属性，分别是 border-box、 padding-box、 content-box。

  border-box，即背景从边框开始绘制。
  padding-box，即背景在边框内部绘制。
  content-box，即背景从内容部分绘制。

• background- origin，规定背景图片的定位区域。
  它也有3种属性：border-box, padding-box, content–box。但要注意，它描述的是“背景图片”。也就是说，它只能对背景做样式上的操作。一旦规定了图片开始绘制的区域，就当于规定图片的左上角从什么地方开始，其他的它就不负责了。

为了把文本分隔为4列并使两列之间间隔30像素，应该如何实现？

div{
	-moz-column-count：3；
	/* Firefox /-webkit-column-count：3；
	/* Safari和 Chrome*/ 
	column-count：3；
	-moz-column-gap：40px；
	/*Firefox*/ 
	-webkit- column-gap：40px；
	/* Safar1和 Chrome*/ 
	column-gap：40px；
	width：600px；
}
1
2
3
4
5
6
7
8
9
10
11
12

说明如何用@ keyframes使dv元素移动200像素。

div{ 
	width：100px；
 	height：50px；
	background:#f30；
	animation:move 3s；
}
@keyframes move{
	from{
	margin-left:0px；
	}to {
		margin-left:200px；
   }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

让图文不可复制

这点应该大家 都很熟悉了， 某些时候【你懂的】为了快捷搜索答案，可是打死也不让你复制

-webkit-user-select: none; 
-ms-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
1
2
3
4
5

那有些网页为了尊重原创，复制的文本 都会被加上一段来源说明，是如何做到的呢？问的好！ 等的就是你这个问题 -_- 。

大致思路：

1、答案区域监听copy事件，并阻止这个事件的默认行为。
2、获取选中的内容（window.getSelection()）加上版权信息，
然后设置到剪切板（clipboarddata.setData()）。