2019.7月-前端面试总结（H5+C3+JS+ES6+Vue+浏览器）

第二次面试

从萧山赶到余杭梦想小镇，开启了我的第二次面试。总的来说，这次面试表现的不是特别好，技术面试时间超过了 40 分钟，很多问题回答不出来，面试官还是蛮有耐心的，居然没有把我当场赶走，问到最后把我问懵逼了。上午面试，下午就来了 offer。除了距离上，其他都还是满意的。

HTML

HTML5中的新标签，举例一下

canvas绘画，本地离线存储localStorage，sessionStorage，video和audio元素，语义化元素，表单类型（date，time，email等），地理定位等

CSS

CSS3新的标签

边框：圆角border-radius，阴影box-shadow，边框图片border-image
背景：背景定位区域background-origin，背景大小支持百分比background-size
文字效果：文字阴影text-shadow，长单词拆分word-wrap
2D转换：transform:对元素进行移动translate()，缩放scale()，转动rotate()，拉伸skew()
3D转换：transform:对元素进行x轴旋转rotateX()，y轴旋转rotateY()
过渡，动画，多列等等
如何垂直居中一个浮动元素
- 父盒子有宽高
父元素相对定位，子元素绝对定位，top：50%；left：50%。margin负的左右二分之一的height，width

.content{
position: absolute;
top: 50%;
left: 50%;
width: 100px;
float: left;
height: 100px;
background-color: #ff6700;
margin-top: -50px;
margin-left: -50px;
}
- 父盒子没有高宽
父盒子相对定位，子盒子决定定位，上下左右都为0，margin：auto；
```
 .content{
     width: 200px;
     height: 200px;
     background-color: #ff6700;
     float: left;
     margin: auto;
     position: absolute;
     left: 0;
     top: 0;
     bottom: 0;
     right: 0;
 }
```
nth选择器

CSS3 :nth-child() 选择器

规定属于其父元素的第二个子元素的每个 p 的背景色：

p:nth-child(2)
{
background:#ff0000;
}

CSS外边距(margin)重叠及防止方法

详解：
https://github.com/zuopf769/notebook/blob/master/fe/CSS%E5%A4%96%E8%BE%B9%E8%B7%9D(margin)%E9%87%8D%E5%8F%A0%E5%8F%8A%E9%98%B2%E6%AD%A2%E6%96%B9%E6%B3%95/README.md

相邻marign重叠的问题

1.1 示例：

1.2 外边距重叠计算方式

全部都为正值，取最大者；
不全是正值，则都取绝对值，然后用正值的最大值减去绝对值的最大值；
没有正值，则都取绝对值，然后用0减去最大值。

1.3 解决办法

底部元素设置为浮动 float:left;
底部元素的position的值为absolute/fixed
在设置margin-top/bottom值时统一设置上或下

元素和父元素margin值问题
父元素无 border、padding、inline content 、 clearance时，子元素的margin-top/bottom会与父元素的margin产生重叠问题。

示例