实习面试阶段遇到的各类面试题汇总（一）

此篇内容为参考网络资源以及各类文档资料整理

1、写出css中position属性对应的所有值，并且说明每个值的含义？

absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。 因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit	规定应该从父元素继承 position 属性的值。

2、请列出css中display属性对应的所有值，并说明每个值的含义？

display 的属性值有：none|inline|block|inline-block|list-item|run-in|table|inline-table|table-row-group|table-header-group|table-footer-group|table-row|table-column-group|table-column|table-cell|table-caption|inherit

其中常用的的有none、inline、block、inline-block。分别的意思是：

1、none： 元素不会显示，而且改元素现实的空间也不会保留。但有另外一个 visibility: hidden， 是保留元素的空间的。

2、inline： display的默认属性。将元素显示为内联元素，元素前后没有换行符。我们知道内联元素是无法设置宽高的，所以一旦将元素的display 属性设为 inline， 设置属性height和width是没有用的。此时影响它的高度一般是内部元素的高度（font-size）和padding。
3、block： 将元素将显示为块级元素，元素前后会带有换行符。设置为block后，元素可以设置width和height了。元素独占一行。
4、inline-block：行内块元素。这个属性值融合了inline 和 block 的特性，即是它既是内联元素，又可以设置width和height。
其他display的属性值不是很常用，其具体的含义如下：
list-item： 此元素会作为列表显示。
run-in： 此元素会根据上下文作为块级元素或内联元素显示。
table： 此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
inline-table： 此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
table-row-group： 此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
table-header-group： 此元素会作为一个或多个行的分组来显示（类似 <thead>）。
table-footer-group： 此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
table-row： 此元素会作为一个表格行显示（类似 <tr>）。
table-column-group： 此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
table-column： 此元素会作为一个单元格列显示（类似 <col>）
table-cell： 此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
table-caption： 此元素会作为一个表格标题显示（类似 <caption>）
inherit： 规定应该从父元素继承 display 属性的值。
另外有两个已经废除的属性值：
compact CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
marker CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。

还有flex布局不知道算不算  ？

display:box和display:flex属性介绍 请点击 详细内容

3、如何实现JS的封装和JS封装的好处

对于JS代码，因为本身就是一出现是一大段，自然如果不封包起来通过调用的方式进行整理的话，直接放到网站源码中，自然就会加大的源码的体积，而且还会影响到代码的美现。而且现在很多的杀毒软件都把JS代码误报为病毒，况且JS代码外露也很容易让不良分子找到攻击网站的参照物。
　　JS封装的好处：
　　1、提高网站的打开速度。
　　2、符合SEO搜索引擎思路。
　　3、加大网站的曝光力度。
　　所以，对于提高网站访问速度，最好把JS代码封包起来，而且还要通过ROBOT文件把之屏蔽掉，毕竟这些都是搜索引挚不能识别的，外放对于提高收录只有坏外没有好处，所以，为了收录为了访问速度能封装的JS代码就尽时封装。

4、请用css实现一个 ◀的符号样式

<!-- 向左的三角形 html部分 -->
<div class="triangle_border_left"></div>

/*css部分*/
.triangle_border_left{
width:0;
height:0;
border：30px solid;
border-color:transparent #000 transparent transparent;/*透明 灰 透明 透明 */
}

5、有一个宽200像素，高300像素的的div 请写出你所知道的在浏览器中水平垂直居中的所有办法

①div{width:200px;height:300px;position:absolute;top:50%;left:50%;margin-left:-100px;margin-top：-150px;}
②div{width:200px;height:300px;position:absolute;top:50%;margin:-150px auto;}
③div{
width:200px;
height:300px;
position:absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);}
④div{
width:200px;
height:300px;
background-color: #000;
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;}

⑤display:flex 的方法暂时没试出效果
在特定情况下有作用的 /*主要代码*/
display: flex;
align-items: center;
justify-content: center;

6、有一个不知道宽度和高度的div 请写出你所知道的在浏览器中水平垂直居中的所有办法

①
div{position:absolute; 
top:50%; 
left: 50%; 
-webkit-transform: translate(-50%, -50%); 
transform: translate(-50%, -50%); }
②
div{display: flex; 
align-items: center; 
justify-content: center; }
③
div{content:""; 
display: inline-block; 
vertical-align: middle; 
height: 100%; }

7、写出你所知道的所有清除浮动的方法

浮动会使当前标签产生向上浮的效果，同时会影响到前后标签、父级标签的位置及 width height 属性。而且同样的代码，在各种浏览器中显示效果也有可能不相同，这样让清除浮动更难了。解决浮动引起的问题有多种方法，但有些方法在浏览器兼容性方面还有问题。

