1.box-sizing属性？

用来控制元素的盒子模型的解析模式，默认为content-box

context-box：设置元素的 height/width 属性指的是content部分的高/宽
border-box：设置元素的height/width属性指的是border + padding + content部分的高/宽

image.png

可应用于淘宝商品的列表

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;