前端基础面试题总结一：

最新推荐文章于 2024-08-16 23:06:16 发布

yingfengxuewu

最新推荐文章于 2024-08-16 23:06:16 发布

阅读量246

点赞数

分类专栏： web前端文章标签：前端 css 布局

本文链接：https://blog.csdn.net/yingfengxuewu/article/details/83501419

版权

web前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.三栏布局的5种解决方案及优缺点

假设高度已知，请写出三栏布局，左栏、右栏宽度300px，中间宽度自适应。

在这里插入图片描述
这道题本身的难度并不大，我们在布局页面的时候，写个三栏布局还是挺简单的。但是如果在面试的时候遇到这道题，就没有那么简单了。看似简单的一道题，想把它答好是不简单的。往往越简单的题越不好答。如果看到这题只想到了浮动和绝对定位，那这题你连及格都及格不了。

下面是5种三栏布局的方法。
在写布局代码之前，先写两段公共的样式，此段写在头部

样式

<style media="screen">
      html *{
        padding: 0;
        margin: 0;
      }
      .layout article div{
        min-height: 100px;
      }
    </style>

a. 浮动布局

<!--浮动布局  -->
    <section class="layout float">
      <style media="screen">
      .layout.float .left{
        float:left;
        width:300px;
        background: red;
      }
      .layout.float .center{
        background: yellow;
      }
      .layout.float .right{
        float:right;
        width:300px;
        background: blue;
      }
      </style>
      <h1>三栏布局</h1>
      <article class="left-right-center">
        <div class="left"></div>
        <div class="right"></div>
        <div class="center">
          <h2>浮动解决方案</h2>
          1.这是三栏布局的浮动解决方案；
          2.这是三栏布局的浮动解决方案；
        </div>
      </article>
    </section>

浮动布局是有局限性的，浮动元素是脱离文档流，要做清除浮动，这个处理不好的话，会带来很多问题，比如高度塌陷等。
浮动布局的优点就是比较简单，兼容性也比较好。只要清除浮动做的好，是没有什么问题的。
延伸：你知道哪些清除浮动的方案？每种方案的有什么优缺点?

b 绝对定位布局

<!-- 绝对布局 -->
    <section class="layout absolute">
      <style>
        .layout.absolute .left-center-right>div{
          position: absolute;
        }
        .layout.absolute .left{
          left:0;
          width: 300px;
          background: red;
        }
        .layout.absolute .center{
          left: 300px;
          right: 300px;
          background: yellow;
        }
        .layout.absolute .right{
          right:0;
          width: 300px;
          background: blue;
        }
      </style>
      <h1>三栏布局</h1>
      <article class="left-center-right">
        <div class="left"></div>
        <div class="center">
          <h2>绝对定位解决方案</h2>
          1.这是三栏布局的绝对定位解决方案；
          2.这是三栏布局的绝对定位解决方案;
        </div>
        <div class="right"></div>
      </article>
    </section>

绝对定位布局优点，很快捷，设置很方便，而且也不容易出问题，你可以很快的就能想出这种布局方式。
缺点就是，绝对定位是脱离文档流的，意味着下面的所有子元素也会脱离文档流，这就导致了这种方法的有效性和可使用性是比较差的。

c. flex布局

<!-- flexbox布局 -->
    <section class="layout flexbox">
      <style>
        .layout.flexbox{
          margin-top: 110px;
        }
        .layout.flexbox .left-center-right{
          display: flex;
        }
        .layout.flexbox .left{
          width: 300px;
          background: red;
        }
        .layout.flexbox .center{
          flex:1;
          background: yellow;
        }
        .layout.flexbox .right{
          width: 300px;
          background: blue;
        }
      </style>
<h1>三栏布局</h1>
      <article class="left-center-right">
        <div class="left"></div>
        <div class="center">
          <h2>flexbox解决方案</h2>
          1.这是三栏布局的felx解决方案；
          2.这是三栏布局的flex解决方案；
        </div>
        <div class="right"></div>
      </article>
    </section>

felxbox布局是css3里新出的一个，它就是为了解决上述两种方式的不足出现的，是比较完美的一个。目前移动端的布局也都是用flexbox。
felxbox的缺点就是不能兼容IE8及以下浏览器。

d.表格布局

<!-- 表格布局 -->
    <section class="layout table">
      <style>
        .layout.table .left-center-right{
          width:100%;
          height: 100px;
          display: table;
        }
        .layout.table .left-center-right>div{
          display: table-cell;
        }
        .layout.table .left{
          width: 300px;
          background: red;
        }
        .layout.table .center{
          background: yellow;
        }
        .layout.table .right{
          width: 300px;
          background: blue;
        }
      </style>
      <h1>三栏布局</h1>
      <article class="left-center-right">
        <div class="left"></div>
        <div class="center">
          <h2>表格布局解决方案</h2>
          1.这是三栏布局的表格解决方案；
          2.这是三栏布局的表格解决方案;
        </div>
        <div class="right"></div>
      </article>
    </section>

表格布局在历史上遭到很多人的摒弃，说表格布局麻烦，操作比较繁琐，其实这是一种误解，在很多场景中，表格布局还是很适用的，比如这个三栏布局，用表格布局就轻易写出来了。还有表格布局的兼容性很好，在flex布局不兼容的时候，可以尝试表格布局。
表格布局也是有缺陷的，当其中一个单元格高度超出的时候，两侧的单元格也是会跟着一起变高的，而有时候这种效果不是我们想要的。

e. .网格布局

