前端开发早已不是所谓的"切图仔"，一个优秀的前端开发可以用css实现各种各样的网页效果，css也是基础中的基础，重点中的重点。
css sprite是什么？有什么优缺点？
- 概念：将多个小图片拼接到一个图片中，通过
background-positio属性和元素尺寸调节需要显示的北京图案 - 优点：
- 减少
HTTP请求次数，极大的提高页面加载速度 - 增加图片信息重复度，提高压缩比，减小图片大小
- 更换风格方便，只需要在其中一张或几张图片上修改颜色或样式即可
- 减少
- 缺点：
- 图片合并麻烦
- 维护麻烦，修改一个图片可能需要重新布局整个图片样式
display:none与visibility:hidden的区别是什么
- 共同点：都可以让元素隐藏
- 区别
display:none可以让元素从这个DOM树中消失，渲染的时候不占任何空间；visibility:hidden元素不会从DOM树中消失，渲染的时候继续占据空间display:none为非继承属性，子孙节点消失时无法通过修改子孙节点的属性使其显示；visibility:hidden为继承属性，子孙节点可以通过修改visibility:visible使其展示- 修改
display属性通常会造成页面重排，修改visibility只会使本元素重绘； - 读屏器不会读到
display:none的元素，但可以读到visibility:hidden元素；
link和@import的区别
link是HTML方式，@import是CSS方式- 页面加载时
link会被同时加载，最大限度支持并行下载，@import会等到页面加载完成后再加载，过多嵌套会导致串行下载，会出现文档样式短暂失效（FOUC）； link是XHTML标签，无兼容问题，@import仅在IE5以上版本支持；link的样式权重高于@import的权重
什么是FOUC？如何避免
Flash Of Unstyle Content：用户定义样式表加载之前浏览器使用默认样式显示文档，用户样式加载渲染之后再重新显示样式，造成页面闪烁- 解决方法：把样式表放在文档的
<head>，用link引用
如何创建块级格式化上下文（BFC）?有什么作用
BFC(Block Formatting Context)，块级格式化上下文，是一个独立渲染的区域，让处于BFC内部的元素与外部元素相互隔离，使内外部的定位不会相互影响- 触发条件（以下任意一条）：
float的值不为noneoverfolw的值不为visibledisplay的值为table-cell、table-caption和inline-block、flex之一position的值不为fixed或releative- 在
IE下，Layout可通过`zoom:1``触发
- 与普通文档流的区别
- 普通文档流
- 浮动元素不会被父级计算高度
- 非浮动元素会覆盖浮动元素的位置
margin会传递给父级元素- 两个相邻元素上下的
margin会重叠
- BFC布局规则
- 浮动元素会被计算父级高度
- 非浮动元素不会覆盖浮动元素位置
margin不会传递给父级- 属于同一个
BFC的两个相邻元素上下margin会重叠
- 普通文档流
- 开发中的应用
- 阻止
margin重叠 - 可以包含浮动元素-清除内部浮动，原理是两个
div位于同一个BFC区域之中 - 自适应两栏布局
- 可以阻止元素被非浮动元素覆盖
- 阻止
对BFC规范的理解
- 一个页面是由很多个
box组成，元素的类型和display属性决定了这个box的类型 - 不同类型的
box会参与不同的Formatting Context，渲染的结果也会不同，不会受到其他box渲染方式的影响
为什么要初始化CSS样式？
- 因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对
css进行初始化就会因为浏览器之间的差异导致显示异常； - 但是初始化
css样式会对SEO有影响，做不到二者兼得；
css3有哪些新特性
- 新增选择器：
p:nth-child(n){margin-top:10px}； - 弹性盒模型：
display:flex； - 多列布局：
column-count: 5； - 媒体查询：
@media(max-width: 480px) {.box {column-count:1}}； - 个性化字体：
@font-face{font-family: BorderWeb;src:url(BORDERW0.eot)}； - 颜色透明度：
color: rgba(255,0 ,0 ,0.5) - 圆角：
border-radius:50%； - 渐变：
background: linear-gradient(red,green,blue)； - 阴影：
box-shadow: 3px 3px 3px rgba(255,0,0,0.5)； - 文字装饰：
text-stroke-color: red； - 文字溢出：
text-overflow: ellipsis； - 背景效果：
background-size: 100px 100px - 边框效果：
border-image: url(bo_blt.png)0 10； - 转换
- 旋转：
transform: rotate(20deg) - 倾斜：
transform: skew(150deg,-10deg) - 位移：
transform: translate(20px,20px) - 缩放：
transform: scale(0.5)
- 旋转：
- 平滑过渡：
transition: all .3s ease-in .1s - 动画：
@keyframes anim-1 {50% {border-radius: 50%}} animation:anim-1 1s
css3新增伪类有哪些？
span:first-of-type：选择属于其父元素的首个<span>元素下的每个<span>元素；span:last-of-type:选择属于其父元素的最后一个<span>元素下的每个<span>元素；span:only-of-type:选择属于其父元素的唯一一个<span>元素下的每个<span>元素；span:nth-child(2n)：选择属于其父元素下是2的倍数的<span>元素下的每个<span>元素；:after：在元素之前添加内容，也可以用来清除浮动:before：在元素之后添加:enabled：已启用的表单元素:disabled：已禁用的表单元素:checked：单选框或复选框被选中
介绍一下标准的css盒子模型，低版本IE的盒子模型有什么不同？
IE盒子模型和W3C盒子模型；IE8及其以下版本浏览器，未声明DOCTYPE，内容宽高会包含内填充和边框，称其为怪异盒模型；- 盒模型：内容（
content）、填充（padding）、外边距（margin）、边框（border）； - 标准盒模型（
W3C）：元素高度=width + margin + padding + border - 怪异盒模型（
IE）：元素高度=width + margin - 标准盒模型可以通过设置
CSS的box-sizing: border-box属性，触发"怪异模式"解析计算宽高
box-sizing常用的属性有哪些？分别有什么用？
box-sizing: content-box：默认的标准盒模型元素效果box-sizing: border-box：触发怪异盒模型元素的效果box-sizing: content-box：继承父元素的效果