前端开发工程师——面试题总结

一、CSS部分

1、W3C标准盒模型

2、垂直水平居中

3、flex布局

4、position的几种属性值

static:默认位置。 在一般情况下，我们不需要特别的去声明它，但有时候遇到继承的情况，我们不愿意见到元素所继承的属性影响本身，从而可以用Position:static取消继承，即还原元素定位的默认值。设置为 static 的元素，它始终会处于页面流给予的位置(static 元素会忽略任何 top、 bottom、left 或 right 声明)。一般不常用。
relative:相对定位。 相对定位是相对于元素默认的位置的定位，它偏移的 top，right，bottom，left 的值都以它原来的位置为基准偏移，而不管其他元素会怎么样。注意 relative 移动后的元素在原来的位置仍占据空间。
absolute:绝对定位。 设置为 absolute 的元素，如果它的父容器设置了 position 属性，并且 position 的属性值为 absolute 或者 relative，那么就会依据父容器进行偏移。如果其父容器没有设置 position 属性，那么偏移是以 body 为依据。注意设置 absolute 属性的元素在标准流中不占位置。
fixed:绝对定位。 位置被设置为 fixed 的元素，可定位于相对于浏览器窗口的指定座标。不论窗口滚动与否，元素都会留在那个位置。它始终是以 body 为依据的。注意设置 fixed 属性的元素在标准流中不占位置。

5、display的几种属性值

默认值 inline

此元素会被显示为内联元素，元素前后没有换行符。设置width,height,margin-top,margin- bottom,padding-top,padding-bottom无效；
内联元素不能设置宽高，但这也不是绝对的。
html标签中有部分标签，例如：<span/>、<a>、<em>、<img>、<input>、<label>等等都是内联元素，默认display属性均为inline，但是<img>、<input>标签的元素却可以设置宽高！因为它有内在尺寸，所以具有width和height，可以设定。

none

此元素不会被显示。
经常会考到，display:none与visibility: hidden有什么区别？

都是看不见元素，但是display:none意思是不展示这个元素，该元素不占据空间，
而visibility: hidden只是将该元素隐藏了，只是用户不可见而已，占据页面空间

block

此元素将显示为块级元素，此元素前后会带有换行符。
块状元素可以设置宽高。
html标签中有部分标签，例如：<div>、<p>、<ol>等等，其display属性默认为block

inline-block

行内块元素，结合了inline、block的特点，此元素前后没有换行符，可以设置宽高。

参考：https://blog.csdn.net/Elena_cc/article/details/71750833

6、css3新特性

border-radius:5px; //圆角边框
background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat; //多背景图片
background: rgba(0,0,0,.5); //颜色和透明度
display: flex; //弹性布局

transform: translate(50px,100px);//移动
transform: rotate();//旋转
transform: scale();//缩放
transform: skew();//倾斜
// 用于元素的直接或者鼠标感应变化，没有其他变幻参数（如延时，持续时间，变幻曲线），立即改变。

transition: width 1s linear 2s; //过渡效果，transition通过指定某些属性和变幻参数，以原始定义为开始状态，通过鼠标操作变化(hover)，hover状态定义结束状态，实现过渡效果。

animation: myfirst 5s;
 @keyframes myfirst {
    0% {background: block;}
    25% {background: red;}
    50% {background: yellow;}
    100% {background: green;}
  }
//动画效果，加强版的过渡效果，通过animation指定动画名和动画参数，@keyframes定义动画内容，根据参数自动触发。

@media screen //媒体查询

h1 {//文字阴影
    text-shadow: 5px 5px 5px red;
}
div {//盒子阴影
    box-shadow: 10px 5px 5px yellow;
}

7、css选择器

CSS的选择器分为两大类：基本选择题和扩展选择器。

基本选择器：

标签选择器：针对一类标签
ID选择器：针对某一个特定的标签使用
类选择器：针对你想要的所有标签使用

