Candidate

HTML

1.link & @import

@import 可以在CSS文件中引用另一个CSS文件

当出现在HTML页面时候，区别有以下五点

#1 link是html标签，而@import是CSS提供的

#2 link在页面加载时同时被加载，而@import则会在最后加载，网速慢时会产生页面闪烁现象

#3 link无兼容问题，@import只有IE5以上才能识别

#4 当使用JS控制Dom去改变样式的时候，只能使用link标签

#5 link权重高于@import

http://www.dreamdu.com/blog/2007/05/11/css_link_import/

2.inline block void

每个元素都有display属性，根据其默认值可以判断元素是哪种

block: div, h1,...,hn, ul, ol, li, dl, dt, dd, p

inline: span, a, b, img, input, select, strong

void: br, hr, link, meta

http://blog.csdn.net/sunlovefly2012/article/details/16859659

3.Rendering Engine

IE: Trident  Mozilla: Gecko Chrome:Blink(branch of Webkit)  Opera:Blink

4.常见的兼容性问题

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

#2 如何单独将IE6,7,8区分开来

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

#3 Chrome约定最小的字体为12px，而且在27版本后取消了-webkit-text-size-adjust属性

.webkit {    font-size: 9px;    -webkit-transform: scale(0.75);    -o-transform: scale(1);}

#4 png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.

5.Cookie, LocalStorage & SessionStorage

都是key value存储

Cookie: 网景公司93年提出，用来保存登录信息，每次请求，都会在header中带入；大小限制在4kb左右，有过期时间

LocalStorage: 浏览器本地缓存，关闭页面或者浏览器也能保存，Chrome为5M，其他浏览器大概只有2.5M；

SessionStorage: 浏览器本地缓存，关闭页面即失效；类似于Session状态，大概也是名称由来吧

6.如何实现浏览器内多个标签页之间的通信

调用LocalStorage或者Cookies等本地存储方式

7.HTML5的离线存储

LocalStorage & SessionStorage

8.html5的form如何关闭自动完成功能

给不想要提示的form或者下面的某个input设置为autocomplete=off

9.HTML5有哪些新特性，移除了哪些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5

10.语义化理解

一些标签，比如 div span 这些是没有语义的，但是input form img是有语义的

HTML5引入了一系列语义标签 比如 header footer nav等，让页面的内容结构化

#1 可以使得浏览器和搜索引擎解析，利于SEO

#2 使人更容易将网站分块，便于阅读和理解

http://www.w3schools.com/html/html5_semantic_elements.asp

CSS

1.CSS Hack

不同厂商的浏览器和不同浏览器的不同版本对CSS解析和支持是不一样的，为了页面的统一效果，需要针对不同浏览器些不同的CSS代码，这个过程就叫做CSS Hack

#1 条件注释法，只是针对IE有效，也是IE官方推荐的方法

#2 类内属性前缀法

#3 选择器前缀法

http://blog.csdn.net/freshlover/article/details/12132801

2.CSS盒子模型

#1 盒模型包括：content, padding, border, margin

#2 分为两种：IE盒模型和W3C盒模型，IE盒模型中content部分包括了padding和border

3.CSS选择符

id选择器，类选择器，标签选择器，子选择器，后代选择器，通配符选择器，属性选择器，伪类选择器

4.CSS哪些属性可以被继承

很多，比如font-size, font-family, line-height, color, text-align等等

不能被继承的有 border, margin, padding, width, height, position

http://www.cnblogs.com/cnluoxh/archive/2013/03/13/2957114.html

5.CSS优先级算法

ID选择器 #aaa 100
类选择器 .aaa 10
标签选择器 h1 元素的tagName 1
属性选择器 [title] 详见这里 10
相邻选择器 selecter + selecter 拆分为两个选择器再计算
兄长选择器 selecter ~ selecter 拆分为两个选择器再计算
亲子选择器 selecter > selecter 拆分为两个选择器再计算
后代选择器 selecter selecter 拆分为两个选择器再计算
通配符选择器 * 0
各种伪类选择器 如:link， :visited， :hover， :active， :target， :root， :not等 10
各种伪元素 如::first-letter,::first-line,::after,::before,::selection 1

#id1 div  101

.class1 .class2 div 21

#1 权重高的会优先选择

#2 权重相同的样式以后面的为准

#3 !important的优先级最高

http://www.cnblogs.com/rubylouvre/archive/2010/03/17/1687786.html

6.CSS3新增伪类

p:first-of-type 

p:last-of-type

p:only-of-type 

p:only-child

p:nth-child(2)

都是选择属于其父元素的....

:enable :disable :checked

7.div居中，浮动元素居中

#1 给div设置一个width，然后margin: 0 auto;

#2 

.div {  width:500px ;   height:300px;//高度可以不设  margin: -150px 0 0 -250px; //主要是top为-150px  position:relative; //相对定位  background-color:red; //方便看效果  left:50%;}

http://www.w3cplus.com/css/the-definitive-guide-to-using-negative-margins.html

8.display的值和作用，position的值和作用

#1 display 

block 块元素，自动换行

none 缺省值，如同行内元素一样显示，不换行

inline-block 元素本身如同行内元素显示，元素内容按照block显示

#2 position

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

absolute 绝对定位，相对于static定位以外的第一个父元素进行；

fixed 绝对定位，相对于浏览器窗口的定位，IE6,7,8不支持；

relative 相对定位，相对于正常流位置进行的定位

9.CSS3有哪些新的特性

border-radius text-shadow box-shadow gradient transform scale translate 增加了CSS选择器 

10.经常遇到CSS的兼容性有哪些

11.为什么要初始化CSS样式

因为浏览器的兼容问题，不同浏览器对不同标签的初始化是不同的，为了达到显示效果的一致性需要初始化一些标签的CSS样式

淘宝的样式初始化：

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }h1, h2, h3, h4, h5, h6{ font-size:100%; }address, cite, dfn, em, var { font-style:normal; }code, kbd, pre, samp { font-family:couriernew, courier, monospace; }small{ font-size:12px; }ul, ol { list-style:none; }a { text-decoration:none; }a:hover { text-decoration:underline; }sup { vertical-align:text-top; }sub{ vertical-align:text-bottom; }legend { color:#000; }fieldset, img { border:0; }button, input, select, textarea { font-size:100%; }table { border-collapse:collapse; border-spacing:0; }

12.position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样？

#1 浮动或绝对定位的元素，只能是块元素或表格

#2 当元素是绝对定位时，浮动失效，'display' 会被按规则重置

#3 

http://www.cnblogs.com/jackyWHJ/p/3756087.html

13.BFC

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

14.浮动

15.

JS

JS原型，原型链

https://github.com/markyun/My-blog/tree/master/Front-end-Developer-Questions/Questions-and-Answers