web前端—面试题汇总（166-170）
166. 浏览器缓存有哪些，通常缓存有哪几种
一、http缓存
二、websql
cookie
localstorage
sessionstorage
flash缓存
167.bootstrap响应式实现的原理
百分比布局+媒体查询
168.关于JS事件冒泡与JS事件代理（事件委托）
事件作为DOM操作重要的一环，需要大家好好理解和运用，今天特意看了一下事件冒泡和事件代理的相关资料，感触颇深，也深感自己的无知不知道多浪费了多少内存，废话不多说进入正题：
1.事件冒泡：
通俗易懂的来讲，就是当一个子元素的事件被触发的时候（如onclick事件），该事件会从事件源（被点击的子元素）开始逐级向上传播，触发父级元素的点击事件。
2.事件委托
事件委托，首先按字面的意思就能看你出来，是将事件交由别人来执行，再联想到上面讲的事件冒泡，是不是想到了？对，就是将子元素的事件通过冒泡的形式交由父元素来执行。下面经过详细的例子来说明事件委托：
有可能在开发的时候会遇到这种情况：如导航每一个栏目都要加一个事件，你可能会通过遍历来给每个栏目添加事件：
事件委托是怎
var ul = document.getElementById('parentUl');
ul.οnclick=function (event) {
var e = event||window.event,
source = 网页链接 || e.srcElement;//target表示在事件冒泡中触发事件的源元素，在IE中是srcElement
if(source.nodeName.toLowerCase() == "li"){ //判断只有li触发的才会输出内容
alert(source.innerHTML);
}
stopPropagation(e); //阻止继续冒泡
};
function addElement() {
var li = document.createElement('li');
li.innerHTML="我是新孩子";
ul.appendChild(li);
}
169. CSS样式覆盖规则
规则一：由于继承而发生样式冲突时，最近祖先获胜。
规则二：继承的样式和直接指定的样式冲突时，直接指定的样式获胜
规则三：直接指定的样式发生冲突时，样式权值高者获胜。
样式的权值取决于样式的选择器，权值定义如下表。
CSS选择器
权值
标签选择器
1
类选择器
10
ID选择器
100
内联样式
1000
伪元素(:first-child等)
1
伪类(:link等)
10
可以看到，内联样式的权值>>ID选择器>>类选择器>>标签选择器，除此以外，后代选择器的权值为每项权值之和，比如”#nav .current a”的权值为100 + 10 + 1 = 111。
规则四：样式权值相同时，后者获胜。
规则五：!important的样式属性不被覆盖。
!important可以看做是万不得已的时候，打破上述四个规则的”金手指”。如果你一定要采用某个样式属性，而不让它被覆盖的，可以在属性值后加上!important，以规则四的例子为例，”.byline a {color:red !important;}”可以强行使链接显示红色。大多数情况下都可以通过其他方式来控制样式的覆盖，不能滥用!important。
170. 介绍一下box-sizing属性
兼容问题
首先，box-sizing属性在FireFox中存在兼容问题，所以需要使用-moz-box-sizing做一下兼容
属性值
· box-sizing：content-box
· box-sizing：border-box
· box-sizing：inherit
content-box
· 这是box-sizing的默认属性值
· 是CSS2.1中规定的宽度高度的显示行为
· 在CSS中定义的宽度和高度就对应到元素的内容框
· 在CSS中定义的宽度和高度之外绘制元素的内边距和边框
border-box
· 在CSS中微元素设定的宽度和高度就决定了元素的边框盒
· 即为元素在设置内边距和边框是在已经设定好的宽度和高度之内进行绘制
· CSS中设定的宽度和高度减去边框和内间距才能得到元素内容所占的实际宽度和高度