3

PART ONE -- HTML

1、html5 新特性,语义化?


新特性:

  • 语义特性,添加 <header></header><nav></nav> 等标签。
  • 多媒体,用于媒介回放的 video 和 audio 元素
  • 图像效果,用于绘画的 canvas 元素, svg 元素
  • 离线 & 缓存,对本地离线存储的更好的支持,localSrorage等
  • 设备兼容特性,HTML5 提供了前所未有的数据与应用介入开放接口。
  • 链接特性。Server-Sent Event 和 WebSockets 就是其中两个特性,这两个特性能帮助我们实现服务器将数据“推送”到客户端的功能。
  • 性能与集成特性,HTML5 会通过 XMLHttpRequest2 等技术,帮助您的 Web 应用和网站在多样化的环境中更快速的工作。

语义化:

语义化就是用合理、正确的标签来展示内容。语义化的优点有:易于用户阅读,样式丢失的时候能让页面呈现清晰的结构;有利于 SEO,搜索引擎根据标签来确定上下文个各个关键字的权重;方便其他设备解析,如读屏器;有利于开发和维护,语义化更具有可读性,代码更好维护,与 CSS3 关系更和谐。

2、浏览器的标准模式和怪异模式


标准模式:此模式下,浏览器按照 HTML 与 CSS 标准对文档进行解析和渲染;
怪异模式:此模式下,浏览器按照就有的非标准的实现方式对文档进行解析和渲染。

3、使用 data- 的好处


  • 自定义属性,可以被 js 很好的操作
  • 通过 js 的 element.dataset. 或 jQuery 的 data(‘‘) 拿到,* 可以为 url 等字符

4、什么是渐进式渲染


