前端跳槽面试总结之页面布局、CSS盒模型、DOM 事件 和 HTTP 协议类

最新推荐文章于 2021-06-22 21:52:23 发布
最新推荐文章于 2021-06-22 21:52:23 发布
阅读量187 收藏
点赞数
分类专栏： Javascript 文章标签： 前端跳槽面试总结 页面布局 CSS盒模型 DOM 事件 HTTP 协议类
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42614080/article/details/106742730
版权
一、页面布局
  1. 题目：假设高度已知，请写出三栏布局，其中左栏、右栏宽度各位 300px，中间自适应。
  2. 对于这个页面布局，有五种写法，浮动布局、绝对布局、flexbox 布局、表格布局和网格布局，如下所示：
  • 浮动布局，代码如下：
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Layout</title>
    <style media="screen">
      html *{
        padding: 0;
        margin: 0;
      }
      .layout article div{
        min-height: 100px;
      }
    </style>
  </head>
  <body>
    <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.这是三栏布局的浮动布局
          3.这是三栏布局的浮动布局
        </div>
      </article>
    </section>
  </body>
</html>
  • 绝对布局，代码如下：
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Layout</title>
    <style media="screen">
      html *{
        padding: 0;
        margin: 0;
      }
      .layout article div{
        min-height: 100px;
      }
    </style>
  </head>
  <body>
    <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.这是三栏布局的绝对布局
          3.这是三栏布局的绝对布局
        </div>
        <div class="right"></div>
      </article>
    </section>

  </body>
</html>
  • flexbox 布局，代码如下：
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Layout</title>
    <style media="screen">
      html *{
        padding: 0;
        margin: 0;
      }
      .layout article div{
        min-height: 100px;
      }
    </style>
  </head>
  <body>
    <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.这是三栏布局的 flexbox 布局
          2.这是三栏布局的 flexbox 布局
          3.这是三栏布局的 flexbox 布局
        </div>
        <div class="right"></div>
      </article>
    </section>

  </body>
</html>
  • 表格布局，代码如下：
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Layout</title>
    <style media="screen">
      html *{
        padding: 0;
        margin: 0;
      }
      .layout article div{
        min-height: 100px;
      }
    </style>
  </head>
  <body>
    <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.这是三栏布局的表格布局
          3.这是三栏布局的表格布局
        </div>
        <div class="right"></div>
      </article>
    </section>

  </body>
</html>
  • 网格布局，代码如下：
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Layout</title>
    <style media="screen">
      html *{
        padding: 0;
        margin: 0;
      }
      .layout article div{
        min-height: 100px;
      }
    </style>
  </head>
  <body>
    <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.这是三栏布局的网格布局
          3.这是三栏布局的网格布局
        </div>
        <div class="right"></div>
      </article>
    </section>

  </body>
</html>
  1. 对于这五种方案，优缺点的比较，如下所示：
  • float，比较好的兼容性需要清除浮动，处理好与周边元素的关系
  • absolute，方便快捷，布局脱离文档流，导致方案的可使用性较差
  • flex 布局，解决上述两个的缺点，移动端使用 flex 更多，ie8 不支持
  • table-ceil 布局，兼容性好，对 SEO 不够友好，每一个部分可以理解为单元格，当其中的一个表格高度变高，其他的两个表格也会变高
  • grid 布局，代码量简洁，新技术
  1. 如果中间高度不固定，这五种方案会有什么样的情况，如下所示：
  • float不能用，中间的内容被左侧挡住，因为撑开高度以后，左侧没有了遮挡物，就会流向左侧。
    解决方案：创建 BFC
  • absolute 不能用
  • flex 可以使用
  • table-ceil 可以使用
  • grid 不能用
  1. 对于页面布局的小结，语义化掌握到位，页面布局理解深刻，CSS 基础知识扎实、思维灵活且积极上进、代码书写规范。
  2. 对于页面布局的变通，如下所示：
  • 三栏布局，左右宽度高度固定及中间自适应、上下宽度固定及中间自适应
  • 两栏布局，左宽度固定及右自适应、右宽度固定及左自适应、上高度固定及下自适应、下高度固定及上自适应
