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

1、CSS选择符有哪些？

答类型选择符（body）、群组选择符（h1，h2，h3，span）、包含选择符（h2 span）、ID选择符（#id）、Class选择符（.content）


2、哪些属性可以继承？

答CLASS属性，伪类A标签，列表ul、li、dl、dd、dt可以继承

3、优先级算法如何计算？

答 优先级就近原则     如！Important>[id>class>tag]      Important 比内联优先级高

4、CSS3新增伪类有那些？

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

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

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

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

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

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

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


行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？

答 行内元素有：a（锚点） b（粗体） span（定义文本内区块） img（图片） input（输入框） select（项目选择） strong（强调的语气） label（表格标签）u（下划线）

答 块级元素有：div（常用块级） ul（非排序列表） ol（排序表单） li dl（定义列表） dt dd h1 h2 h3 h4（标题）…p（段落）table（表格）form（表单）

答 空元素： <br> （换行）<hr>（水平分割线） <img>（图片） <input>（输入框） <link> （链接）<meta> 


link 和@import 的区别是？

页面中使用CSS的方式主要有3种：行内添加定义style属性值，页面头部内嵌调用和外面链接调用，其中外面引用有两种：link和@import。外部引用CSS两种方式link和@import的方式分别是：


XML/HTML代码：<link rel="stylesheet" rev="stylesheet" href="CSS文件" type="text/css" media="all" />   

XML/HTML代码<style type="text/css" media="screen">   @import url("CSS文件");   </style>  


答 两者都是外部引用CSS的方式，但是存在一定的区别：

    区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。

    区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。

    区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。

    区别4：ink支持使用Javascript控制DOM去改变样式；而@import不支持。

另外一种解释跟上面的意思相同

 答 差别1：老祖宗的差别。link属于XHTML标签，而@import完全是CSS提供的一种方式。

link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。

  差别2：加载顺序的差别。当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS 会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显（梦之都加载CSS 的方式就是使用@import，我一边下载一边浏览梦之都网页时，就会出现上述问题）。

  差别3：兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。

  差别4：使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。


语义化的理解？

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


HTML5的离线储存？(写)描述一段语义的html代码吧。

答 在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件。
  原理：HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。

 如何使用：
        1、页面头部像下面一样加入一个manifest的属性；

        <!DOCTYPE HTML><html manifest="cache.manifest">...<html>

        2、在cache.manifest文件的编写离线存储的资源；    

  CACHE MANIFEST

                #v0.11

                CACHE:

                js/app.js

                css/style.css

                NETWORK:

                resourse/logo.png

                FALLBACK:

                / /offline.html


        3、在离线状态时，操作window.applicationCache进行需求实现。

请描述一下 cookies，sessionStorage 和 localStorage 的区别？

答 共同点：都是保存在浏览器端，且同源的。
区别：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 接口使用更方便。


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

答 1、在B页面中可以使用window.opener获得A页面的window句柄，使用该句柄即可调用A页面中的对象，函数等。例如A页面定义js函数onClosePageB，在B页面可以用window.opener.onClosePageB来进行回调。
2、使用 window.showModalDialog(sURL [, vArguments] [,sFeatures])打开新窗口。
其中vArguments 参数可以用来向对话框传递参数。传递的参数类型不限，包括数组、函数等。对话框通过window.dialogArguments来取得传递进来的参数。
3、如果是支持HTML5的话，建议用本地存储(local storage)，它支持一个事件方法window.onstorage，只要其中一个窗口修改了本地存储，其他同源窗口会触发这个事件。


用纯 CSS 创建一个三角形

答 <style type="text/css">

.sds{height: 0; width: 0;

    border-left: 50px solid transparent;

    border-right: 50px solid transparent;

    border-bottom: 100px solid #000;

    }

</style>

<div class="sds"></div>


解释下浮动和它的工作原理？清除浮动的技巧

答 浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。  1.使用空标签清除浮动。    这种方法是在所有浮动标签后面添加一个空标签 定义css clear:both. 弊端就是增加了无意义标签。 2.使用overflow。    给包含浮动元素的父标签添加css属性 overflow:auto; zoom:1; zoom:1用于兼容IE6。 3.使用after伪对象清除浮动。    该方法只适用于非IE浏览器。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置 height:0，否则该元素会比实际高出若干像素；

浮动元素引起的问题：  （1）父元素的高度无法被撑开，影响与父元素同级的元素 （2）与浮动元素同级的非浮动元素（内联元素）会跟随其后 （3）若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构 解决方法：  使用CSS中的clear:both;属性来清除元素的浮动可解决2、3问题，对于问题1，添加如下样式，给父元素添加clearfix样式：  清除浮动的几种方法：  1，额外标签法，<div style="clear:both;"></div>（缺点：不过这个办法会增加额外的标签使HTML结构看起来不够简洁。） 2，使用after伪类