<section class="layout grid">
      <style>
        .layout.grid .left-center-right{
          width:100%;
          display: grid;
          grid-template-rows: 100px;
          grid-template-columns: 300px auto 300px;
        }
        .layout.grid .left-center-right>div{

        }
        .layout.grid .left{
          width: 300px;
          background: red;
        }
        .layout.grid .center{
          background: yellow;
        }
        .layout.grid .right{

          background: blue;
        }
      </style>
      <h1>三栏布局</h1>
      <article class="left-center-right">
        <div class="left"></div>
        <div class="center">
          <h2>网格布局解决方案</h2>
          1.这是三栏布局的网格布局解决方案；
          2.这是三栏布局的网格布局解决方案;
        </div>
        <div class="right"></div>
      </article>
    </section>

网格布局也是新出的一种布局方式，如果你答出这种方式，也就证明了你的实力，证明你对技术热点是有追求的，也说明你有很强的学习能力。
这五种解决方案应该是最常见的三栏布局，如果你还有其他的方案，欢迎补充！

最后这个问题还有很多延伸问题的，比如，

高度已知换为高度未知呢？
块内内容超出会是怎样的效果？
如果是上下高度已知，中间自适应呢？
如果是两栏布局呢？
如果是上下左右混合布局呢？
以上几个延伸你能否轻松应对，如果绝对还有欠缺，尽早查缺补漏吧！

欢迎补充！
本本文属于转载原文地址:请点击。

2. 如何实现弹窗的水平居中：

方法一：

//控制弹窗水平垂直居中
var win_width=parseInt(document.body.clientWidth)/2-400; //400为弹窗的宽度的一半
var win_heigth=parseInt(document.body.clientHeight)/2-250; //250为弹窗高度的一半
$(".windowshow").css({"left":win_width+"px","top":win_heigth+"px"}); //.windowshow为弹窗的class

方法二：
该方法是封装好的，只需要在调用弹窗的地方调用该方法，并传对象（要居中的弹窗对象）即可。如下：
divCenter（$(".windowshow")）；

.windowshow {
width: 800px;
height: 500px;
position: absolute;
border-top: 5px solid #398FC7;
left: 50%;
top: 50%;
margin: 0,0,0,0;
background: #fff;
z-index: 1001;
}

3. == 和 === 的区别

==用于一般比较，===用于严格比较，==在比较的时候可以转换数据类型，===严格比较，只要类型不匹配就返回flase。举例说明：“1” == true类型不同，""将先做类型转换，把true转换为1，即为 “1” == 1；此时，类型仍不同，继续进行类型转换，把"1"转换为1，即为 1 == 1。1.如果比较：“1” === true 左侧为字符型，右侧为bool布尔型或int数值型，左右两侧类型不同，结果为false；
如果比较： 1 === 1 左侧为int数值型，右侧为int数值型，左右两侧类型相同，数值大小也相同，结果为true；3.如果比较： 1 === 2 左侧为int数值型，右侧为int数值型，左右两侧类型相同，但数值大小不同，结果为false。

4.window.onload执行时间？

在JS中，如果希望在页面加载完成后执行某些操作的话，一般的写法如下：
window.onload = function(){//ToDo};
但是，onload函数的执行并不是我们通常所理解的浏览器构建完html页面对应的DOM树后立刻执行，而是要等到页面中所引用的图片等外部资源完全下载完成后并且在浏览器中显示才执行，也就是说，如果页面中包括很多图片或者图片很大时将导致onload函数执行时间会被推迟很久，页面中基于 onload的特效或者其它相关内容将并不立刻可用，导致用户体验差。JQUERY的提供了一个自己的类似onload方式，通过该方法实现的页面加载后执行函数将在浏览器构建完DOM树后立刻执行，而并不需要等待图片等外部资源下载完成。
$function(){//something to do}); 在$ (document).ready()执行时，整个DOM文档树已经解析完成，即各个DOM元素都已经可以访问了（但是对于某些元素的某些属性此时访问可能还不精确，如图片的宽度高度）
而window.onload会在整个文档都加载完成后才会执行，常见的就是对于页面含很多图片的情况下，必须等到图片都下载下来后才会执行。而$(document).ready()不会。

5.了解JS继承吗？

prototype(原型)模式
prototype为构造函数的一个属性，指向另一个对象，该对象所有属性方法都会被构造函数实例继承。一般用来存放公有方法和属性。

function Man(name,age){
      this.name = name;
      this.age = age;
  }
  Man.prototype.work = function(){alert("人都需要工作");{}
  var man5 = new Man("hkj",20);
  man5.work();

优点：所有实例对象的work方法都使用了同一个内存地址指向了prototype对象，提高了效率。
相关方法：

alert(Man.prototype.isPrototypeOf(man5)); //true     判断prototype与实例之间的关系
alert(Man.hasOwnProperty("name"));  //true       判断是否是本地属性 alert("name" in man5);   //true     判断是否含有某个属性

6.利用原型链的继承有什么缺点吗？

类式继承：在子类型构造函数的内部调用父类的构造函数
原型继承：子类通过prototype将所有在父类中通过prototype添加的属性和方法都追加到Child，从而实现了继承
优缺点：类式继承在运行时，无法修改或者添加新的方法，而原型继承是可以通过改变原型链接而对子类进行修改的，类式继承不支持多重继承，而对于原型继承来说，只需要写好extend对对象进行进一步的扩展就可以。

yingfengxuewu

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端基础面试题总结一：

1.三栏布局的5种解决方案及优缺点假设高度已知，请写出三栏布局，左栏、右栏宽度300px，中间宽度自适应。这道题本身的难度并不大，我们在布局页面的时候，写个三栏布局还是挺简单的。但是如果在面试的时候遇到这道题，就没有那么简单了。看似简单的一道题，想把它答好是不简单的。往往越简单的题越不好答。如果看到这题只想到了浮动和绝对定位，那这题你连及格都及格不了。下面是5种三栏布局的方法。在写布局代...
复制链接

扫一扫