二、CSS 盒模型
  1. 题目: 谈谈你对 CSS 盒模型的认识。
  2. 对于盒模型的这道题，可以从基本概念：标准模型 + IE 模型、标准模型和 IE 模型区别、CSS 如何设置者两种模型、JS 如何设置获取盒模型对应的宽和高、根据盒模型接收解释边距重叠、BFC 边距重叠解决方案这几个方面去考虑和回答。
  3. 对于盒模型的基本概念，文档中每个元素都会被描述为一个矩形盒子，盒子有一个边界，分别为 margin edge，border edge，padding edge，content edge。盒子模型分为标准盒子模型和 IE 盒子模型。
  4. 对于标准模型，它的宽度是内容 content 的宽度，不包括 border 和 padding 的宽度，也就是说 width = content。而对于 IE 模型，它的宽度是内容 content 的宽度、内边距 padding 和 边框 border 的宽度之和，也就是说 width = content + border + padding。
  5. 对于 CSS 如何设置者两种模型，有 box-sizing 这个属性。当 box-sizing 属性值为 content-box 的时候，说明就是标准模型。当 box-sizing 属性值为 border-box 的时候，说明就是 IE 模型。浏览器默认是标准模型。
  6. 对于 JS 如何设置获取盒模型对应的宽和高，有以下四种方式：
  • dom.style.width/height
  • dom.currentStyle.width/height //渲染之后的宽高 只IE支持
  • window.getComputedStyle(dom).width/height //所有浏览器支持 渲染之后的宽高
  • dom.getBoundingClientRect().width/height //计算元素的绝对位置，根据viewport左上角确定，会得到left top width height
  1. 根据盒模型接收解释边距重叠，存在几种情况。父子元素边距重叠、兄弟元素边距重叠和空元素边距重叠，代码如下所示：
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS盒模型</title>
    <style media="screen">
      html *{
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
      <section class="box" id="sec">
        <style media="screen">
          #sec{
            background: #f00;
          }
          .child{
            height: 100px;
            margin-top: 10px;
            background: yellow
          }
        </style>
        <article class="child"></article>
      </section>
  </body>
</html>
  1. BFC，边距重叠解决方案，也是块级格式化上下文。对于 BFC 的原理，如下所示：
  • BFC 元素垂直方向的边距发生重叠
  • BFC 的区域不会与浮动元素的box 重叠
  • BFC 是页面上一个独立的容器，内外的元素不会相互影响
  • 计算 BFC 的高度时，浮动元素也参与计算
  1. 创建 BFC，如下所示：
  • float 值不为 none
  • position 为 absolute 或 fixed
  • display 为 inline-block，table-cell，table-caption，flex；
  • overflow 不为 visible
  1. 对应 BFC 解决边距重叠的代码，如下所示：
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS盒模型</title>
    <style media="screen">
      html *{
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
      
      <!-- BFC垂直方向边距重叠 -->

      <section id="margin">
        <style>
          #margin{
            background: pink;
            overflow: hidden;
          }
          #margin>p{
            margin: 5px auto 25px;
            background: red;
          }
        </style>
        <p>1</p>
        <div style="overflow:hidden">
          <p>2</p>
        </div>
        <p>3</p>
      </section>

      <!-- BFC不与float重叠 -->
      <section id="layout">
        <style media="screen">
          #layout{
            background: red;
          }
          #layout .left{
            float: left;
            width: 100px;
            height: 100px;
            background: pink;
          }
          #layout .right{
            height: 110px;
            background: #ccc;
            overflow: auto;
          }
        </style>
        <div class="left"></div>
        <div class="right"></div>
      </section>

      <!-- BFC子元素即使是float也会参与计算 -->
      <section id="float">
        <style media="screen">
          #float{
            background: red;
            overflow: auto;
            /*float: left;*/
          }
          #float .float{
            float: left;
            font-size: 30px;
          }
        </style>
        <div class="float">我是浮动元素</div>
      </section>

  </body>
