如何让一个div垂直水平居中：
-
css方法：
父盒子设置：display：table-cell; text-align:center; vertical-align:center;
div设置：display：inline-block; vertical-align:center;
-
使用css3的transform：
父盒子设置：display:relative;
div设置：transform:translate(-50%,-50%); position:absolute; top:50%; left:50%;
position的属性和作用
- **static:**默认的的定位，位于页面流给予的位置，一般不用；
- **relative:**相对定位，相对于原来的位置偏移，偏移的top，left，right，bottom都相对于原来的位置偏移，偏移后的元素在原本的位置仍占据空间；
- **absolute:**绝对定位，如果父盒子设置了position，那么就相对于父容器进行偏移，否则相对于body进行偏移；
- **fixed:**可以定位于相对于浏览器窗口的指定位置，一般用于导航栏的固定；
px,em,rem的区别
- **px：**像素，绝对单位，相对于计算机屏幕而言；
- **em:**相对长度单位，相对于当前文本的字体尺寸大小，当前文本没有设置大小就采用浏览器的默认文本大小，如果父级元素设置了大小，就会继承父级元素的大小；
- **rem:**相对长度大小，相对于html的根元素；
哪些元素会生成BFC（块级格式化上下文）
- 根元素；
- float不为none；
- position为absolute和fixed；
- display为inline-block、table-cell、flex、inline-flex；
- overflow不为visible；
css的引入方式有哪些：
- **link引入：**支持js改变样式，link是html的引入方式，页面加载时，link引入的css样式同时被加载；
- **@import引入：**不支持js改变样式，是css的引入方式，限制了引入的次数为31次，@import引入的方式会在界面全部下载完再被加载；
css的reset作用和用途
重置浏览器的css默认样式，还有一种统一浏览器之间的样式的是引入normalize.css
css 的splites如何使用
精灵图，将一些小图片放在一整张图片上一次性请求，减少对图片的请求次数；
清除浮动的方式
- 父级定义高度heigth；
- 结尾处加空标签：clear:both;
- 父级定义伪类：after和zoom；
- 父级div定义overflow：hidden；
- 双伪类元素法；
使用一套设计方案适应不同分辨率
- 响应式布局；
- 流式布局；
渐进增强和优雅降级的区别
- **渐进增强：**针对于低版本浏览器进行构建页面，保证最基本的功能，然后再针对于高版本浏览器进行效果交互的改进；
- **优雅降级：**一开始就针对于高版本浏览器进行页面构建，再做低版本浏览器的兼容；
合理界面的结构和表现分离，结构是啥，表现是啥
- 结构式html，表现是css
web语义化
- 就是让浏览器能够更好的读懂你的代码，尽可能的使用语义化标签
css的选择器与优先级
- !important > 行内样式 > id > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符
display：none和visbility：hidden的区别
- display：none；使用该属性后，html对象的宽度高度都会丢失；
- visbility：hidden；使用该属性后只是视觉上看不见，html对象所占据的空间依旧存在；
HTML和XHTML的区别
1.HTML是超文本标记语言；
- XHTML是基于XML的标记语言，XHTML的元素必须被正确嵌套，必须关闭，标签名必须是小写的，必须拥有根元素；
盒子模型：
- margin：外边距；
- border：边框；
- padding：内边距；
- content：内容；
什么是hack
1.针对于不同的浏览器写不同的css，code的过程就是hack
display：inline-block什么时候会有间隙
- 换行显示或者空格分隔的情况下会有间隙；
overflow有哪些属性值
- **visible:**默认值，内容不会被修剪，会呈现在边框外；
- **hidden:**内容会被修剪，并且其余内容是不可见的；
- **scroll:**内容会变修剪，浏览器呈现滚动条以便查看；
- **auto:**如果内容被修剪，那么就会呈现滚动条以便查看；
- **inherit:**规定从父元素继承overflow属性的值；
div+css网站布局的好处
- 表现和内容相分离；
- 提高搜索引擎对网页的索引效率；
- 提高页面浏览速度
- 易于维护和改版；
console 有哪些常用方法
- console.log
- console.info
- console.error
- console.warning
为什么利用多个域名存储网站资源
- CDN 缓存更方便；
- 突破浏览器并发限制
- 节约 cookie 带宽
- 优化响应速度；
- 防止不必要的安全问题
网页的重绘、重排和重构
- 重绘一般指网页的外观发生变化，如背景色；重构一般是网页的结构发生变化，渲染树需要重新计算；重构一般在做移动端自适应或者将表格布局改为div + css布局时用到；
rgba和opacity透明效果的区别
- rgba只作用于元素的颜色和背景颜色，而opacity作用域元素以及元素的内容
sass和less
- sass是css的预处理器，支持变量，循环，运算和函数；使得代码结构更加清晰，便于扩展；
行内元素、块级元素、空元素
- 行内元素：a b span img input select
- 块级元素： h1 h2 h3 p ul li ol
- 空元素：hr br
在 CSS3 中唯一引入的伪元素是 selection
弹性布局flex的三个属性
- flex-grow ：规定项目将相对于其他灵活的项目进行扩展的量。
- flex-shrink ：规定项目将相对于其他灵活的项目进行收缩的量。
- flex-basis ：项目的长度
css兼容性问题
- 一般遵循两大原则：渐进增强和优雅降级；
css新增的伪类
- first-child 父元素的第一个子元素；
- p:last-child 父元素的最后一个子元素；
- nth-child(n) 父元素的第n个子元素；
HTML5 中新增的操作 DOM 的方法
- document.querySelector
- document.querySelectorAll
- document.getElementByClassName();
image 和 canvas 在处理图片的时候有什么区别
- image是通过对象的形式描述图片，canvas是通过专门的api将图像绘制在画布上；
string的常用方法
- charAt():获取指定下标值的字母；
- charCodeAt()：获取指定下标值的字母的unicode码；
- indexOf()：查找字符串第一次出现的位置；
- match()：匹配正则表达式；
- replace()：替代字符串；
- search()：查找字符串，没找到返回-1；
- slice()：分割获取指定区间值；
- toUpperCase()：转大写；
- toLowerCase()：转小写；
强制类型转换和隐式类型转换
- 强制类型转换：parseInt，parseFloat，Number;
- 隐式类型转换：==、console.log、alert；
prop 和 attr 的区别
- 对于 HTML 元素本身就带有的固有属性，在处理时，使用 prop 方法；
- 对于 HTML 元素我们自己自定义的 DOM 属性，在处理时，使用 attr 方法
js常用的数据类型
- String，Number，Boolean，Null，Undefined，Object；
js常用的内置对象
- Object，Number，String，Math，Date，Function,Json;
js的typeof返回值有哪些
- string，boolean，number，null，undefined；
null和undefined的区别
- null表示一个空对象，返回数值为0；
- undefined表示一个无对象，返回数值为NaN；
new的操作符具体干了些什么
- 创建了一个对象，并且this变量引用该对象；
- 属性和方法被加入到this引用的对象中；
- 新创建的对象由this所引用，并且隐式返回this；
js的深拷贝和浅拷贝的区别
- 浅拷贝：只复制某个对象的指针，而不复制对象本身，新旧对象指向同一块内存；
- 深拷贝：会创建另一个一模一样的对象，新旧对象指向不同的内存，新对象修改不会影响到原对象；
- 深拷贝的方法：递归拷贝，使用object.created方法，jq的$extend；
回调地狱
- 由于回调函数是异步的，每一层的函数使用都依赖于上一层函数的回调执行完，多层嵌套引起回调地狱；
- 解决方法：使用promise，避免函数嵌套，使用模块化开发；
对于Promise的理解
- Promise是解决异步编程的一种方案，可以很好的解决回调地狱问题；自身带有all，reject，resolve方法，原型上由.then和.catch方法，缺点就是一旦建立就无法取消；
谈谈你对this的理解
- 普通函数和定时器中，this指向window
- 构造函数中this指向当前实例化的对象；
- 事件处理函数中，this指向事件出发对象；
- 箭头函数中，this会逐层向外查找，知道找到this对象；
原型和原型链
- 每个对象都会在其内部初始化一个属性，就是prototype（原型），当我们访问一个对象的属性时，如果对象内部不存在这个属性，那么就回去prototype里面找到这个属性，这个prototype又会有自己的prototype，这就是原型链；
- 原型链是继承的主要方法；
继承的方式
- 拓展原型对象继承；
- 利用call和apply继承；
- 使用call+prototype继承；
对json的了解
- json指的是js的对象语法；
- 轻量级数据交互，可以形成复杂的嵌套结构，解析方便，易于读写，占用带宽小；
常用的es6语法
1.let，const，箭头函数，字符串模板，proxy，循环；
call和bind以及apply的区别
- 三者都可以把一个函数应用到另一个对象上；
- apply和call是直接函数调用，bind是绑定，执行时需要再次调用；
- apply和call的区别在于，apply参数是数组，call参数需要以逗号进行分割；
内存泄漏指的是一块内存既不能被使用，也不能被回收
didable和readonly的区别
- 两者都是使用户不能更改表单的内容；
- readonly只针对于input和textarea有效，disable针对于表单所有元素；
- 使用disable后，利用post和get提交的数据不会被传递出去，而readonly会被传递出去；
post和get的区别
- get不安全，他会在url中暴露数据；post安全，不会暴露数据；
- get输送的数据量小，get执行效率更好，get传输的参数只允许ASCLL字符；
jq的常用方法
- 获取元素内容：$().html
- 事件操作；
- 操作控制元素；
- 操作css；
- ajax操作；
$(this)和this的区别
- this表示当前对象，表示上下文的当前对象；$（this）返回一个jq对象，可以对他调用多个jq方法；
json字符串和json对象之间的转化
- Json.parse()：字符串转对象；
- Json.stringify：对象转字符串；
http和https的区别
- 端口号不同：http端口号80，https端口号443；
- https加密更安全，http不加密；
- http免费，https需要到ca申请证书；
解决跨域的方式
- jsonp和cors：在请求头里面为Access开头的那个设置对应的域名；
ajax的交互原理
- 创建XMLHttpRequest对象；
- 建立连接，xmlHttp.open();
- 发送数据，xmlHttp.send();
- 注册回调方法；
- 执行回调；
ajax出错时可以通过捕捉error事件来获取出错信息；
ajax的缺点
- 不支持浏览器的back按钮；
- ajax暴露了和服务器的交互细节；
- 对搜索引擎的支持比较弱；
- 破坏程序的异常机制；
- 不容易调试；
http状态码及意义
- 200：请求成功；
- 303：告知客户端请求另一个url来获取资源；
- 400：请求格式错误；
- 404：请求失败；
- 500：服务器遇到一个未知错误，导致请求失败；
事件代理
- 当网页中需要触发事件的对象比较多时，为了避免内存泄漏，可以利用时间冒泡机制，将事件委托到body或者document等元素上，这样一个页面就只有一个事件触发；
前端优化问题
- 减少http请求；
- 设置样式时，采用className代替style；
- 少用全局变量；
- 图片预加载；，样式表放在顶部；
vue双向绑定的原理
- vue.js采用的是数据劫持结合发布者订阅者模式，通过object.defineProperty来劫持各个属性的setter和getter，在数据变动时发布消息给订阅者，触发相应的监听回调；
vue.cli项目中src文件夹及作用
- assets：文件存放静态资源；
- components：存放组件；
- views：存放视图；
- router：定义路由；
- app.vue：应用主组件；
- main.js:入口文件；
vue定义动态路由
- 在path后面添加/：id
导航钩子
- 全局导航狗子：前置守卫，后置钩子，beforeEach，afterEach；
- 路由共享钩子：beforeEnter
- 组件内导航钩子
vuex的属性
- state：存放数据；
- getter：相当于计算属性；
- mutation：相当于methods；
- action：进行异步操作；
717
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