高级选择器：

后代选择器：用空格隔开
伪类选择器
伪元素选择器

8、css单位

px 像素(Pixel)。绝对单位。像素 px 是相对于显示器屏幕分辨率而言的，是一个虚拟长度单位，是计算机系统的数字化图像长度单位，如果 px 要换算成物理长度，需要指定精度 DPI。

em 是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。它会继承父级元素的字体大小，因此并不是一个固定的值。

rem 是 CSS3 新增的一个相对单位(root em，根 em)，使用 rem 为元素设定字体大小时，仍然是相对大小，但相对的只是 HTML 根元素。

9、浮动、清除浮动

参考：http://luopq.com/2015/11/08/CSS-float/

10、相邻的两个inline-block节点为什么会出现间隔，该如何解决

由于浮动造成的，一种方式为两个节点添加clear:both，另一种方式是增加父标签，设置overflow:hidden

11、css实现宽度自适应100%，宽高16:9的比例的矩形

<style>
/* box 用来控制宽度 */
.box {width: 100%;}
/* scale 用来实现宽高等比例 1:1 padding-bottom:100%; 4:3 padding-bottom:75%; 16:9 padding-bottom:56.25%; */
.scale {width: 100%;padding-bottom: 56.25%;height: 0;position: relative;}
/* item 用来放置全部的子元素 */
.item {width: 100%;height: 100%;background-color: #000;position: absolute;}
</style>
 
<div class="box">
	<div class="scale">
	    <div class="item">
	        <img src=""/>
	    </div>
	</div>
</div>

12、1像素边框问题

一般是采用伪元素模拟的方式

.scale{
  position: relative;
  border:none;
}
.scale:after{
  content: '';
  position: absolute;
  bottom: 0;
  background: #000;
  width: 100%;
  height: 1px;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

关于移动端开发1px边框的一些理解及解决办法

13、css3动画优化

高性能 CSS3 动画

14、BFC相关

定义：BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有 Block-level box 参与，它规定了内部的 Block-level Box 如何布局，并且与这个区域外部毫不相干。

BFC布局规则 BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

BFC这个元素的垂直方向的边距会发生重叠，垂直方向的距离由margin决定，取最大值
BFC 的区域不会与浮动盒子重叠（清除浮动原理）。
计算 BFC 的高度时，浮动元素也参与计算。

哪些元素会生成 BFC

根元素
float 属性不为 none
position 为 absolute 或 fixed
display 为 inline-block， table-cell， table-caption， flex， inline-flex
overflow 不为 visible

15、移动端css问题总结

腾讯移动Web前端知识库

16、一些css问题总结

https://juejin.im/post/5a0c184c51882531926e4294

二、HTML部分

1、语义化

什么是语义化？就是用合理、正确的标签来展示内容，比如h1~h6定义标题。

2、HTML5新标签新特性

主体结构标签，如图：

新表单标签，calendar、date、time、email、url、search
媒介标签： video 和 audio
绘画标签： canvas

3、移动端忽略将页面中的数字识别为电话号码的方法

meta标签中format-detection翻译成中文的意思是“格式检测”，是用来检测html里的文本格式的，还包括：

<meta name="format-detection" content="telephone=no">  //禁止把数字转化为拨号链接
<meta name="format-detection" content="email=no">  //禁止邮箱,禁止发送邮件
<meta name="format-detection" content="adress=no">  //禁止地址跳转至地图
<meta name="format-detection" content="telephone=no,email=no,adress=no">  //合并写法

4、用一个div模拟textarea的实现

<div class="textarea" contenteditable="true">输入文字</div>

.textarea{
  resize: both;
  min-width: 300px;
  min-height: 100px;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius:5px;
  line-height: 1.2;
  outline:none;
  overflow:auto;
}

5、实现两个窗口间通信

HTML5 postMessage 和 localStorage 实现窗口间通信