二、CSS部分
1 css sprite是什么,有什么优缺点
- 概念：将多个小图片拼接到一个图片中。通过
background-position和元素尺寸调节需要显示的背景图案。
- 优点：
- 减少
HTTP请求数，极大地提高页面加载速度
- 增加图片信息重复度，提高压缩比，减少图片大小
- 更换风格方便，只需在一张或几张图片上修改颜色或样式即可实现
- 缺点：
- 图片合并麻烦
- 维护麻烦，修改一个图片可能需要从新布局整个图片，样式
2 display: none;与visibility: hidden;的区别
- 联系：它们都能让元素不可见
- 区别：
display:none;会让元素完全从渲染树中消失，渲染的时候不占据任何空间；visibility: hidden;不会让元素从渲染树消失，渲染师元素继续占据空间，只是内容不可见display: none;是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示；visibility: hidden;是继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible;可以让子孙节点显式- 修改常规流中元素的
display通常会造成文档重排。修改visibility属性只会造成本元素的重绘。
- 读屏器不会读取
display: none;元素内容；会读取visibility: hidden;元素内容
3 link与@import的区别
link是HTML方式， @import是CSS方式link最大限度支持并行下载，@import过多嵌套导致串行下载，出现FOUC(文档样式短暂失效)link可以通过rel="alternate stylesheet"指定候选样式- 浏览器对
link支持早于@import，可以使用@import对老浏览器隐藏样式
@import必须在样式规则之前，可以在css文件中引用其他文件- 总体来说：
link优于@import
4 什么是FOUC?如何避免
Flash Of Unstyled Content：用户定义样式表加载之前浏览器使用默认样式显示文档，用户样式加载渲染之后再从新显示文档，造成页面闪烁。- 由于css引入使用了@import 或者存在多个style标签以及css文件在页面底部引入使得css文件加载在html之后导致页面闪烁、花屏
- 解决方法：用link加载css文件，放在head标签里面
5 如何创建块级格式化上下文(block formatting context),BFC有什么用
- 创建规则：
- 根元素
- 浮动元素（
float不取值为none）
- 绝对定位元素（
position取值为absolute或fixed）
display取值为inline-block、table-cell、table-caption、flex、inline-flex之一的元素overflow不取值为visible的元素
- 作用：
- 可以包含浮动元素
- 不被浮动元素覆盖
- 阻止父子元素的
margin折叠
6 display、float、position的关系
- 如果
display取值为none，那么position和float都不起作用，这种情况下元素不产生框
- 否则，如果
position取值为absolute或者fixed，框就是绝对定位的，float的计算值为none，display根据下面的表格进行调整。
- 否则，如果
float不是none，框是浮动的，display根据下表进行调整
- 否则，如果元素是根元素，
display根据下表进行调整
- 其他情况下
display的值为指定值
- 总结起来：绝对定位、浮动、根元素都需要调整
display
#7 清除浮动的几种方式，各自的优缺点