20190417

1 [html] 页面导入样式时，使用link和@import有什么区别？

答：区别如下

从属关系的区别：link是HTML标签，@import是css提供的。
加载顺序的区别：link引入的样式页面加载时同时加载，@import引入的样式需等页面加载完成后再加载。
兼容性上的区别：link没有兼容性问题，@import不兼容ie5以下。
DOM可控性区别：link可以通过js操作DOM动态引入样式表改变样式，而@import不可以。

2 [css] 圣杯布局和双飞翼布局的理解和区别，并用代码实现

答：

什么是圣杯布局和双飞翼布局？

作用：圣杯布局和双飞翼布局解决的问题是一样的，就是两边定宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。

区别：

圣杯布局，为了中间div内容不被遮挡，将中间div设置了左右padding-left和padding-right后，
将左右两个div用相对布局position: relative并分别配合right和left属性，以便左右两栏div移动后不遮挡中间div。
双飞翼布局，为了中间div内容不被遮挡，直接在中间div内部创建子div用于放置内容，
在该子div里用margin-left和margin-right为左右两栏div留出位置。

圣杯布局

<body>
<div class="container">
    <div class="center">圣杯布局圣杯布局圣杯布局圣杯布局圣杯布局圣杯布局圣杯布局圣杯布局圣杯布局</div>
    <div class="left">圣杯布局圣杯布局圣杯布局圣杯布局圣杯布局圣杯布局圣杯布局圣杯布局圣杯布局</div>
    <div class="right">圣杯布局圣杯布局圣杯布局圣杯布局圣杯布局圣杯布局圣杯布局圣杯布局圣杯布局</div>
</div>
</body>
<style>
    body {
        min-width: 800px;
        margin: 0;
    }
    .container {
        padding: 0 200px;
    }
    .center {
        float: left;
        width: 100%;
        min-height: 500px;
        background: #f0f2f7;
    }
    .left {
        float: left;
        width: 200px;
        min-height: 500px;
        background: #f6f6f6;
        margin-left: -100%;
        position: relative;
        right: 200px;
    }
    .right {
        float: left;
        width: 200px;
        min-height: 500px;
        background: #f6f6f6;
        margin-right: -200px;
    }
</style>

双飞翼布局

<body>
<div class="container">
    <div class="center">
        双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局
        双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局
    </div>
</div>
<div class="left">
    双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局
    双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局
</div>
<div class="right">
    双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局
    双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局
</div>
</body>
<style>
    body {
        min-width: 800px;
        margin: 0;
    }
    .container {
        float: left;
        width: 100%;
    }
    .center {
        margin: 0 200px;
        min-height: 500px;
        background: #f0f2f7;
    }
    .left {
        margin-left: -100%;
        float: left;
        width: 200px;
        min-height: 500px;
        background: #f6f6f6;
    }
    .right {
        margin-left: -200px;
        float: left;
        width: 200px;
        min-height: 500px;
        background: #f6f6f6;
    }
</style>

3 [js] 用递归算法实现，数组长度为5且元素的随机数在2-32间不重复的值

这是一道大题目，把考点拆成了4个小项；需要侯选人用递归算法实现（限制15行代码以内实现；限制时间10分钟内完成）： 1. 生成一个长度为5的空数组arr。 1. 生成一个（2－32）之间的随机整数rand。 1. 把随机数rand插入到数组arr内，如果数组arr内已存在与rand相同的数字，则重新生成随机数rand并插入到arr内[需要使用递归实现，不能使用for/while等循环] 1. 最终输出一个长度为5，且内容不重复的数组arr。

答：

/**生成长度为5的空数组**/
var arr = [,,,,,]
var getRand = function (max, min) {
  return parseInt(Math.random() * (max - min + 1) + min )
}
var pushRand = function (arr, i) {
  if (i === 0) {
    arr[0] = getRand(32, 2)
    i++
    pushRand(arr, i)
  } else if (i > arr.length-1) {
    return arr
  } else {
    var rand = getRand(32, 2)
    if (arr.indexOf(rand) < 0) {
      arr[i] = rand
      i++
      pushRand(arr, i)
    } else {
      pushRand(arr, i)
    }
  }
}
pushRand(arr, 0)
console.log(arr)

