[TOC] # 2019/01/02 #### 1.**let/const/var的区别** * var：声明全局变量，换句话理解就是，声明在for循环中的变量，跳出for循环同样可以使用。 ~~~ for(var i=0;i<=1000;i++){ var sum=0; sum+=i; } alert(sum); ~~~ 声明在for循环内部的sum，跳出for循环一样可以使用，不会报错正常弹出结果 * let：声明块级变量，即局部变量。 在上面的例子中，跳出for循环，再使用sum变量就会报错 注意：必须声明'use strict'后才能使用let声明变量否则浏览并不能显示结果 * const：用于声明常量，也具有块级作用域 const PI=3.14; #### 2.**url到展示页面发生了什么** 1. DNS解析 2. 建立TCP连接（3次握手） 3. 发送HTTP请求，从服务器下载相关内容 4. 浏览器构建DOM树和CSS树，然后生成渲染树。这个一个渐进式过程，引擎会力求最快将内容呈现给用户。 5. 在第四步的过程中，`<script>`的位置和加载方式会影响响应速度。 6. 搞定了，关闭TCP连接（4次握手） #### 3.**用CSS怎么做出一个三角形** ~~~ 把上、左、右三条边隐藏掉（颜色设为 transparent） #demo { width: 0; height: 0; border-width: 20px; border-style: solid; border-color: transparent transparent red transparent; } ~~~ #### 4.**document.wirte和innerHTML的区别** 主要区别： * document.write是直接将内容写入页面的内容流，会导致页面全部重绘 * innerHTML将内容写入某个DOM节点，不会导致页面全部重绘 #### 5.**栅格系统的原理** 实现原理： 1. 把网页总宽度平分为12分，开发人员可以自由按分组合，以便开发出简洁方便的程序 2. 仅仅通过定义容器大小、平分12分，再调整内外边距，最后结合媒体查询，就制作出强大的响应式栅格系统 3. 栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。 工作原理： 1. “行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。 2. 通过“行（row）”在水平方向创建一组“列（column）”。 3. 你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。 4. 类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。 5. 通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。 6. 负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。 7. 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。 8. 如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。 #### 6.**position的值relative和absolute的定位原点是？** * absolute：生成绝对定位的元素，定位原点是离自己这一级元素最近的一级position设置为absolute或者relative的父元素的左上角为原点的。 * relative：生成相对定位的元素，定位原点是元素本身所在位置。 **拓展：** * fixed （老IE不支持）：生成绝对定位的元素，相对于浏览器窗口进行定位。 * static：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right z-index 声明）。 * inherit：规定从父元素继承 position 属性的值。 已连接 1个文件被修改 面试日志记录.md