</html>
三、DOM 事件
  1. 对于 DOM 事件类，分为基本概念：DOM 事件的级别、DOM 事件模型、DOM 事件流、描述 DOM 事件捕获的具体流程、Event 对象的常见应用和自定义事件等等。
  2. 对于 DOM 事件的级别，如下所示：
  • DOM0 element.οnclick=function(){}
  • DOM2 element.addEventListener(‘click’,function(){},fasle);
  • DOM3 element.addEventListener(‘keyup’,function(){},false)
  1. 对于 DOM 事件模型，分为捕获和冒泡这两种。捕获是从上到下，冒泡是从下到上。
  2. 对于 DOM 事件流，分为三个阶段，如下所示：
  • 第一阶段：捕获
  • 第二阶段：目标阶段
  • 第三阶段：冒泡 从目标元素上传到 window 对象
  1. 对于描述 DOM 事件捕获的具体流程，window–>document–>html(document.documentElement)–> body–>…–>目标元素。
  2. 对于 Event 对象的常见应用，如下所示：
  • e.target //当前被点击的元素
  • e.preventDefault()
  • e.currentTarget //代理中的父元素
  • e.stopPropagation()
  • e.stopImmediatePropagation() //按钮绑定了两个click事件A、B，希望点击A之后加上这句话，就可以阻止B的执行。
  1. 对于自定义事件，也称为模拟事件，如下所示：
var eve=new Event(‘custome’);
ev.addEventListener(‘custome’,function(){console.log(‘custom’); })
ev.dispatchEvent(eve);
  1. 对于 DOM 事件的代码，如下所示：
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Event</title>
  </head>
  <body>
      <div id="ev">
        <style media="screen">
          #ev{
            width: 300px;
            height: 100px;
            background: red;
            color: #fff;
            text-align: center;
            line-height: 100px;
          }
        </style>
        目标元素
      </div>
      <script type="text/javascript">
        var ev = document.getElementById('ev');

        ev.addEventListener('click', function (e) {
            console.log('ev captrue');
        }, true);

        window.addEventListener('click', function (e) {
            console.log('window captrue');
        }, true);

        document.addEventListener('click', function (e) {
            console.log('document captrue');
        }, true);

        document.documentElement.addEventListener('click', function (e) {
            console.log('html captrue');
        }, true);

        document.body.addEventListener('click', function (e) {
            console.log('body captrue');
        }, true);

        var eve = new Event('test');
        ev.addEventListener('test', function () {
            console.log('test dispatch');
        });
        setTimeout(function () {
            ev.dispatchEvent(eve);
        }, 1000);
      </script>
  </body>