1，父级div定义 height

原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。

优点：简单、代码少、容易掌握

缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题

建议：不推荐使用，只建议高度固定的布局时使用

2，结尾处加空div标签 clear:both

原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度

优点：简单、代码少、浏览器支持好、不容易出现怪问题

缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，让人感觉很不好

建议：不推荐使用，但此方法是以前主要使用的一种清除浮动方法

3，父级div定义 伪类:after 和 zoom

原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE转有属性)可解决ie6,ie7浮动问题

优点：浏览器支持好、不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）

缺点：代码多、不少初学者不理解原理，要两句代码结合使用才能让主流浏览器都支持。

建议：推荐使用，建议定义公共类，以减少CSS代码。

4，父级div定义 overflow:hidden

原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度

优点：简单、代码少、浏览器支持好

缺点：不能和position配合使用，因为超出的尺寸的会被隐藏。

建议：只推荐没有使用position或对overflow:hidden理解比较深的朋友使用。

5，父级div定义 overflow:auto

原理：必须定义width或zoom:1，同时不能定义height，使用overflow:auto时，浏览器会自动检查浮动区域的高度

优点：简单、代码少、浏览器支持好

缺点：内部宽高超过父级div时，会出现滚动条。

建议：不推荐使用，如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。

6，父级div 也一起浮动

原理：所有代码一起浮动，就变成了一个整体

优点：没有优点

缺点：会产生新的浮动问题。

建议：不推荐使用，只作了解。

7，父级div定义 display:table

原理：将div属性变成表格

优点：没有优点

缺点：会产生新的未知问题。

建议：不推荐使用，只作了解。

8，结尾处加 br标签 clear:both

原理：父级div定义zoom:1来解决IE浮动问题，结尾处加 br标签 clear:both

建议：不推荐使用，只作了解。

8、jquery的事件绑定和事件委托的区别

什么是事件委托：通俗的讲，事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢，就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件。
jQuery的事件委托是将事件从事件的发生者(即event target,译者注)一直向上冒泡到绑定了事件处理程序的元素上(例如从最内层元素向上冒泡到最外层元素)，并为冒泡“沿路”过程中匹配的所有选择器执行事件处理程序。
事件委托的优点
1、能处理来自于内层子元素的事件，这些内层子元素是在稍后时间里被添加的文档中的。通过选择一个在绑定事件委托处理程序时肯定存在的元素，就可以使用事件委托来避免 需要频繁的添加和删除事件处理程序的操作。
这个元素可以是MVC模式下的一个视图容器元素或者是document元素(如果事件处理程序需要监听文档中的全部冒泡事件)。在加载任何html代码之前，document元素已经在html文档的头部存在了，所以无需等待dom ready就可以在document这个元素上绑定事件了，这是安全可靠的。

2、除了可以处理尚未创建的内层子元素的事件，事件委托的另一个优点是：当需要监听很多元素时，事件委托的性能更好。

如果on()方法的selector 参数为空，事件处理程序就被称为直接绑定。每当在被绑定元素上(如下例中被绑定的document元素，译者注)发生事件时，无论这个事件发生在这个元素上还是从内层元素经冒泡而来，该处理程序都会被调用。
如果on()方法的selector 参数不为空，事件处理程序就被称为委托。当事件直接发生在被绑定的元素上(如下例中绑定到document上，译者注)时，该程序不会被调用，而只有当事件发生在与选择器匹配的内部元素上(如下例中click事件发生在button上，译者注)时，才会调用该程序。

jQuery的事件委托是将事件从事件的发生者(即event target,译者注)一直向上冒泡到绑定了事件处理程序的元素上(例如从最内层元素向上冒泡到最外层元素)，并为冒泡“沿路”过程中匹配的所有选择器执行事件处理程序。

并且，如果on()方法的selector 参数为空，它与bind()方法相同——只能绑定页面已有元素的事件。
总结

1.选择器匹配到的元素比较多时，不要用bind()迭代绑定
2.用id选择器时，可以用bind()
3.需要给动态添加的元素绑定时，用delegate()或者on()
4.用delegate()和on()方法，dom树不要太深
5.尽量使用on()来代替delegate()和bind()
6.在需要为较多的元素绑定事件的时候，优先考虑事件委托，可以带来性能上的好处
7.bind()和delegate()都是通过on()方法实现的，只是参数不同——当on()的selector参数为空时，其效果完全等同于bind();当selector参数不为空时，其效果完全等同于delegate();
8.使用.on()方法时，事件只会绑定到$()函数的选择符表达式匹配的元素上（上面例子中，为了简单绑定到了document），因此可以精确地定位到页面中的一部分，从而减少事件冒泡的开销。

参考来源 点击打开链接