2018初、中级前端面试题

一、HTML&CSS部分1.1css常用布局1.1.1CSS盒模型CSS中Boxmodel是分为两种::W3C标准和IE标准盒子模型。当不对doctype进行定义时，会触发怪异模式。在标准模式下，一个块的总宽度=width+margin(左右)+padding(左右)+border(左右)在怪异模式下，一个块的总宽度=width+margin(左右)（即width已经包含了padding和border值）box-sizing:content-box（标准模式）||border-box（怪异模式）1.1.2CSS布局流式布局、浮动布局及绝对定位布局文档流式布局：从上到下，从左到右，输出文档内容；由块级元素和行级元素组成。块级元素会独占一行,默认情况下,其宽度自动填满其父元素宽度。行内元素不会独占一行,相邻的行内元素会排列在同一行里,直到一行排不下,才会换行,其宽度随元素的内容而变化.另外块级元素可以设置width,height属性.行内元素设置width,height属性无效，它的长度高度主要根据内容决定.块级元素即使设置了宽度,仍然是独占一行.浮动布局使元素脱离文档流，父元素在高度自适应的情况下，由于浮动丢失了子元素的高度，父元素就无法被撑开，所以导致父元素的背景、边框等属性无法生效，也会使后面的元素顶上来。我们使用浮动一般是为了让块级元素实现行级元素的特性，但也不希望浮动元素影响后面的元素位置，当浮动失去文档流，使后面的元素顶上来以后，一般有三种方法可以处理：1、为父元素增加height属性，这样父元素就会显示边框、背景等，但这种情况是确定浮动元素的高度时才这么做，但是实际中，可能不清楚高度哦2、为浮动元素后面的元素增加clear:both，清除浮动效果，如果没有后面元素的话，增加一个元素。3、为父元素设置overflow:hidden属性绝对定位布局，通过设置position属性实现。CSS中规定的第三种定位机制，能够实现横向多列布局及较为复杂的定位。比如：带有遮罩层效果的提示框、固定层效果、全屏广告等等。position属性拥有3种定位形式：1、静态定位2、相对定位3、绝对定位可设置4个属性值：static（静态定位）relative（相对定位）absolute（绝对定位）fixed（固定定位）CSS3：center、page、sticky伸缩盒flex布局flex容器属性：1、flex-direction横向从左到右排列（左对齐）|对齐方式与row相反|即纵向从上往下排列（顶对齐）|对齐方式与column相反flex-direction:row|row-reverse|column|column-reverse;2、flex-wrap不换行，换行，换行且第一行在下方flex-wrap:nowrap|wrap|wrap-reverse;3、flex-flow前两项属性简写，默认rownowrapflex-flow:flex-direction||flex-wrap;4、justify-content:子元素主轴位置:左对齐，右对齐，居中，两端对齐，项目两侧距离相等justify-content:flex-start|flex-end|center|space-between|space-around;5、align-items子元素纵轴对齐：上，下，居中，基线，占满align-items:flex-start|flex-end|center|baseline|stretch;6、align-content带基线对齐（多行的弹性盒模型容器）align-content:flex-start|flex-end|center|space-between|space-around|stretch;flex元素属性：1、flex:flex属性是flex-grow,flex-shrink和flex-basis的简写，默认值为01autoflex:none|['flex-grow''flex-shrink'?||'flex-basis']flex-grow：弹性盒的扩展比率；flex-shrink：弹性盒的收缩比率；flex-basis：弹性盒伸缩基准值2、order属性，默认0，填写可设置元素顺序3、align-self子元素在纵轴方向上的对齐方式align-self:auto|flex-start|flex-end|center|baseline|stretch;允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretchGrid布局：将页面表示为栅格display:grid;目前还处于W3C的工作草案之中，并且默认情况下，还不被所有的浏览器所支持。InternetExplorer10和11已经可以实现支持，但也是利用一种过时的语法实现的二列&三列布局二列布局的特征是侧栏固定宽度，主栏自适应宽度。三列布局的特征是两侧两列固定宽度，中间列自适应宽度。1、float+margin设置两个侧栏分别向左向右浮动，中间列通过外边距给两个侧栏腾出空间，中间列的宽度根据浏览器窗口自适应2、position+margin通过绝对定位将两个侧栏固定，同样通过外边距给两个侧栏腾出空间，中间列自适应3、圣杯布局(float+负margin+padding+position)主面板设置宽度为100%，主面板与两个侧栏都设置浮动，常见为左浮动，这时两个侧栏会被主面板挤下去。通过负边距将浮动的侧栏拉上来，左侧栏的负边距为100%，刚好是窗口的宽度，因此会从主面板下面的左边跑到与主面板对齐的左边，右侧栏此时浮动在主面板下面的左边，设置负边距为负的自身宽度刚好浮动到主面板对齐的右边。为了避免侧栏遮挡主面板内容，在外层设置左右padding值为左右侧栏的宽度，给侧栏腾出空间，此时主面板的宽度减小。由于侧栏的负margin都是相对主面板的，两个侧栏并不会像我们理想中的停靠在左右两边，而是跟着缩小的主面板一起向中间靠拢。此时使用相对布局，调整两个侧栏到相应的位置。(亦可主面板设置box-sizing:border-box;属性，padding值设置在主面板)问题：DOM元素的书写顺序不得更改。当面板的main内容部分比两边的子面板宽度小的时候，布局就会乱掉。可以通过设置main的min-width属性或使用双飞翼布局避免问题。3、双飞翼布局(float+负margin+margin)双飞翼布局和圣杯布局的思想有些相似，都利用了浮动和负边距，但双飞翼布局在圣杯布局上做了改进，在main元素上加了一层div,并设置margin,由于两侧栏的负边距都是相对于main-wrap而言，main的margin值变化便不会影响两个侧栏，因此省掉了对两侧栏设置相对布局的步骤。（圣杯采用的是padding，而双飞翼采用的margin，解决了圣杯布局main的最小宽度不能小于左侧栏的缺点）1.2BFCBFC就是一种布局方式，在这种布局方式下，盒子们自所在的containingblock顶部一个接一个垂直排列，水平方向上撑满整个宽度（除非内部盒子自己建立了新的BFC）。两个相邻的BFC之间的距离由margin决定。在同一个BFC内部，两个垂直方向相邻的块级元素的margin会发生“塌陷”。float属性不为noneoverflow不为visible(可以是hidden、scroll、auto)position为absolute或fixeddisplay为inline-block、table-cell、table-captionBFC的作用1.清除内部浮动我们在布局时经常会遇到这个问题：对子元素设置浮动后，父元素会发生高度塌陷，也就是父元素的高度变为0。解决这个问题，只需要把把父元素变成一个BFC就行了。常用的办法是给父元素设置overflow:hidden。2.垂直margin合并在CSS当中，相邻的两个盒子的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。折叠的结果：两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。两个外边距一正一负时，折叠结果是两者的相加的和。3.创建自适应两栏布局在很多网站中，我们常看到这样的一种结构，左图片+右文字的两栏结构。1.3居中问题1、父元素inlink-block+text-align子元素水平居中（需要为内联元素）2、block+margin:0auto;水平居中3、position+margin-left:||margin-top(水平&垂直居中)需要知道元素本身宽高4、position+transform:translate(-50%,-50%)5、position:absolute;left:0;top:0;right:0;bottom:0;+margin:auto;6、diplay：table-cell+vertical-align:middle+text-align:center(元素本身不得浮动)7、flexBox居中display:flex;justify-content:center;align-items:center;8、父元素font-size:0;line-height:‘height’;text-align:center;子元素vertical-align:middle;display:inline-block;1.4session、cookie、sessionStorage、localStorage等区别1.4.1cookie和sessioncookie和session都是用来跟踪浏览器用户身份的会话方式区别：1、保持状态：cookie保存在浏览器端，session保存在服务器端2、使用方式：（1）cookie机制：如果不在浏览器中设置过期时间，cookie被保存在内存中，生命周期随浏览器的关闭而结束，这种cookie简称会话cookie。如果在浏览器中设置了cookie的过期时间，cookie被保存在硬盘中，关闭浏览器后，cookie数据仍然存在，直到过期时间结束才消失。Cookie是服务器发给客户端的特殊信息，cookie是以文本的方式保存在客户端，每次请求时都带上它（2）session机制：当服务器收到请求需要创建session对象时，首先会检查客户端请求中是否包含sessionid。如果有sessionid，服务器将根据该id返回对应session对象。如果客户端请求中没有sessionid，服务器会创建新的session对象，并把sessionid在本次响应中返回给客户端。通常使用cookie方式存储sessionid到客户端，在交互中浏览器按照规则将sessionid发送给服务器。如果用户禁用cookie，则要使用URL重写，可以通过response.encodeURL(url)进行实现；API对encodeURL的结束为，当浏览器支持Cookie时，url不做任何处理；当浏览器不支持Cookie的时候，将会重写URL将SessionID拼接到访问地址后。3、存储内容：cookie只能保存字符串类型，以文本的方式；session通过类似与Hashtable的数据结构来保存，能支持任何类型的对象(session中可含有多个对象)4、存储的大小：cookie：单个cookie保存的数据不能超过4kb；session大小没有限制。5、安全性：cookie：针对cookie所存在的攻击：Cookie欺骗，Cookie截获；session的安全性大于cookie。原因如下：（1）sessionID存储在cookie中，若要攻破session首先要攻破cookie；（2）sessionID是要有人登录，或者启动session_start才会有，所以攻破