前端笔试题知识点小结only：<link rel="stylesheet" media="only screen and

1.标准盒模型与怪异盒模型：

content-box：标准盒模型，宽度计算：width/height + padding + border + maigin;

border-box：怪异盒模型，宽度计算：width/height + margin;

width/height = 内容区宽/高 + padding + border;

2.各个主流浏览器内核及其css3前缀：

Mozilla内核　　 css前缀-moz；代表firebox（火狐）；

WebKit内核　　css前缀-webkit ；代表Chrome（谷歌）、Safari（mac苹果）；

Opera 内核　　css前缀 -o ；代表Opera；

Trident内核　　css前缀 -ms ；IE；

360安全浏览器：Trident内核

360极速浏览器：Trident、webkit双内核

搜狗浏览器：Trident、webkit双内核

3.media queries（媒体查询）设备响应式

关键字：media type ：screen（电脑屏幕、平板、手机；基本的都是这个）、all（默认，适用于所有设备）、print（打印机和打印预览）、speech（屏幕阅读器等发声设备）

not：表示排除符合表达式的设备，例：<link rel="stylesheet" media="not print and (max-width: 1200px)" href="print.css" type="text/css" /> （排除打印设备和打印预览且宽度在1200px以下的设备）

only：<link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" type="text/css" />（对于screen类型，且设备输出宽度最大为240px的设备，使用android240.css进行渲染）。

指定特定的媒体设备，一般用来排除不支持媒体查询的浏览器。因为对于支持media query的浏览器来说，only不会产生作用；但是对于仅支持media type的设备，则先读到的是only而不是screen，则该样式不会被采用。

-width与-device-width：

这两段是有区别的，-width指的是浏览器的宽度，比如说你把浏览器窗口通过拖拽变小的时候，这个可以做出响应式；-device-width指的是设备宽度，比如电脑显示屏的大小，手机显示屏的大小等。

，：逗号，就是个逗号，很形象，这个意思就是并列或者说“或”，例如：<link rel="stylesheet" type="text/css" href="style.css" media="print and (max-width:480px), screen and (min-width:960px)" />就是小于480px的打印机或者是大于960的screen都用style.css进行渲染。

4.数据存储的两种方式：Cookie和Web Storage

Cookie：1、时间上，到期时间取决于客户端的到期规则

2、不需要任何服务器资源，储存在客户端并在发送后由服务端读取

3、数量上，IE6及以下最多20个，之后的版本还有Firefox最多50个；chrome和Safari没有硬性限制；但是大小必须是在4095b（4kb）以内

4、安全上，安全性有问题，加密于事无补

5、性能上，由于所有cookie都会由浏览器作为请求头发送，所以在cookie中存储大量信息会影响到特定域的请求性能

Web Storage：

1、Storage类型提供最大的存储空间（因浏览器而异）来存储名值对儿。其只能存储字符串，非字符串数据会在存储之前被转换成字符串。

2、sessionStorage对象（h5新对象）存储特定于某个会话的数据，该数据只保持到浏览器关闭。存储在sessionStorage中的数据可以跨越页面刷新而存在； sessionStorage对象主要用于仅针对会话的小段数据的存储。

3、globalStorage对象使用时最好要指定域名，如果事先不能确定域名，那么使用location.host作为属性名比较安全。

如果不使用removeItem（）或者delete删除，或者用户未清除浏览器缓存，存储在globalStorage属性中的数据会一直保存在磁盘上，因此globalStorage很适合在客户端存储文档或者长期保存用户偏好设置。

4、localStorage对象是Html5中取代globalStorage的持久保存客户端数据的方案。要访问同一个localStorage对象，页面必须来自同一个域名，使用那个同一种协议，在同一个端口上（同源策略）。这相当于globalStorage[location.host].

5.CSS Sprites

1.简介

CSS Sprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许将一个页面涉及到的所有零星图片都包含到一张大图中，利用CSS的“background- image”，“background- repeat”，“background-position”的组合进行背景定位，访问页面时避免图片载入缓慢的现象。

2.优点

（1）CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；

（2）CSS Sprites能减少图片的字节；

（3）CSS Sprites解决了网页设计师在图片命名上的困扰，只需对一张集合的图片命名，不需要对每一个小图片进行命名，从而提高了网页制作效率。

（4）CSS Sprites只需要修改一张或少张图片的颜色或样式来改变整个网页的风格。

3.缺点

（1）图片合并麻烦：图片合并时，需要把多张图片有序的合理的合并成一张图片，并留好足够的空间防止版块出现不必要的背景。

（2）图片适应性差：在高分辨的屏幕下自适应页面，若图片不够宽会出现背景断裂。

（3）图片定位繁琐：开发时需要通过工具测量计算每个背景单元的精确位置。

（4）可维护性差：页面背景需要少许改动，可能要修改部分或整张已合并的图片，进而要改动css。在避免改动图片的前提下，又只能（最好）往下追加图片，但这样增加了图片字节。

6.css屏幕大小选择器以及具体大小

col-xs- 超小屏幕手机 <768px
col-sm- 小屏幕平板 >=768px
col-md- 中等屏幕 >=992px
col-lg- 大屏幕 >1200px

7.css中常用伪类：

:active 被激活
:focus 有焦点
:hover 鼠标悬浮
:link 链接未访问
:visited 链接已访问