</html>
四、HTTP 协议类
  1. 对于 HTTP 协议类，分为 HTTP 协议的主要特点、HTTP 报文的组成部分、HTTP 方法、POST 和GET 的区别、HTTP 状态码、持久连接和管线化。
  2. 对于 HTTP 协议的主要特点，如下所示：
  • 简单快速
  • 灵活
  • 无连接，链接一次就会断掉，不会持久链接
  • 无状态
  1. 对于 HTTP 报文的组成部分，分为请求报文和响应报文，如下所示：
  • 请求报文，包括请求行（http方法、页面地址、http协议及版本）、请求头（告诉服务端我要什么内容）、空行和请求体
  • 响应报文，包括状态行、响应头、空行和响应体
  1. 对于 HTTP 方法，前五个必须记住，如下所示：
  • GET ——>获取资源
  • POST ——>传输资源
  • PUT ——>更新资源
  • DELETE ——>删除资源
  • HEAD ——>获得报文首部
  • OPTIONS ——>询问支持的方法
  • TRACE ——>追踪路径
  • CONNECT ——>要求用隧道协议连接代理
  1. 对于 POST 和 GET 的区别，如下所示：
  • GET 在浏览器回退是无害的，而 POST 请求会再次提交请求
  • GET 产生的 URL 地址可以被收藏，而 POST 不可以
  • GET 请求会被浏览器主动缓存，而 POST 不会，除非手动设置
  • GET 请求只能进行 URL 编码，而 POST 支持多种编码方式
  • GET 请求参数会被完整保留在浏览器历史记录里，而 POST 中的参数不会被保留
  • GET 请求在 URL 中传送的参数是有长度限制的，而 POST 没有限制
  • 对参数的数据类型，GET只接受 ASCII 字符，而 POST没有限制
  • GET比 POST 更不安全，因为传递的参数直接暴露在 URL 上，所以不能用来传递敏感信息
  • GET 参数通过 URL 传递，POST 放在 Request Body中
  1. 对于 HTTP 状态码，如下所示：
  • 1xx:指示信息——表示请求已接收，继续处理
  • 2xx:成功——表示请求已被成功接收
  • 3xx:重定向——要完成请求必须进行更进一步的操作
  • 4xx:客户端错误——请求有语法错误或请求无法实现
  • 5xx:服务器错误——服务器未能实现合法的请求
  1. 对于具体的 HTTP 状态码，如下所示：
  • 200 OK：客户端请求成功
  • 206 partial Content:客户发送了一个带有 Range 头的 GET 请求，服务器完成了它
  • 301 Moved Permanently:所请求的页面已经转移至新的 URL
  • 302 Fonud:所请求的页面已经临时转移至新的 url
  • 304 Not Modified：客户端有缓存的文档并发出了一个条件性的请求，服务器告诉客户，原来缓冲的文档还可以继续使用
  • 400 Bad Request：客户端请求有语法错误，不能被服务器所理解
  • 401 Unauthoried：请求未经授权，这个状态码必须和 WWW-Authenticate 报头域一起使用
  • 403 Forbidden：对被请求页面的访问禁止
  • 404 Not Found：请求的资源不存在
  • 500 Internal Server Error：服务器发生不可预期的错误原来缓存的文档还可以继续使用
  • 503 Server Unavailable：请求未完成，服务器临时过载或当机，一段时间后可能恢复正常。
  1. 对于持久连接，如下所示：
  • HTTP 协议采用的是“请求-应答模式”，当使用普通模式，即非 Keep-Alive 模式时，每个请求/应答客户和服务器都要新建一个连接，完成之后立即断开连接（HTTP协议为无连接的协议）
  • 当使用 Keep-Alive 模式（又称持久链接、连接重用）时，Keep-Alive 功能使客户端到服务器端的连接有效，当出现对服务器的后继请求时，Keep-Alive 功能避免了建立或者重新建立连接
  1. 对于管线化，如下所示：
  • 在使用持久链接的情况下，某个连接上消息的传递类似于， 请求1->响应1->请求2->响应2->请求3->响应3，整个连接一直没有断开的
  • 某个连接上的消息变成了类似这样，请求1->请求2->请求3->响应1->响应2->响应3
  1. 对于管线化的具体理解，如下所示：
  • 管线化机制通过持久连接完成，仅 HTTP/1.1 支持此技术
  • 只有 GET和 Head 请求可以管线化，而 POST 则有所限制
  • 初次创建连接时不应启动管线机制，因为对方（服务器）不一定支 HTTP/1.1 版本的协议
  • HTTP/1.1 要求服务器端支持管线化，但并不要求服务器端也对响应进行管线化处理，只是要求对于管线化的请求不失败即可
  • 由于上面提到的服务器端问题，开启管线化很可能并不会带来大幅度的性能提升，而很多服务器端和代理程序对管线化的支持并不好。因此现代浏览器如 Chrome 和 Firefox 默认并未开启管线化支持
  • 管线化不会影响响应到来的顺序，如上面的例子所示，响应返回的顺序并未改变
