前端面试每日 3+1 —— 第1天

今天的面试题 (2020.01.03) —— 第1天

• [html]页面导入样式时，使用link和@import有什么区别？
  1. link属于XHTML标签，除了加载CSS外还可以加载RSS，定义了rel连接属性等，而@import只是css提供的，所以只能用来加载css
  2. 页面被加载时，link也会被同时加载，而@import引入的css则会等到页面加载完后在加载
  3. @import 是css2.1提出来的，只支持ie5及以上，而link是XHTML标签，无兼容问题
• [css] css使元素水平垂直居中的多种方式
  1.absolute定位 + 负边距

#container {
  width: 400px;
  height: 400px;
  position: relative;
  background-color: #FF8C00;
}

#center {
  position: absolute;
  height: 200px;
  width: 200px;
  top: 50%;
  left: 50%;
  margin-top: -100px;
  margin-left: -100px;
  background-color: cadetblue;
}

2. margin: auto;

#container {
  width: 400px;
  height: 400px;
  position: relative;
  background-color: #FF8C00;
}

#center {
  position: absolute;
  height: 200px;
  width: 200px;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  margin: auto;
  background-color: cadetblue;
}

3. transform实现

#container {
  width: 400px;
  height: 400px;
  position: relative;
  background-color: #FF8C00;
}

#center {
  position: absolute;
  height: 200px;
  width: 200px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: cadetblue;
}

4. flex布局

#container {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: red;
  height: 500px;
}

#center {
  height: 200px;
  width: 200px;
  background-color: cadetblue;
}

• [js] 请把数据处理为如下结构[222, 123, null ,null, 999, null, null, null, null, null,null, null]输出12个月的值

           obj = {
              1: 222,
              2: 123,
              5: 999
          }
            // fill() 填充方法用来数据
            let arr = new Array(12).fill(null).map((item, index) => {
                return obj[index + 1] || null;
            })

            obj.length = 12;

            let a= Array.from(obj).map((item, index) => {
                return typeof item === 'undefined' ? null : item
            })

            console.log(Array.from(a))

《论语》，曾子曰：“吾日三省吾身”（我每天多次反省自己）。
前端面试每日3+1题，以面试题来驱动学习，每天进步一点！
让努力成为一种习惯，让奋斗成为一种享受！

---

• 学习不打烊，充电加油只为遇到更好的自己，365天无节假日，每天纯手工发布面试题（死磕自己）。
• 希望大家在这浮夸的前端圈里，保持冷静，坚持每天花20分钟来学习与思考。
• 在这千变万化，类库层出不穷的前端，不建议大家等到要找工作时，才狂刷题，提倡每日学习！（不忘初心，html、css、javascript才是基石！）
• 欢迎大家加我QQ（2581229638）或者微信交流，大家有啥好的建议可以加我微信一起交流讨论！

作者：李永奇
链接：https://www.jianshu.com/p/3ac358c02e86
来源：
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。