前段时间经历了几次面试，总结一下经常碰到问题总结一下，有些问题单独写了，感兴趣可以点击详情链接观看，谢谢。
1.css权重问题
Css的权重是指样式的优先级，当有多个样式作用于一个元素时，只有权重高的样式对元素起作用，然而当权重相同时，后写的样式会覆盖前面的样式。
权重值是可以计算的，我们可以通过样式应用方式的权重值来进行计算。
- 内联样式，权重值为1000
- ID选择器，权重值为100
- 类、伪类，权重值为10
- 标签选择器，权重为1
注意：在CSS中，通过对某一样式声明! important （定义在样式最后面），可以更改默认的CSS样式优先级规则，使该条样式属性声明具有最高优先级。
2.link和@import区别
3.居中实现方式
3.1 利用position + transform：translate
父盒子设置 position: relative,子盒子设置position: absolute，定位上左方向50%；然后再通过transform: translate(-50%,-50%)，让盒子忘左上方偏移自身的一半，实现居中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子居中</title>
</head>
<style>
/* 1. */
div {
width: 100px;
height: 100px;
transform: translate(-50%,-50%);
position: absolute;
top: 50%;
left: 50%;
background-color: pink;
}
</style>
<body>
<div>
</div>
</body>
</html>
3.2 使用弹性盒模型flex
通过给父容器设置flex，然后同时设置主轴和交叉轴都为居中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子居中</title>
</head>
<style>
body{
width: 100%;
height:100vh;
display: flex;
justify-content: center;
align-items: center;
}
div {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
<body>
<div>
</div>
</body>
</html>
3.3 margin+position
原理跟3.1差不多，通过定位居中，然后通过margin自身宽高的一半实现居中，但是这种居中方式必须要知道自身的宽高。
4.flex:1代表什么
lex:1; 即就是代表均匀分配元素；
flex: 1; === flex: 1 1 0;
这是完整写法, 它还有另外两种完整写法, 分别是 initial (0 1 auto) 和 none (0 0 auto)
- 第一个参数表示: flex-grow 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
- 第二个参数表示: flex-shrink 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
- 第三个参数表示: flex-basis给上面两个属性分配多余空间之前, 计算项目是否有多余空间, 默认值为 auto, 即项目本身的大小；设置为auto的时候，会根据盒子内容的多少自动撑开盒子，它里面的每个盒子的宽度是不一样的。
flex布局的详细内容比较多，懒得详写了，具体可以去看阮一峰老师的flex布局。
5.css实现三角形
懒得写了，我的两篇文章# css 的content是什么，有什么作用？和css3详解 里面各有一种方式实现。
6.清除浮动的方法
7.说说盒模型
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：外边距（margin）、边框（border）、内边距（padding）、实际内容（content）四个属性，分为标准模型和IE模型，标准模型的宽度不包括内边距，IE模型的宽度要包括内边距。
标准模型: 盒子 = height/width + padding + border + margin;
width/height只是内容宽高，不包含padding和border
IE模型: 盒子 = height/width + margin;
width/height包含了padding和border
box-sizing:指定盒子大小和结构
- box-sizing: content-box; //默认值 内容真正大小 = 设置的大小
- box-sizing: border-box; // 内容真正大小 width=设置的width-padding-border
- box-sizing: inherit;// 规定从父元素继承此值
如果要想盒子模型中的content宽度与通过css width 属性设置的宽度相同，则使用box-sizing: content-box, 若想使整个盒子的宽度固定(即使padding和border发生变化)时使用 box-sizing:border-box.
8.transition和animation区别
他们虽然都可以做出动画效果，但是transition主要做简单的过渡效果，而animation可以做复杂的动画效果，在语法和用法上有非常大的区别。
transition是过渡属性，强调过渡，他的实现需要触发一个事件（比如鼠标移动上去，焦点，点击等）才执行动画，过渡只有一组（两个：开始-结束）关键帧。
animation是动画属性，他的实现不需要触发事件，设定好时间之后可以自己执行，且可以循环一个动画（设置多个关键帧）。
点击跳转详细说明，里面有两者的深入解析。
9.说说BFC
10.em和rem的区别
em和rem都是灵活、 可扩展的单位，由浏览器转换为像素值，具体取决于您的设计中的字体大小设置。 而em相对于使用em单位的元素的字体大小，父级的设置，rem则取决于根元素
11.设计稿中9px的高度实现
利用 css3的缩放：
font-size:12px;
transform:scale(0.8);
12.css3继承
概念：有上下级关系的元素之间，上级元素的样式被下级元素所拥有，这个现象就是继承
可被继承的属性 文字大小：font-size、文字颜色：color、文字类型：font-family、文字粗细：font-weight、文本缩进: text-indent、文字水平对齐方式：text-align、文本修饰线：text-decoration、行高：line-height、字间距：letter-spacing、词间距：word-spacing
13.css伪类和伪对象的区别
14.CSS sprites
15.rgba()和opacity的区别
rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度，而rgba()只作用于元素的颜色或其背景色。
16.css属性content有什么作用
17.CSS3有哪些新特性？
实在写不动了，html的有空再加吧-。-
