CSS3 有哪些新特性?
RGBA 和 透明度
background-image
background-origin
word-wrap(对长的不可分割单词换行)word-wrap:break-wor
文字阴影:text-shadow: 5px 5px 5px #FF0000;(水平阴影，垂直阴影，模糊距离， 阴影颜色)
圆角(边框半径):border-radius 属性用于创建圆角
边框图片:border-image: url(border.png) 30 30 round
盒阴影:box-shadow: 10px 10px 5px #888888
媒体查询:定义两套 css，当浏览器的尺寸变化时会采用不同的属性
解释一下 Flexbox (弹性盒布局模型)?及适用场景?
任何一个容器都可以指定为 flex 布局。行内元素也可使用 flex 布 局。
属性:
flex-direction 主轴的方向;
flex-wrap 是否换行;
flex-flow 上述 2 个属性的简写;
justify-content 在主轴上的对齐方式;
align-items 项目在交叉轴上对齐;
align-content 多根轴线的对齐方式
flex与flex-grow的区别
在flex弹性盒模型体系中，flex-grow和flex都有对子元素进行放大的作用，但是这两个属性在放大时的计算方法不同
<article>
<div>1</div>
<div>2</div>
<div>3</div>
</article>
article {
width: 600px;
height: 200px;
display: flex;
}
div {
width: 100px;
height: 100px;
}
div:nth-child(1) {
flex: 1;
}
div:nth-child(2) {
flex: 2;
}
div:nth-child(3) {
background-color: thistle;
}
使用flex放大子元素：
计算剩余空间，剩余空间为弹性盒子剩余的宽度与进行flex的子元素的宽度之和。例子中： 300+100+100为500 ，然后宽度分别为166，334。
article {
width: 600px;
height: 200px;
display: flex;
}
div {
width: 100px;
height: 100px;
}
div:nth-child(1) {
flex-grow: 1;
}
div:nth-child(2) {
flex-grow: 2;
}
div:nth-child(3) {
background-color: thistle;
}
使用flex-grow放大子元素
计算剩余空间，剩余空间为弹性盒子的剩余宽度。例子中为300px。然后分别为100，200
CSS3 新增伪类有那些?
p:first-of-type 父-首
p:last-of-type 父-最后
p:only-of-type 父-唯一的元素
p:only-child 父-唯一子元素
p:nth-child(2) 父-第二个子元素
:enabled :disabled 表单控件的禁用状态
:checked 单选框或复选框被选中。
使用 base64 编码的优缺点?
base64 编码是一种图片处理格式，通过特定的算法将图片编码成一长串字符串，在页面上显示时可用该字符串来代替图片的 url 属性
使用 base64 的优点:
可以减少该图片的 HTTP 请求
使用 base64 的缺点:
1.根据 base64 的编码原理，编码后的大小会比源文件大小大 1/3，如果把大图片编码到 html/css 中，不仅会造成文件体积增加，影响文件的加载速度，还会增加浏览器对 html 或 css 文件 解析渲染的时间。
2.使用 base64 无法直接缓存，要缓存只能缓存包含 base64 的文件，比如 HTML 或 CSS，这相比于直接缓存图片的效果要差很多。
3.IE8 以前的浏览器不支持，一般一些网站的小图标可以使用 base64 图片引入。
为什么要清除浮动?清除浮动的方式?（clear和BFC）
浮动最初设计只是用来实现文字环绕排版的。
✦ 浮动的三个特点很重要:
- 脱离文档流。
- 向左/向右浮动直到遇到父元素或者别的浮动元素。
- 浮动会导致父元素高度坍塌。
清除浮动是为了清除使用浮动元素产生的影响:
浮动的元素，
高度会塌陷，
而高度的塌陷使我们页面后面的布局不能正常显示。
两种方法：
clear
clear属性不允许被清除浮动的元素的左边/右边挨着浮动元素，底层原理是在被清除浮动的元素上边或者下边添加足够的清除空间。
通过在别的元素上清除浮动来实现撑开高度的， 而不是在浮动元素上。
<div class="box-wrapper">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div style="clear:both;"></div>
</div>
或
.clearfix:before,
.clearfix:after {
display: table;
content: " ";
}
.clearfix:after {
clear: both;
}
.clearfix{
*zoom: 1;
}
BFC清除浮动
对 BFC 规范(块级格式化上下文:block formatting context)的 理解?
BFC 指的是块级格式化上下文，一个元素形成了 BFC 之后，那么它内部元素产生的布局不会 =影响到外部元素，外部元素的布局也不会影响到 BFC 中的内部元素。
一个 BFC 就像是一个隔离区域，和其他区域互不影响。
(1)根元素或包含根元素的元素
(2)浮动元素 float=left|right 或 inherit(≠none)
(3)绝对定位元素 position=absolute 或 fixed
(4)display=inline-block|flex|inline-flex|table-cell 或 table-caption
(5)overflow=hidden|auto 或 scroll(≠visible)
IFC 是什么?
IFC 指的是行级格式化上下文，
(1)行级上下文内部的盒子会在水平方向，一个接一个地放置。
(2)当一行不够的时候会自动切换到下一行。
(3)行级上下文的高度由内部最高的内联盒子的高度决定。
display:none 与 visibility:hidden 的区别?
display:none 不显示对应的元素，在文档布局中不再分配空间(回流+重绘)
visibility:hidden 隐藏对应元素，在文档布局中仍保留原来的空间(重绘)
浏览器是怎样解析 CSS 选择器的?
CSS 选择器的解析是从右向左解析的。若从左向右的匹配，发现不符合规则，需要进行回溯，会损失很多性能。
在 CSS 解析完毕后，需要将解析的结果与 DOM Tree 的内容一起进行分析建立一 棵 Render Tree，最终用来进行绘图。
伪类和伪元素
伪类：:hover
伪元素： ::after
区别：是否需要添加元素，才能达到效果，
是，就是伪元素，能够创建在DOM树中不存在的抽象对象，可以访问到
否，伪类，基于普通DOM元素而产生的不同状态，是DOM元素的某一特征。
怎么让 Chrome 支持小于 12px 的文字?
使用 transform:scale() 进行缩放即可实现。
p{
font-size:10px;
-webkit-transform:scale(0.8); //0.8 是缩放比例
}
如果需要手动写动画，你认为最小时间间隔是多久，为什么?
多数显示器默认频率是 60Hz，即 1 秒刷新 60 次，所以理论上最小间隔为 1/60* 1000ms = 16.7ms。
CSS 中哪些属性可以继承?
一般具有继承性的属性有，
字体相关的属性，font-size 和 font-weight 等。
文本相关的属性， color 和 text-align 等。
表格的一些布局属性、列表属性如 list-style 等。
还有光标属性 cursor、元素可见性 visibility。
用纯 CSS 创建一个三角形的原理是什么?
采用的是相邻边框连接处的均分原理。 将元素的宽高设为 0，只设置border ，把任意三条边隐藏掉(颜色设为 transparent)，剩下的就是一个三角形。
#div1 {
width: 0;
height: 0;
border-width: 20px;
border-style: solid;
border-color: transparent transparent red transparent;
}
width:auto 和 width:100%的区别
width:100% 元素 box 的宽度等于父元素的 contentbox 的宽度。
width:auto 元素撑满整个父元素，margin、border、padding、content 区域会自动分配水平空间。
display:none、visibility:hidden 和 opacity:0 之间的区别？