城南花开ze
关注
专栏目录
页面布局
weixin_48846877的博客
08-11 143
一、移动端页面的布局 1.流式布局 2.flex弹性布局 3.less+rem+媒体查询布局 4.混合布局 5.响应式布局 一、流式布局 流式布局容器：宽度百分百，适合于单独做移动端开发 二、flex弹性布局 flex弹性布局：任何一个容器都可以指定为flex布局，当父盒子为flex布局以后，子元素的float、clear和vertical-align属性将失效 布局原理：通过给父盒子添加flex属性，来控制子盒子的位置和排列方式 flex布局父元素常见属性： flex-direction 设置主轴的方向
常见的几种页面内容布局方式
wang839305939的博客
07-27 6万+
常见的页面布局，左右自适应布局
HTTP格式布局
weixin_33841722的博客
03-23 88
position: 1、fixed——position:fixed; /*固定显示，一直悬着，不随着滚动条更换位置 */ 2、absolute——position:absolute; /*根据显示窗口的第一显示界面进行定位 ，直接定死在页面上，跟着滚动条更换位置 3、relative——position:relative;/*相对的定位，相对的是上一句代码，使用relati时要先看上一句代...
学习移动端页面布局尺寸样式
_小郑有点困了的博客
03-22 710
移动端页面布局样式 整体，外部section，width：100%；height：100%；margin：0 auto；display：flex； 1，header，给定高度。display：flex；没给宽度 1.1 左边，给定高度和父元素一样，宽度100%，因为右边有东西占15%，所以给100%也没事 1.2，右边 2，最外层大盒子，宽高100%,overflow-X:hidden;o...
HTTP 结构详解
qq_40193787的博客
09-18 6万+
HTTP-报文结构 HTTP是Hyper Text Transfer Protocol（超文本传输协议）的缩写。 默认HTTP的端口号为80，HTTPS的端口号为443。 HTTP协议是一个无状态的协议，同一个客户端的这次请求和上次请求是没有对应关系。 1、请求报文 一个HTTP请求由请求行、请求头、空行和请求数据4个部分组成。 1.1 请求行 由三部分组成，请求方法、请求URL（不包括域名）、HTTP协议版本。 1.1.1 请求方法 GET：传递参数长度受限制，因为传递的参...
前端跳槽面试必备技巧-笔记
wuzhaoqing325的博客
03-05 743
面试准备 分析职位要求等 一面/二面 面试技巧  准备要充分（基础知识）  知识要系统（前端知识碎）  沟通要简洁（理论知识 一语中的）  内心要诚实（不会可以请教面试官）  态度要谦虚（不要嘚瑟）  回答要灵活（不要把话说满 掌握多少就说多少） 面试模拟 页面布局 解决方案: 浮动 绝对定位 Flexbox 表格布局 网格布局 延伸： 这五种方案各自有什么优点和缺点？ 假设...
2021最新最全前端面试题（包含HTML、CSS、JavaScript、Vue、React、浏览器、算法与数据结构等）
datian45678的博客
06-22 1628
整理了一些前端面试题，希望对正在找前端工作的伙伴有用。本篇文章内容篇幅较大，主要针对初中级前端开发工程师。 篇幅过长，大家可以先点赞收藏以后慢慢看。 关于HTML 的title和alt属性有什么区别 alt：图片加载失败时，显示在网页上的替代文字 title：鼠标（手机端该属性无意义）放在图片上时显示的文字 alt是必需属性（但属性值可为空），title非必需 图片懒加载的原理 图像是img标记，浏览器根据图像的src属性请求图像，因此惰性加载的关键是当图像不在可视区域时，不给`imgs‘赋值。 懒加载
做了3年测试，靠着这份面试题和答案，我成功跳槽字节跳动拿到了前端offer
pig_html的博客
03-23 1万+
个人经历 给大家一个参考，计算机信息工程专业，大学学过前端，毕业后阴差阳错在小公司做了三年测试后，意外地拿到了字节跳动前端的offer，成功跳槽到了字节跳动事业部。 字节跳动面试对基础比较看重，然后需要你有两三个比较好的项目，一面重视面试者对前端基础的把握，还要手写代码，不过不难。 二面部门的leader面，这一面比较难，面试官会对你的项目细节进行深挖，所以说项目要牛逼一点，最后还会有一道逻辑题（侥幸），三面是还是技术面，最后是HR面，如果你想进大公司的话，下面这些技术是肯定要掌握的：html5，css3，
一年前端近期面试总结
qq_38974956的博客
12-03 652
目录 一、关于js的 1、数组的常用方法以及迭代方法，对于push、pop可能会问到返回值 2、js如何减少操作DOM 3、post和get的区别，ajax请求超时如何处理 4、es6新增了哪些特性，你常用哪些 5、对promise的理解 6、js 的eventloop 7、关于js基本类型和引用类型的存储方式 8、关于原型和原型链，原型链最终指向的是什么（null） 9、箭头函数的特点，let和const，var的区别 10、对于如下两次函数调用,参数 test 函数的函数体内 a,
CSS-标准盒模型 & 怪异盒模型
PT - Blog
04-29 3万+
CSS-标准盒模型 & 怪异盒模型
HTML的五种经典布局方式（一）
小陈同学の博客
04-16 8343
一、浮动布局（float布局）（流动布局） 使用浮动来完成左中右三栏布局 float:left----左浮动 float:right----右浮动 tip：使用float浮动时，margin:0 auto;使块元素居中将会失效 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"...
如何理解DOM和css样式的关系
just__code的博客
04-01 622
文章目录DOM元素在添加position:absolute后，属性发生了什么变化 DOM元素在添加position:absolute后，属性发生了什么变化
事件捕获（快速理解）
bxz0729的博客
11-23 6773
先看一个例子 点击box2结果如下： 是不是很疑惑，自己明明点击的是box2，打印的数据却是“点击box1 点击box2”？？？？其实这就是事件捕获。 事件捕获 从最不具体的元素到最具体的元素（由外向内） 在捕获的过程中，最外层（根）元素的事件先被触发，然后依次向内执行，直到触发最里面的元素（事件源） 事件监听：addEventListener('事件', function(){ }, flase/true)； 用于监听某个事件，当监听到这个事件时去执行某个方法 addEvent..
cookie、sessionStorage和localStorage的区别
热门推荐
浮生离梦的博客
05-30 8万+
一、 概念的理解 webstorage本地存储 1）webstorage是本地存储，存储在客户端，包括localStorage和sessionStorage 2）localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信 3）ses...
对于js的原型和原型链的理解
浮生离梦的博客
06-23 4万+
一、原型与原型链 JavaScript是一门基于原型的语言，在软件设计模式中，有一种模式叫做原型模式，JavaScript正是利用这种模式而被创建出来 原型模式是用于创建重复的对象，同时又能保证性能，这种类型的设计模式属于创建型模式，它提供了一种创建对象的最佳方式。这种模式是实现了一个原型接口，该接口用于创建当前对象的克隆。原型模式的目的是用原型实例指定创建对象的种类，并且通过拷贝这些原型创建新...
对于js的async和await的理解分析
浮生离梦的博客
06-22 1万+
一、async和await async和await的概念 1）async 函数是 Generator 函数的语法糖，使用 关键字 async 来表示，在函数内部使用 await 来表示异步 2）ES7 提出的async 函数，终于让 JavaScript 对于异步操作有了终极解决方案 3）async 作为一个关键字放到函数的前面，用于表示函数是一个异步函数，该函数的执行不会阻塞后面代码的执...
前后端分离开发的理解以及和前后端不分离的区别
浮生离梦的博客
03-21 1万+
一、前后端分离的概念 前后端分离 前后端分离是一种架构模式，说通俗点就是后端项目里面看不到页面（JSP | HTML），后端给前端提供接口，前端调用后端提供的 REST 风格接口就行，前端专注写页面（html|jsp）和渲染（JS|CSS|各种前端框架）；后端专注写代码就行。 前后端分离的核心：后台提供数据，前端负责显示 软件架构模式 最熟悉MVC设计模式，Model—View-C...
解决VScode导致CPU过高、卡顿
浮生离梦的博客
08-09 1万+
在运行VScode的时候，会导致CPU过高，造成运行时候的卡顿，CPU飙升到100% 解决办法 在文件 -> 首选项 -> 设置 中， 将 search.followSymlinks 设置为false，进行关闭就可以了，因为在使用VScode的时候会有很多的搜索操作，造成卡顿 图示说明： ...
2024前端面试必备：CSS, JS, Vue2, Vue3, Webpack知识详解
“2024前端面试八股文是一篇综合性的前端面试指南，涵盖了CSS、JavaScript、Vue2、Vue3以及Webpack的相关知识，旨在帮助有一定前端基础，正在找工作或准备跳槽的开发者进行面试准备。” 在前端开发领域，面试准备至...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值