前端面经 / 前端面试题 CSS（二）

─=≡Σ(((つ•̀ω•́)つ 更多前端面试题

1、垂直居中的方法

（1）margin负值法

.container{
	width: 500px;
	height: 400px;
	border: 2px solid #379;
	position: relative;
}
.inner{
	width: 480px;
	height: 380px;
	background-color: #746;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -190px; /*height的一半*/
	margin-left: -240px; /*width的一半*/
}

补充：其实这里也可以将marin-top和margin-left负值替换成，
transform：translateX(-50%)和transform：translateY(-50%)

（2）margin:auto法

<div>
	<img src="mm.jpg">
</div>

div{
	width: 400px;
	height: 400px;
	position: relative;
	border: 1px solid #465468;
}
img{
	position: absolute;
	margin: auto;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

定位为上下左右为0，margin：0可以实现脱离文档流的居中.

（3）table-cell（未脱离文档流的）

设置父元素的display:table-cell,并且vertical-align:middle，这样子元素可以实现垂直居中。

div{
	width: 300px;
	height: 300px;
	border: 3px solid #555;
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}
img{
	vertical-align: middle;
}

（4）利用flex

将父元素设置为display:flex，并且设置align-items:center;justify-content:center;

.container{
	width: 300px;
	height: 200px;
	border: 3px solid #546461;
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
}
.inner{
	border: 3px solid #458761;
	padding: 20px;
}

2、说一下块元素和行元素

块元素：独占一行，并且有自动填满父元素，可以设置margin和pading以及高度和宽度
行元素：不会独占一行，width和height会失效，并且在垂直方向的padding和margin会失
效。

3、多行元素的文本省略号

display: -webkit-box
-webkit-box-orient:vertical
-webkit-line-clamp:3
overflow:hidden

4、js动画和css3动画的差异性

渲染线程分为main thread和compositor thread，如果css动画只改变transform和opacity，这时整个CSS动画得以在compositor trhead完成（而js动画则会在main thread执行，然后出发compositor thread进行下一步操作），特别注意的是如果改变transform和opacity是不会layout或者paint的。

区别：

1. 功能涵盖面，js比css大
2. 实现/重构难度不一，CSS3比js更加简单，性能跳优方向固定
3. 对帧速表现不好的低版本浏览器，css3可以做到自然降级
4. css动画有天然事件支持
5. css3有兼容性问题