盒子模型标准盒模型怪异盒模型（IE盒子模型）box-sizing属性标准盒模型width表示范围只有content怪异盒模型（IE盒子模型）width表示content+padding+border这三个部分的宽度box-sizing属性在CSS3中引入了box-sizing属性，允许以特定的方式定义匹配某个区域的特定元素，即该属性可以指定盒子模型种类共有三种值：content-box：表示标准的盒子模型border-box：表示的是IE盒子模型padding-box：让宽度

HTTP请求流程HTTP协议HTTP和TCP关系HTTP请求过程浏览器端发起HTTP请求流程服务器处理HTTP请求流程浏览器缓存流程重定向HTTP协议应用层协议，HTTP协议建立在TCP连接之上。HTTP是一种允许浏览器向服务器获取资源的协议，是Web的基础，也是浏览器使用最广的协议HTTP和TCP关系浏览器使用HTTP协议作为应用层协议用来封装请求的文本信息，使用TCP/IP将它发到网络上。HTTP的内容是通过TCP的传输数据阶段来实现的HTTP请求过程浏览器端发起HTTP请求流程

TCP协议TCP协议IP协议数据包的传输过程完整的TCP连接过程TCP协议是一种面向连接的、可靠的、基于字节流的传输层通信协议，把数据完整地送达应用程序TCP特点对于数据包丢失的情况，TCP提供重传机制TCP引入了数据包排序机制，用来保证把乱序的数据包组合成一个完整的文件序列号TCP头除了包含端口号，还提供了用于排序的序列号，以便接收端通过序号来重排数据包IP协议是TCP/IP体系中的网络层协议，负责把数据包送达目的主机互联网上不同的在线设备都有唯一的地址，计算机的地址就称

JavaScript的数据存储JS语言类型JS数据类型内存空间内存空间种类堆空间和栈空间JS语言类型JavaScript是动态语言以及弱类型语言静态类型与动态类型静态语言：在使用前需要确认其变量数据类型动态语言：在运行过程中需要检查数据类型强类型与弱类型强类型：不支持隐式类型转换弱类型：支持隐式类型转换JS数据类型一共8种BooleanNullUndefinedNumberBigInt：可以用任意精度表示整数，即使超出Number的安全整数范围限制也可以安

浏览器从输入URL到页面展示过程1.用户输入2.URL请求过程3.准备渲染进程4.提交文档5.渲染阶段1.用户输入浏览器的地址栏会判断用户输入的关键字是搜索内容还是URL，如果输入内容符合URL规则，地址栏会根据规则把这段内容加上协议合成完整URL浏览器加载地址时需要等待提交文档阶段页面内容才会被替换2.URL请求过程浏览器进程通过进程间通信把URL请求发送至网络进程，网络进程接收到后发起真正URL请求流程：首先查找本地缓存是否缓存了该资源。如果有缓存资源则直接返回；如果没有则进行DNS

浏览器页面渲染流程渲染模块渲染流水线1.构建DOM树2.样式计算3.布局阶段4.分层5.图层绘制6.分块7.光栅化8.合成和显示相关概念重排重绘直接合成渲染模块HTML、CSS、JS数据通过渲染模块的处理最终输出为屏幕上的像素渲染流水线渲染模块被划分为很多子阶段，输入的数据通过这些子阶段最后输出像素，这样的一个处理流程叫做渲染流水线注意：每个子阶段都有其输入内容、处理过程和输出内容1.构建DOM树因为浏览器无法直接理解和使用HTML，所以需要将HTML转换为浏览器能够理解的DOM树结构

