面试指南

发表于 | 分类于

面试指南

HTML

html5语义化
  • 为什么需要语义化
    • 易修改、易维护
    • 无障碍阅读支持
    • 搜索引擎友好，利于 SEO
    • 面向未来的 HTML，浏览器在未来可能提供更丰富的支持
  • 结构语义化
    • 语义元素均有一个共同特点——他们均不做任何事情。换句话说，语义元素仅仅是页面结构的规范化，并不会对内容有本质的影响
    • eg:
  • 标准盒模型与低版本IE盒模型
    • 标准盒模型 宽度 = 内容的宽度（content）+ border+ padding + margin
    • 低版本IE盒模型 宽度 = 内容的宽度（content+ border+ padding）+ margin
  • box-sizing属性
    • 用来控制元素的盒子模型的解析模式，默认为content-box
    • context-box：W3C的标准盒子模型，设置元素的 height/width 属性指的是content部分的高/宽
    • border-box：IE传统盒子模型。设置元素的height/width属性指的是border + padding + content部分的高/宽
  • CSS选择器有哪些？哪些属性可以继承？
    • CSS选择符：id选择器(#myid)、类选择器(.myclassname)、标签选择器(div, h1, p)、相邻选择器(h1 + p)、子选择器（ul > li）、后代选择器（li a）、通配符选择器（*）、属性选择器（a[rel=”external”]）、伪类选择器（a:hover, li:nth-child）
    • 可继承的属性：font-size, font-family, color
    • 不可继承的样式：border, padding, margin, width, height
    • 优先级（就近原则）：!important > [ id > class > tag ]
    • !important 比内联优先级高

  • CSS优先级算法如何计算？

    • 元素选择符： 1
    • class选择符： 10
    • id选择符：100
    • 元素标签：1000
    • !important声明的样式优先级最高，如果冲突再进行计算
    • 如果优先级相同，则选择最后出现的样式
    • 继承得到的样式的优先级最低

  • CSS3新增伪类有那些?

    • p:first-of-type 选择属于其父元素的首个元素
    • p:last-of-type 选择属于其父元素的最后元素
    • p:only-of-type 选择属于其父元素唯一的元素
    • p:only-child 选择属于其父元素的唯一子元素
    • p:nth-child(2) 选择属于其父元素的第二个子元素
    • :enabled :disabled 表单控件的禁用状态
    • :checked 单选框或复选框被选中

  • 如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？（更优方法flexbox）

    1
    2
    3
    4
    border: 1px solid red;
    margin: 0 auto; 
    height: 50px;
    width: 80px;
1
2
3
4
5
6
7
8
border: 1px solid red;
float: left;
position: absolute;
width: 200px;
height: 100px;
left: 50%;
top: 50%;
margin: -50px 0 0 -100px;
1
2
3
4
5
6
7
border: 1px solid black;
position: absolute;
width: 200px;
height: 100px;
margin: 0 auto;
left: 0;
right: 0;

  • display有哪些值？说明他们的作用?

    • inline（默认）–内联
    • none–隐藏
    • block–块显示
    • table–表格显示
    • list-item–项目列表
    • inline-block
    • flex grid

  • position的值？

    • static（默认）：按照正常文档流进行排列；
    • relative（相对定位）：不脱离文档流，参考自身静态位置通过 top, bottom, left, right 定位；
    • absolute(绝对定位)：参考距其最近一个不为static的父级元素通过top, bottom, left, right 定位；
    • fixed(固定定位)：所固定的参照对像是可视窗口。
      more…

JS

js常见面试题

  • 浅拷贝和深拷贝的区别

    • 浅拷贝：一般指的是把对象的第一层拷贝到一个新对象上去，比如

      1
      2
      3
      4
      let a = { count: 1, deep: { count: 2 } };
      let b = Object.assign({}, a);
      // 或者
      let b = {...a};

    • 深拷贝：一般需要借助递归实现，如果对象的值还是个对象，要进一步的深入拷贝，完全替换掉每一个复杂类型的引用。

      1
      2
      3
      4
      5
      6
      7
      8
      let deepCopy = (obj) => {
        let ret = {};
        for (let key in obj) {
          let value = obj[key];
          ret[key] = typeof value === 'object' ? deepCopy(value) : value;
        }
        return ret;
      }