面试准备之css篇

1.盒子模型

了解box的两种模式

CSS3 box-sizing   

定义 box-sizing: content-box; 时，浏览器对盒模型的解释遵从我们之前认识到的 W3C 标准； 
定义 box-sizing: border-box; 时，浏览器对盒模型的解释与 IE6 相同；

好处：IE 对于盒模型的解释固然不符合 W3C 的规范，但是也有它的好处：无论如何改动 border 与 padding 的值，都不会导致 box 总尺寸发生变化，也就不会打乱页面整体布局。 

2.为什么利用多个域名来存储网站资源会更有效

CDN缓存更方便
突破浏览器并发限制（同一域名并发下载资源文件的数量是有限的）
节约cookie带宽
节约主域名的连接数，优化页面响应速度
防止不必要的安全问题

3.src与href的区别

src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。

4.图片预加载

原理：在页面onload之后，加载图片

只要这些图片的路径保持不变，当它们在Web页面的其他地方被调用时，浏览器就会在渲染过程中使用预加载（缓存）的图片

具体实现：

5.图片的懒加载

步骤：

1.网页中的图片，都设为同一张图片。
2.给图片增加 data-original="img/example.jpg" 的属性，保存这张图片的真实地址。
3.当滚动条到达用户可视区域后，插件自动改变该区域的图片的src属性为缓存的地址。
4.浏览器加载可视区域图。

6.css权重

7.超链接访问过后hover样式就不出现的问题是什么？如何解决？

被点击访问过的超链接样式不在具有hover和active了,解决方法是改变CSS属性的排列顺序: L-V-H-A（link,visited,hover,active）

link:连接平常的状态
visited:连接被访问过之后
hover:鼠标放到连接上的时候
active:连接被按下的时候 

8.外边距重叠问题（貌似只有垂直方向上有这个问题）

问题描述：在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。

9.BFC

参考：点击打开链接

BFC的运用：float、绝对定位、margin collaspe

BFC的触发条件：

根元素
float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible

10.去除inline-block元素间间距

参考：http://www.zhangxinxu.com/wordpress/?p=2357

11.垂直居中布局

hack：

chrome中：

当样式表里font-size<12px时，中文版chrome浏览器里字体显示仍为12px，这时可以用 {-webkit-text-size-adjust:none;}