CSS清除浮动浮动问题解决方法方法1方法2方法3方法4浮动问题给一个盒子使用CSS的flloat浮动属性，导致其父元素盒子高度坍塌，不能被撑开<div class="parent"> <div class="son"></div> <div class="son"></div></div> <style type="text/css"> .parent{ border: red solid

CSS图片宽高比自适应<div class="box"> <div class="img-wrapper"> <img src="bear.jpg" class="image"> </div></div> <style type="text/css"> .box{ width: 330px; } .img-wrapper{ overflow: hidden; width: 100%;

CSS实现绘制三角形原理实心三角形等腰非直角等腰直角有边框的三角形空心三角形原理三角形可以通过调整盒子的边框border属性的四个方向的宽度、线条样式以及颜色来实现将盒子的边框调到足够宽就会发现，盒模型的边框是4条像梯形一样的线<div class="test"></div><style type="text/css"> .test{ background-color: red; width: 100px; height: 100px; b

CSS flex弹性布局设置弹性布局基本概念容器属性项目的属性设置弹性布局弹性布局用来为盒状模型提供最大的灵活性.box{ display: flex;}/*行内元素使用 Flex 布局*/.box{ display: inline-flex;}/*Webkit 内核的浏览器必须加上-webkit前缀*/.box{ display: -webkit-flex; /* Safari */ display: flex;}注意：设为 Flex 布局后，子元素的floa

CSS实现元素居中水平居中行内元素块级元素多块级元素垂直居中单行行内元素多行元素块级元素水平垂直居中固定宽高未知宽高flex布局 水平居中行内元素块级元素多块级元素 垂直居中单行行内元素多行元素块级元素固定宽高未知宽高 水平垂直居中固定宽高未知宽高flex布局 参考：https://www.cnblogs.com/ghq120/p/10939835.html...

二叉树基本概念基本术语二叉树类型性质遍历代码实现(js)前序遍历中序遍历后序遍历层序遍历二叉搜索树镜像二叉树重建二叉树其他常见算法题求二叉树深度二叉树结点总数判断二叉树子结构将二叉搜索树转换成一个排序的双向链表 基本概念二叉树是n个有限元素的集合，该集合或者为空、或由一个称为根（root）的元素及两个不相交的、被分别称为左子树和右子树的二叉树组成基本术语结点之间的关系若一个结点有子树，那么该结点称为子树根的双亲，子树的根称为该结点的孩子有相同双亲的结点互为兄弟一个结点的所有子树上的任何

冒泡排序算法算法描述代码实现(js)优化 算法描述原理：比较相邻的两个元素，将小的数据放前面，大的数据放后面第一趟，首先比较第1个和第2个元素，小数在前大数在后，再比较第2个和第3个数，以此类推将最大的数滚动到最后一个位置第二趟同理，将次大的数滚动到倒数第二个位置… 第n-1趟完成排序 代码实现(js)平均时间复杂度：O(n^2)空间复杂度：O(1) (用于交换)function BubbleSort(arr){ var len = arr.length;

JavaScript的this用法什么是this不同使用场合纯粹的函数调用作为对象方法的调用作为构造函数调用apply、call和bind方法调用ES6箭头函数什么是thisthis是 JavaScript 语言的一个关键字，它是函数运行时，在函数体内部自动生成的一个对象，即函数运行时所在的环境对象，只能在函数体内部使用不同使用场合函数的不同使用场合，this有不同的值纯粹的函数调用属于全局性调用，因此this就代表全局对象var x = 1;function test() {

JavaScript执行上下文和作用域作用域与执行环境创建执行上下文的条件两者区别JS代码的执行流程变量提升变量对象作用域链函数的创建与调用执行上下文栈块级作用域块级作用域的实现闭包闭包的回收作用域与执行环境执行环境与作用域不是同一种东西！作用域作用域是指在程序中定义变量的区域，决定了变量的生命周期，是一套存储规则。作用域就是变量与函数的可访问范围，即作用域控制着变量和函数的可见性和生命周期全局作用域其中的对象在代码中任何地方都能访问，其生命周期伴随着页面的生命周期函数作用域在函数内部

js零碎知识点基本概念数据类型操作符变量引用类型对象Object数组Array基本概念js组成ECMAScriptDOM文档对象模型BOM浏览器对象模型ECMAScript与JavaScript关系ECMAScript 是 JavaScript 的规范，JavaScript 实现了 ECMAScript数据类型5+1种：5种简单数据类型：Undefined、Null、Boolean、Number、String；1种复杂数据类型：Object检测数据类型instanceo

二分查找法及其边界查找概述思路代码(js)局限性寻找左侧边界的二分查找寻找右侧边界的二分查找概述二分查找法又称为折半查找，适合对已排序好的数据集合进行查找，时间复杂度为O(log2n)思路假设一个有序数据集合，找出其最中间的元素，以中间元素为界将集合划分为左右两个子集将中间元素与目标元素进行比较，如果相等则是找到直接返回，如果大于/小于中间元素，否则到右子集中去找重复以上过程直到找到为止如果某一步数组为空，则是找不到目标元素，就返回-1代码(js)递归//升序数组的二分查找法

归并排序算法核心思想步骤代码(js)核心思想分治：将问题分成一些小的问题然后递归求解，治则将分的阶段得到的各答案"修补"在一起分把原数组划分成两个子数组治将两个有序数组合并成一个更大的有序数组步骤将数组平均分成两个子数组，再递归将子数组也分割成两个更小的子数组当数组中只有一个元素时可以视为有序数组，开始合并操作设置两个指针，i指向前一个数组的第一个元素，j指向后一个数组的第一个元素；设置一个数组temp用来存储排序后的数组比较arr[i]和arr[j]，谁更小就将谁存入tem

快速排序算法思路步骤代码(js)思路在数组中选一个基准数（通常为数组第一个）将数组中小于等于基准数的数移到基准数左边，大于基准数的移到右边对于基准数左、右两边的数组，不断重复以上两个过程，直到每个子集只有一个元素，即为全部有序步骤选取数组arr第一个数为基准数flag设置两个指针：i指向数组头部，j指向数组尾部；两个指针从数组的左右两边界向中间进行遍历先向左移动尾指针j ：当arr[j] > flag时，直接继续移动j；当arr[j] < flag时，令arr[i]

JAVA访问控制权限publicprotectedprivatedefault权限大小比较public公开，可以被所有其他类所访问protected保护，只有自己、子类及同一个包中的类可以访问注意：子类就算不在一个包下也可以访问private私有，只能被自己访问修改default一般省略，只有自己和同一个包内的类可以访问权限大小比较public > protected > default > private...