Previous20190418 NextLinux面试题

Last updated 4 years ago

Was this helpful?

20190417

1 [html] 页面导入样式时，使用link和@import有什么区别？

答：区别如下

从属关系的区别：link是HTML标签，@import是css提供的。
加载顺序的区别：link引入的样式页面加载时同时加载，@import引入的样式需等页面加载完成后再加载。
兼容性上的区别：link没有兼容性问题，@import不兼容ie5以下。
DOM可控性区别：link可以通过js操作DOM动态引入样式表改变样式，而@import不可以。

2 [css] 圣杯布局和双飞翼布局的理解和区别，并用代码实现

答：

什么是圣杯布局和双飞翼布局？

作用：圣杯布局和双飞翼布局解决的问题是一样的，就是两边定宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。

区别：

圣杯布局，为了中间div内容不被遮挡，将中间div设置了左右padding-left和padding-right后，
将左右两个div用相对布局position: relative并分别配合right和left属性，以便左右两栏div移动后不遮挡中间div。
双飞翼布局，为了中间div内容不被遮挡，直接在中间div内部创建子div用于放置内容，
在该子div里用margin-left和margin-right为左右两栏div留出位置。

圣杯布局

<body>
<div class="container">
    <div class="center">圣杯布局圣杯布局圣杯布局圣杯布局圣杯布局圣杯布局圣杯布局圣杯布局圣杯布局</div>
    <div class="left">圣杯布局圣杯布局圣杯布局圣杯布局圣杯布局圣杯布局圣杯布局圣杯布局圣杯布局</div>
    <div class="right">圣杯布局圣杯布局圣杯布局圣杯布局圣杯布局圣杯布局圣杯布局圣杯布局圣杯布局</div>
</div>
</body>
<style>
    body {
        min-width: 800px;
        margin: 0;
    }
    .container {
        padding: 0 200px;
    }
    .center {
        float: left;
        width: 100%;
        min-height: 500px;
        background: #f0f2f7;
    }
    .left {
        float: left;
        width: 200px;
        min-height: 500px;
        background: #f6f6f6;
        margin-left: -100%;
        position: relative;
        right: 200px;
    }
    .right {
        float: left;
        width: 200px;
        min-height: 500px;
        background: #f6f6f6;
        margin-right: -200px;
    }
</style>

双飞翼布局

<body>
<div class="container">
    <div class="center">
        双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局
        双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局
    </div>
</div>
<div class="left">
    双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局
    双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局
</div>
<div class="right">
    双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局
    双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局
</div>
</body>
<style>
    body {
        min-width: 800px;
        margin: 0;
    }
    .container {
        float: left;
        width: 100%;
    }
    .center {
        margin: 0 200px;
        min-height: 500px;
        background: #f0f2f7;
    }
    .left {
        margin-left: -100%;
        float: left;
        width: 200px;
        min-height: 500px;
        background: #f6f6f6;
    }
    .right {
        margin-left: -200px;
        float: left;
        width: 200px;
        min-height: 500px;
        background: #f6f6f6;
    }
</style>

3 [js] 用递归算法实现，数组长度为5且元素的随机数在2-32间不重复的值

答：

/**生成长度为5的空数组**/
var arr = [,,,,,]
var getRand = function (max, min) {
  return parseInt(Math.random() * (max - min + 1) + min )
}
var pushRand = function (arr, i) {
  if (i === 0) {
    arr[0] = getRand(32, 2)
    i++
    pushRand(arr, i)
  } else if (i > arr.length-1) {
    return arr
  } else {
    var rand = getRand(32, 2)
    if (arr.indexOf(rand) < 0) {
      arr[i] = rand
      i++
      pushRand(arr, i)
    } else {
      pushRand(arr, i)
    }
  }
}
pushRand(arr, 0)
console.log(arr)

Previous20190418 NextLinux面试题

Last updated 4 years ago

Was this helpful?