1.box-sizing属性？
用来控制元素的盒子模型的解析模式，默认为content-box
context-box：设置元素的 height/width 属性指的是content部分的高/宽
border-box：设置元素的height/width属性指的是border + padding + content部分的高/宽
可应用于淘宝商品的列表
2.display有哪些值？说明他们的作用?
inline（默认）–内联无换行符 只能设置左右padding margin的值
none–隐藏
block–块级元素 有换行符 可以设置宽高内外边距
display: inline-block; 行内块元素既可以设置宽高又不换行
table–表格显示
list-item–项目列表
常见的块级元素
<p><div><h1><li> display属性值默认为block。
常见的行内元素
<a><em><img><span>display属性值默认为inline。
行级块元素
img 属性值默认为inline-block内容决定大小 可以改变宽高
设置position: absolute;
float: left;系统会自动把内部元素转换成inline-block
3.css overflow属性？
overflow: hidden;隐藏
overflow: scroll;强制出滚动条
overflow: auto;文本内容超出边框出现滚动条
overflow: visible;内容不修剪 可以出现在文本框外
overflow: inherit;继承父元素的属性
4.css position属性？
static（默认）：按照正常文档流进行排列；
relative（相对定位）：不脱离文档流，参考自身静态位置通过 top, bottom, left, right 定位；
absolute(绝对定位)：参考距其最近一个不为static的父级元素通过top, bottom, left, right 定位，没有的话就相对于body定位，定位后脱离文档流 。
fixed(固定定位)：所固定的参照对像是可视窗口。
px em rem %
px ： 固定像素 代表电脑屏幕的分辨率
em ：由当前对象的字体大小决定
rem ：由根元素的字体大小（html决定） 用于移动端
%：由父元素决定
body 默 认margin 8px;
5.CSS3有哪些新特性？
1.RGBA和透明度
2.background-image background-origin(content-box/padding-box/border-box) background-size background-repeat
3.word-wrap（对长的不可分割单词换行）word-wrap：break-word
4.文字阴影：text-shadow： 5px 5px 5px #FF0000;（水平阴影，垂直阴影，模糊距离，阴影颜色）
5.font-face属性：定义自己的字体
6.圆角（边框半径）：border-radius 属性用于创建圆角
7.边框图片：border-image: url(border.png) 30 30 round
8.盒阴影：box-shadow: 10px 10px 5px #888888
9.媒体查询：定义两套css，当浏览器的尺寸变化时会采用不同的属性
6.用纯css创建三角形原理是什么？
···
.test{
width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid #ff0000;
}
···
7.常见的兼容性问题？
1.不同浏览器的pandding margin不同绝对方法*{pandding:0,margin:0}
2.IE6双边距bug：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大。hack：display:inline;将其转化为行内属性。
3.渐进识别的方式，从总体中逐渐排除局部。首先，巧妙的使用“9”这一标记，将IE浏览器从所有情况中分离出来。接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。
{
background-color:#f1ee18;/*所有识别*/
.background-color:#00deff\9; /*IE6、7、8识别*/
+background-color:#a200ff;/*IE6、7识别*/
_background-color:#1e0bd1;/*IE6识别*/
}
4.设置较小高度标签（一般小于10px），在IE6，IE7中高度超出自己设置高度。hack：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。
5.IE下，可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性；Firefox下，只能使用getAttribute()获取自定义属性。解决方法:统一通过getAttribute()获取自定义属性。
6.Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。
7.超链接访问过后hover样式就不出现了，被点击访问过的超链接样式不再具有hover和active了。解决方法是改变CSS属性的排列顺序:L-V-H-A ( love hate ): a:link {} a:visited {} a:hover {} a:active {}
8.display:none与visibility：hidden的区别？
display：none 不显示对应的元素，在文档布局中不再分配空间（回流+重绘）
visibility：hidden 隐藏对应元素，在文档布局中仍保留原来的空间（重绘）
9.为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式？
浮动元素碰到包含它的边框或者浮动元素的边框停留。由于浮动元素不在文档流中，所以文档流的块框表现得就像浮动框不存在一样。浮动元素会漂浮在文档流的块框上。
浮动带来的问题：
1.父元素的高度无法被撑开，影响与父元素同级的元素
2.与浮动元素同级的非浮动元素（内联元素）会跟随其后
3.若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。
清除浮动的方式：
1.父级div定义height
2.最后一个浮动元素后加空div标签 并添加样式clear:both。
3.包含浮动元素的父标签添加样式overflow为hidden或auto。
4.父级div定义zoom
10.设置元素浮动后 他的display是？
自动变为display :block;
11.css预处理器？
Less sass
12.CSS优化、提高性能的方法有哪些？
1.避免!important 尽量使用其他浏览器
2.避免不必要的命名空间
3.使用表示语义的名字
4.避免后代选择器
5.避免链式选择符
6.尽可能的精简规则，你可以合并不同类里的重复规则
7.避免过度约束
8.使用紧凑的语法
13.在网页中的应该使用奇数还是偶数的字体？为什么呢？
使用偶数比较好 使用偶数可以和web其他设计构成比例关系 Windows 自带的点阵宋体（中易宋体）从 Vista 开始只提供 12、14、16 px 这三个大小的点阵，而 13、15、17 px时用的是小一号的点。（即每个字占的空间大了 1 px，但点阵没变），于是略显稀疏。
14.margin和padding分别适合什么场景使用？
margin：
1.在boder外侧添加空白 边框与边框的距离
2.空白处不需要背景色
3.上下相连的两个盒子之间的空白，需要相互抵消时
padding：
1.在border内侧添加空白 边框与内容的距离
2.空白处需要背景色
3.上下相连的两个盒子的空白，希望为两者之和。
15元素竖向的百分比设定是相对于容器的高度吗？
是相对于父元素
16::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用
:before是css3伪类 ::before是css伪元素
::before 以一个子元素存在，定义在主体内容之前的一个伪元素。不存在dom中 只存在页面中
:before 和 :after 这两个伪元素，是在CSS2.1里新出现的。起初，伪元素的前缀使用的是单冒号语法，但随着Web的进化，在CSS3的规范里，伪元素的语法被修改成使用双冒号，成为::before ::after
17.你对line-height是如何理解的？
行高是指一行文字的高度，具体说是两行文字间基线的距离。CSS中起高度作用的是height和line-height。
单行文本垂直居中：可以只设置行高 height可以取消
多行文本垂直居中：需要设置display：inine-block；
18.怎么让Chrome支持小于12px 的文字？
.q2{font-size:10px;-webkit-transform:scale(0.8);} //0.8是缩放比例
18.css新增伪类
p:first-of-type 选择属于其父元素的首个元素
p:last-of-type 选择属于其父元素的最后元素
p:only-of-type 选择属于其父元素唯一的元素
p:only-child 选择属于其父元素的唯一子元素
p:nth-child(2) 选择属于其父元素的第二个子元素
:enabled :disabled 表单控件的禁用状态。
:checked 单选框或复选框被选中。
18.css省略号？
/* 显示一行，省略号 */
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;
/* 显示两行，省略号 */
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