服务端渲染局部,客户端渲染局部。(参考: https://segmentfault.com/a/11...

PART TWO -- CSS

1、盒模型,box-sizing


盒模型:Every element in web design is a rectangular box。
clipboard.png
CSS3 的 box-sizing 属性:

  • content-box(默认):width = contentWidth + padding(left/right) + border(left/right)
  • padding-box:width = contentWidth(包含padding) + border(left/right)
  • border-box:width = contentWidth(包含 padding 和 border)

2、CSS3 新特性,伪类,伪元素,锚伪类


CSS3 新增特性主要有(使用比较频繁的):过渡(transition)、动画(animation)、形状转换(transform)、文字超出省略号、弹性布局(flex)、栅格布局(grid)、多列布局(column-count)、媒体查询。
(参考:https://segmentfault.com/a/11...

3、CSS实现隐藏页面元素的方式


  1. opacity: 0 -> 只能从视觉上隐藏元素,元素依旧占据位置并对网页的布局起作用,也会影响用户交互。在读屏软件中不会被隐藏。
  2. visibility: hidden -> 被隐藏的元素依然会对网页布局起作用,但不会影响任何用户交互。在读屏软件中也会被隐藏。
  3. diaplsy: none -> 隐藏元素,确保元素不可见并且连盒模型也不生成,被隐藏的元素不占据任何空间,且一旦设置了 display 为 none,任何对该元素直接的用户交互操作都不肯能。读屏软件也无法被读到。
  4. position:absolute -> 配合 top 和 left 属性,将元素移出可视区域,不会影响布局,又能让元素保持可操作。
  5. clip-path:剪裁(eg: clip-path: polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px);)

4、CSS 实现水平居中和垂直居中


自己最常用的三种:

.box {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.box {
    display: flex:
    align-items: center;
    justify-content: center;
}
.box {
    display: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

(别人写的总结:https://segmentfault.com/a/11...

5、说说 position, display


position:元素在页面中的布局遵守一套文档流的方式,默认的定位属性值为 static。它其实是未被设置定位的。元素如果被定为了,那么它的 top, left, bottom, right 值就会生效,能设置定位的属性是 relative, absolute,fixed。需要注意的是被定为的元素的层次(z-index)会得到提高。

  • relative:相对定位,元素会在自身文档流所在位置上被移动,其他的元素则不会调整位置来弥补它偏离后剩下的空袭。
  • absolute:绝对定位,元素脱离文档流,其他的元素会调整位置来弥补它偏离后剩下的空隙。
  • fixed:固定定位,元素相对的偏移参考是可视窗口

display:每一个元素都有默认的 display 属性。
常见的block属性元素有:div, h1-h6, ul, li, ol, dl, dd, dt。
常见的inline属性元素有: span, a, em。

6、解释一下 css3 的 flexbox,以及适用场景
Flex 意为“弹性布局”,用来为盒状模型提供最大的灵活性。采用 Flex 布局的元素,称为 flex 容器,简称“容器”。它的所有自元素自动成为容器成员,称为 flex 项目(flex item),简称“项目”。常规布局是基于块和内联流方向,而 flex 布局是基于 flex-flow 流,可以很方便的用来做居中,能对不同屏幕大小自适应。在布局上有了比以前更佳灵活的空间。

7、实现两栏布局有哪些方法?


参考:七种实现左侧固定,右侧自适应两栏布局的方法

  1. 左列定宽,右列自适应

    • margin + float

      <div class="box">
          <div class="left"></div>
          <div class="right-fix">
              <div class="right">
                  <p>right</p><p>right</p>
              </div>
          </div>
      </div>
      .left {
          float: left;
          width: 100px;
          position: relative;
      }
      .right-fix {
          float: right;
          width: 100%;
          margin-left: -100px;
      }
      .right {
          margin-left: 120px; // 形成 20px 间隔
      }
    • absolute

      <div class="box">
          <div class="left"></div>
          <div class="right"></div>
      </div>
      .box{
          position: relative;
      }
      .left{
          position: absolute;
          left: 0;
          width: 100px;
      }
      .right{
          position: absolute;
          left: 120px; // 形成 20px 间隔
          right: 0;
      }
  2. 左列不定宽,右列自适应
  • float + BFC

这个方法主要是应用到 BFC 的一个特性
浮动元素的块状兄弟元素会五十付哦那个元素的位置,尽量占满一整行,这样该兄弟元素就会被浮动元素覆盖
若浮动元素的块状兄弟元素为BFC,则不会占满一整行,而是根据浮动元素的宽度,占据该行剩下的宽度,避免与浮动元素重叠。
*浮动元素与其块状BFC兄弟元素之间的margin可以生效,这将继续减少兄弟元素的宽度

<div class="box">
    <div class="left"></div>
    <div class="right"></div>
</div>
.left{
    float: left;
    width: 100px;
    margin-right: 20px; //形成 20px 的间隔
}
.right{
    overflow: hidden; //通过设置overflow: hidden来触发BFC特性
}
  • table 布局

    <div class="box">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    .box{
        display: table;
        width: 100%;
        table-layout: fixed;
    }
    .left, .right{
        display: table-cell;
    }
    .left{
        width: 100px;
        padding-right: 20px;
    }
  • flex

    <div class="box">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    .parent{
        display: flex;
    }
    .left{
        margin-right: 20px;
    }
    .right{
        flex: 1;
    }

PART THREE -- JS

1、JS的基本类型有哪些?引用类型有哪些?null 和 undefined 的区别。


JS基本类型:null,undefined,boolean,number,string,symbol。
引用类型:Object
undefined:定义了但是没有赋初始值
null:未定义的对象

2、引用类型和基本类型有什么区别?哪个是存在堆哪一个是存在栈上面的?


基本数据类型
  • 基本数据类型的值是不可变的
  • 基本数据类型不可以添加属性和方法
  • 基本数据类型的赋值是简单赋值
  • 基本数据类型的比较是值的比较
  • 基本数据类型是存放在栈区的
引用类型
  • 引用类型的值是可以改变的
  • 引用类型可以添加属性和方法
  • 引用类型的赋值是对象引用
  • 引用类型的比较是引用的比较
  • 引用类型是同时保存在栈区和堆区中的

3、new 一个对象具体做了什么?


新生成一个对象 -> 链接到原型 -> 绑定 this -> 返回新对象

4、箭头函数和普通函数有什么区别?


  • 箭头函数不能作为构造函数,不能使用 new
  • 箭头函数只能作为匿名函数使用
  • 箭头函数中的 this 会捕获其上下文的 this 值
  • 箭头函数不绑定 arguments, 取而代之用 rest 参数(...)解决
  • 箭头函数当方法使用的时候没有定义 this 绑定
  • 箭头函数不能当作 Generator 函数,不能使用 yield 关键字
  • 箭头函数不能返回对象字面量
  • 箭头函数不能换行clipboard.png
  • 普通函数每个都有其自己的 this 值,构造函数的 this 指向一个新的对象;严格模式下的函数的 this 指向 undefined;如果函数是作为对象的方法被调用的,则 this 指向了那个调用它的对象

5、对闭包的的理解


以前写的关于闭包的一篇文章

6、property 和 attribute 的区别


Property 是 DOM 中的属性,是 JavaScript 里的对象;
Attribute 是 HTML 标签上的特性,它的值只能够是字符串。

7、setTimeout和promise的执行顺序


看题:

setTimeout(function() {
   console.log(1)
}, 0);

new Promise(function(resolve, reject) {
  console.log(2)
  for (var i = 0; i < 10000; i++) {
    if(i === 10) {console.log(10)}
       i == 9999 && resolve();
  }
   console.log(3)
}).then(function() {
   console.log(4)
})

console.log(5);

以上代码的输出结果为:2 10 3 5 4 1

setTimeout(fn, 0) 表示立即执行,也就是用来改变任务的执行顺序,要求浏览器“尽可能快”的进行回调;Promise 新建后立即执行,Promise 构造函数里的代码是同步执行的;then 方法指向的回调将在当前脚本所有同步任务执行完后执行
then 比 setTimeout 执行要早,是因为其实 setTimeout 又一个最小执行时间(minimun delay)为 4ms,并不是 0s 执行。
参考文章

未完待续...


Evelyn
258 声望12 粉丝

一只野生媛媛