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

心已赠人 2022-06-08 11:14 246阅读 0赞

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

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

<table style="margin:15px 0px 0px; padding:0px; border:1px solid rgb(170,170,170); border-collapse:collapse; width:809px; color:rgb(0,0,0); font-family:PingFangSC-Regular,Verdana,Arial,微软雅黑,宋体; font-size:14px; background-color:rgb(253,252,248)"> 
 <tbody style="margin:0px; padding:0px; border:0px"> 
  <tr style="margin:0px; padding:0px; border:0px; background-color:rgb(255,255,255)"> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> absolute</td> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; border:0px; line-height:21px"> 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。</p> <p style="margin-top:12px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; border:0px; line-height:21px"> 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。</p> </td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px; background-color:rgb(245,245,245)"> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> fixed</td> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; border:0px; line-height:21px"> 生成绝对定位的元素，相对于浏览器窗口进行定位。</p> <p style="margin-top:12px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; border:0px; line-height:21px"> 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。</p> </td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px; background-color:rgb(255,255,255)"> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> relative</td> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; border:0px; line-height:21px"> 生成相对定位的元素，相对于其正常位置进行定位。</p> <p style="margin-top:12px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; border:0px; line-height:21px"> 因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。</p> </td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px; background-color:rgb(245,245,245)"> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> static</td> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px; background-color:rgb(255,255,255)"> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> inherit</td> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> 规定应该从父元素继承 position 属性的值。</td> 
  </tr> 
 </tbody> 
</table>

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

其中常用的的有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属性介绍 请点击 [详细内容][Link 1]

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

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

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

<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），因此可以精确地定位到页面中的一部分，从而减少事件冒泡的开销。  
  
参考来源 点击打开链接

[Link 1]: http://www.cnblogs.com/walk-on-the-way/p/5997454.html