HTML/5、CSS/3相关

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

新特性

HTML5现在已经不是SGML的子集，主要是关于图像，位置，存储，多任务等功能的增加。

拖拽释放（Drag and drop）API

语义化更好的内容标签（header,nav,footer,aside,article,section） ：aside article section没用过

音频、视频API(audio,video)

画布(Canvas) API ：canvas用的比较少

地理(Geolocation) API ：geolocation没用过

本地离线存储 localStorage 长期存储数据 浏览器关闭后数据不丢失

sessionStorage 的数据在浏览器关闭后自动删除

表单控件，calendar、date、time、email、url、search

新的技术   

webworker, websocket, Geolocation

一般都是对websocket有一定的了解或应用，webworker和Geolocation普遍来说用的较少，可以针对了解一下

移除元素

 纯表现的元素：basefont，big，center，font, s，strike，tt，u；

 对可用性产生负面影响的元素：frame，frameset，noframes；

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

 IE8/IE7/IE6支持通过document.createElement方法产生的标签，

 可以利用这一特性让这些浏览器支持HTML5新标签，

 当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架

如何区分HTML和HTML5

1. DOCTYPE声明
2. 新增的结构元素
3. 功能元素

二、CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？

  CSS 选择符：

1. id选择器(#)

2. 类选择器(.)

3. 标签选择器(div, h1, p )

4. 相邻选择器(div + img)

5. 子代选择器(ul > li) 

6. 后代选择器(li a)    要知道子代和后代的区别

7. 通配符选择器

8. 属性选择器(a[rel="extent"])

9. 伪类选择器(a:hover, li:nth-child(n))

可以继承的属性

可继承的样式： font-size font-family color, UL LI DL DD DT;

UL LI DL DD DT 是什么样式？ WTF

不可继承的样式：border padding margin width height ;

优先级

  !important > id > class > tag

  important 比 内联优先级高,但内联比 id 要高

CSS新增伪类

  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 单选框或复选框被选中。

三、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

  在CSS3中唯一引入的伪元素是::selection.

  ::selection是干啥的？

  媒体查询，多栏布局

  border-image

四、解释盒模型宽高值得计算方式，边界塌陷，负值作用，box-sizing概念？

1. 盒模型：IE 678 下(不添加doctype) 使用ie盒模型，宽度 = 边框 + padding + 内容宽度； chrom、IE9+、(添加doctype) 使用标准盒模型， 宽度 = 内容宽度。

 2. box-sizing : 为了解决标准盒子和IE盒子的不同，CSS3增添了盒模型属性box-sizing：content-box(默认)，border-box 让元素维持IE传统盒子模型， inherit 继承 父盒子模型。

 3. 边界塌陷：块元素的 top 与 bottom 外边距有时会合并（塌陷）为单个外边距（合并后最大的外边距），这样的现象称之为 外边界塌陷。

 4. 负值作用：负margin会改变浮动元素的显示位置，即使我的元素写在DOM的后面，我也能让它显示在最前面。

五、BFC（Block Formatting Context） 是什么？应用？ 

  1. BFC 就是 ‘块级格式上下文’ 的格式，创建了BFC的元素就是一个独立的盒子，不过只有BLock-level box可以参与创建BFC，它规定了内部的Bloc-level Box 如何布局，并且与这个独立盒子里的布局不受外部影响，当然它也不会影响到外面的元素。 
  2. 应用场景： 
  1. 解决margin叠加的问题 
  2. 用于布局（overflow: hidden）,BFC不会与浮动盒子叠加。 
  3. 用于清除浮动，计算BFC高度。