前端面试

1. CSS

1.1浮动

为什么需要浮动

css提供了三种机制来摆放盒子的位置，分别是普通流（标准流），浮动，和定位，当普通流满足不了一些网页的布局需求（子元素盒子一列排放，子元素两个盒子分别左右站位） 这个时候就需要浮动

为什么要清除浮动

浮动会使当前元素脱离文档流，如果父元素不设置高度，是自适应的，这个时候就产生了高度塌陷的问题。所以我们清除的不是浮动，而是清除浮动带来的副作用。清除浮动后，父元素就会根据浮动子元素的高度自适应高度，就不会影响下面标准流的元素了

清除浮动的方式

1. 额外标签法
   wc3给出的方法是加一个空的标签，比如

<div style="clear:both"></div>
//<--缺点是多了无意义的标签-->

2. 父元素添加overflow属性
   缺点：内容多的时候可能造成内容不会自动换行导致内容被隐藏掉
3. 使用after伪元素清除
   缺点：只支持ie8以上

1.2 border-box 和content-box的区别

4. content-box标准盒模型，盒子的width和height代表content区域的长宽，border，padding的大小会影响其元素的整体大小。就是真实的宽高是当前盒设置的长宽加padding和border
5. border-box 怪异盒模型 width和height先固定整体元素的宽高，里面的content和border padding是剩下的区域

1.3 如何让元素垂直居中（问烂了都）

1. 简单粗暴的flex我最喜欢的方式

.div{
	display:flex;
	align-litems:center;
}

2. 设置父元素相对定位，子元素绝对定位

	.fu{
	position:relative;
	}
	.zi{
	position:absolute;
	top:50%;
	transform:translateY(-50%)
	}

3. 设置line-height
4. calc动态计算

<div></div>
<style>
	div{
	position:relative;
	top:calc(50%-20px)
	}
</style>

5. 通过margin和padding来调

1.4 css文本超出隐藏显示省略号

<style>
 .box{
 	overflow:hidden;
 	text-overflow:ellipsis;
 	white-space:nowrap
 }
</style>

1.5 c3新特性和html新增的东西有哪些？

c3新特性