盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)
两种方式：
content-box：标准盒模型（W3C盒模型）
border-box：怪异盒模型（ IE 盒子模型）
一般浏览器和IE9+默认值是content-box
两者区别：
content-box：padding和border不计算在定义的width和height之内。
盒子的实际宽度=定义的width+padding+border
border-box：padding和border计算在定义的width和height之内。
盒子的实际宽度=设置的width（包含padding和border，但他们不会影响定义的宽度值，定义了多少还是显示多少）
例如：
我要评论/* 红色区域的大小是160px ,整个区域为200px*/
.box {
width: 200px;
height: 200px;
padding: 20px;
background: #f00;
border: 20px solid #000;
box-sizing: border-box;
}
/* 红色区域的大小是240px，整个区域为280px */
.box {
width: 200px;
height: 200px;
padding: 20px;
background: #f00;
border: 20px solid #000;
box-sizing: content-box;
}
第一种方法利用定位
结构
<div id="left">我是左边</div>
<div id="center">我是中间</div>
<div id="right">我是右边</div>
样式
html,body {margin: 0;padding:0}
#left,#right {width: 200px;height: 200px;background-color: #f00;position: absolute;}
#left {left: 0;top: 0;}
#right {right: 0; top: 0;}
#center {margin: 0 200px;background-color:#ff0;height: 200px;}
css样式默认加载顺序 选择器优先级越高，其中的样式优先级越高： !important>行内样式>id选择器> 类选择器> 标签选择器
对于相同类型选择器制定的样式，在样式表文件中，越靠后的优先级越高 所以把类选择器center写在后面就可以了。
第二种方法利用Flex布局+css3 的 calc()函数
结构
<div class="box">
<div id="left">我是左边</div>
<div id="center">我是中间</div>
<div id="right">我是右边</div>
</div>
样式
.box{display: flex}
#left,#right {width: 200px;height: 200px;background-color: #f00;}
#center{width: calc(100% - 400px);background-color: blue;height: 200px;}
第三种方法利用浮动+css3 的 calc()函数
结构
<div class="box">
<div id="left">我是左边</div>
<div id="center">我是中间</div>
<div id="right">我是右边</div>
</div>
样式
.box{overflow: hidden;}
#left,#right {float: left;width: 200px;height: 200px;background-color: #f00;}
#center{float:left;width: calc(100% - 400px);height: 200px;background-color:#ff0;}
position属性指定一个元素（静态的，相对的，绝对或固定）的定位方法的类型。
| position | absolute\relative\fixed\static |
|---|---|
| 相对定位 position:relative | 相对于当前元素（其自身）定位，原位置保留；一般和绝对定位一起搭配使用 |
| 绝对定位 position:absolute | 默认情况下相对于浏览器/body定位，若让其相对于第一个父元素定位，需要给它爸爸添加position:relative。一般小图标放在右上角左下角这种可以使用，场景不同，使用方式不同，视情况而定 |
| 固定定位 position:fixed | 滚动条滚动时固定不动，相对于浏览器窗口进行定位；一般用于广告位使用或者侧边栏 |
| static | 默认值，没有定位，元素出现在正常的流中；我一般和媒体查询一起使用，PC端布局使用了定位，移动端不需要定位就用static 覆盖 |
CSS Sprites （css图片精灵）其实就是把网页中一些背景图片整合到一张图片文件中，再利用 CSS 的"background-image"，“background-repeat”，“background-position” 的组合进行背景定位，background-position 可以用数字能精确的定位出背景图片的位置。
CSS Sprites 的优点：
1、减少图片的字节
2、减少网页的http请求，从而大大提高页面的性能
3、解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名即可，不需要对每一个小元素进行命名，从而提高了网页的制作效率。
4、更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便
em与rem比较：
em相对于父元素，rem相对于根元素
更倾向于使用rem，因为em不同元素的参照物不一样（都是该元素父元素），所以在计算的时候不方便，相比之下rem就只有一个参照物（html元素），这样计算起来更清晰。
通过rem既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。IE9以下版本不支持，应对方法就是多写一个绝对单位的声明，这些浏览器会忽略用rem设定的字体大小。
例子：
p {font-size:14px; font-size:.875rem;}
子标签会继承父标签的（font- text- line-以及color）样式
color(颜色，a元素除外)
font-family（字体系列）
font-size（字体大小）
line-height（行高）
text-align（用于设置对齐方式）…
div:after{
content:""; /*设置内容，必须*/
display:block; /*将文本转为块级元素*/
clear:both; /*清除浮动*/
}
div{
zoom:1; /*兼容IE*/
}
单文本溢出
div {
white-space: nowrap; // 强制一行内显示文本不换行
overflow: hidden; //超出的部分隐藏
text-overflow: ellipsis; //文字用省略号替代超出的部分
}
多行文本的溢出（兼容性不好，适合webkit和移动设备）
div {
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box; //弹性伸缩盒子模型显示
-webkit-line-clamp:2; //限制在一个块元素显示的文本行数
-webkit-box-orient:vertical; //设置或者检索伸缩对象的子元素的排列方式
}
下面有关JavaScript中 call和apply的描述，错误的是？
A.call与apply都属于Function.prototype的一个方法，所以每个function实例都有call、apply属性
B.两者传递的参数不同，call函数第一个参数都是要传入给当前对象的对象，apply不是
C.apply传入的是一个参数数组，也就是将多个参数组合成为一个数组传入
D.call传入的则是直接的参数列表。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。
正确答案是 B
call（）方法和apply（）方法的作用相同，他们的区别在于接收参数的方式不同。对于call（），第一个参数是this值没有变化，变化的是其余参数都直接传递给函数。（在使用call（）方法时，传递给函数的参数必须逐个列举出来。使用apply（）时，传递给函数的是参数数组）如下代码做出解释：
function add(c, d){
return this.a + this.b + c + d;
}
var o = {a:1, b:3};
add.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16
add.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34
undefined、null、number、boolean、string
他们的区别是，触发的时机不一样，先触发DOMContentLoaded事件，后触发load事件。
在第4步，会触发DOMContentLoaded事件。在第6步，触发load事件。
执行时机不同
window.onload方法是在网页中所有的元素（包括元素的相关联文件）都加载到浏览器后才能执行，即JavaScript此时才可以访问网页中的任何元素。
$(document).ready在DOM完全就绪的时候就可以被调用
执行方法数量不同
window.onload只能绑定一个函数，而$(document).ready( ) 可以写很多个
| 方法 | 作用 | 是否影响原数组 |
|---|---|---|
| push() | 向数组的末尾添加一个或多个元素，并返回数组新的长度 | 是 |
| pop() | 删除数组的最后一个元素，并将删除的元素作为返回值返回 | 是 |
| unshift() | 向数组开头添加一个或多个元素，并返回新的数组长度；向前边插入元素以后，其他的元素索引会依次调整 | 是 |
| shift | 删除数组的第一个元素，并将被删除的元素作为返回值返回 | 是 |
| slice() | 用来从数组提取指定元素，不会改变原数组，而是将截取到的元素封装到一个新的数组中返回 | 否 |
| splice() | 将指定元素从原数组中删除，并将被删除的元素作为返回值返回 | 是 |
| concat() | 链接两个或多个数组，并将新的数组返回 | 否 |
| join() | 将数组转换为一个字符串 | 否 |
| reverse() | 用来反转数组（前面的到后面，后面的来前面） | 是 |
| sort() | 用来对数组中的元素进行排序；也会影响原数组，默认会按照Unicode编码进行排序 | 是 |
| forEach() | 遍历数组 |
var w = [1,2,3,4,5];
var s =w;
s.push(6);
console.log(w)
Log输出的内容中w的值会改变吗？如果会改变，请换一种写法，让s改变时w不会改变
在组件中的style标签中加入scoped即可
<style scoped>
.box{border:1px solid #f00}
</style>
相同点：v-if 和 v-show都可以控制dom元素隐藏。
不同点：
（1）v-if是直接销毁和重建dom节点达到让元素显示或隐藏的效果；v-show是通过修改元素的display来让其显示或隐藏。
（2）v-if可以实现组件的重新渲染，有更高的切换消耗过程，v-show有更高的初始化渲染消耗。
（3）v-if适用于运行条件不大可能改变的场合；v-show适用于频繁切换的长度
this.$route 是路由【参数对象】，所有路由中的参数， params, query 都属于它；
this.$router 是路由【导航对象】，用它 可以方便的 使用 JS 代码，实现路由的 前进、后退、 跳转到新的 URL 地址
数据驱动：保证数据和视图的一致性。
组件系统：
组件的核心选项
1 模板（template）：模板声明了数据和最终展现给用户的DOM之间的映射关系。
2 初始数据（data）：一个组件的初始数据状态。对于可复用的组件来说，这通常是私有的状态。
3 接受的外部参数(props)：组件之间通过参数来进行数据的传递和共享。
4 方法（methods）：对数据的改动操作一般都在组件的方法内进行。
5 生命周期钩子函数（lifecycle hooks）：一个组件会触发多个生命周期钩子函数，最新2.0版本对于生命周期函数名称改动很大。
6 私有资源（assets）：Vue.js当中将用户自定义的指令、过滤器、组件等统称为资源。一个组件可以声明自己的私有资源。私有资源只有该组件和它的子组件可以调用。
1、v-if：根据表达式值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。
2、v-show：根据表达式之真假值，切换元素的 display CSS 属性。
3、v-for：循环指令，基于一个数组或者对象渲染一个列表，vue 2.0以上必须需配合 key值 使用。
4、v-bind：动态地绑定一个或多个特性，或一个组件 prop 到表达式。
5、v-on：用于监听指定元素的DOM事件，比如点击事件。绑定事件监听器。
6、v-model：实现表单输入和应用状态之间的双向绑定
7、v-once：只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
.stop //阻止单击事件冒泡
.prevent //提交事件不再重新加载页面
.capture //添加事件侦听器时使用事件捕获模式
.self //只当事件在该元素本身时触发回调（在其子元素上不触发）
.once //只触发一次事件
1、元素的唯一性，diff方法中提高了匹配元素index的性能。有key时遍历key-index对象（快），无key时遍历旧Vnode（慢）。
2、在元素list一直变化的情况下，key值设置唯一时，能很精确找到变更元素，key不唯一时，不能精确找到要匹配的元素。
但对于是原地复用元素还是重新创建元素没有直接影响，只要新旧两个Vnode满足sameVnode，就会复用已有元素。
computed
计算属性就是当其依赖属性的值发生变化时，这个属性的值会自动更新，与之相关的 DOM 部分也会同步自动更新
单页面应用（SPA），通俗一点说就是指只有一个主页面的应用，浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中。
多页面（MPA），就是指一个应用中有多个页面，页面跳转时是整页刷新。
单页面的优点和缺点：
优点：（数据驱动、组件化、轻量、简洁）
1、用户体验好，快，内容的改变不需要重新加载整个页面，对服务器压力较小。
2、前后端分离
3、完全的前端组件化，前端开发不再以页面为单位，更多地采用组件化的思想，代码结构和组织方式更加规范化，便于修改和调整；
缺点：
1、第一次加载首页耗时相对长一些
2、不利于 SEO优化，单页页面，数据在前端渲染，就意味着没有 SEO。
3、页面导航不可用，如果一定要导航需要自行实现前进、后退。
**
**
1.网络响应状态码中，200/302/304/403/404/500等常规状态码分别对应什么意思？
| 状 态 码 | 描述 | 解释 |
|---|---|---|
| 200 | OK（成功） | 请求响应体包含服务器返回的数据 |
| 302 | Found | 请求临时转移到新地址。返回新地址。 |
| 304 | Not Modified | 未按预期修改文档。客户端有缓冲的文档并发出了一个条件性的请求（一般是提供If-Modified-Since头表示客户只想比指定日期更新的文档）。服务器告诉客户，原来缓冲的文档还可以继续使用 |
| 403 | Forbidden | 请求被禁止、超出访问权限。与401不同，请求已经通过了身份验证，只是没有获得资源授权 |
| 404 | Not Found | 服务器无法找到被请求的资源 |
| 500 | Internal Server Error | 请求未完成。服务器内部遇到不可预知的错误 |
2.常规开发中，如何在浏览器中进行调试？
3.前端发送请求post与get提交的数据有什么区别？
4.操作数组的常规方法有哪些？
5.前端如何控制post请求发送的数据类型属于表单类型或者json类型？
注：题型均来自面试中遇到的试题，答案有涉及到他人总结的地方，可以提醒我加上对应出处链接。
本文地址：https://blog.csdn.net/dreamy_wx/article/details/105225064
如对本文有疑问， 点击进行留言回复！！
css深入剖析transform的translate和perspective
HCIE第四天总结（典型组网之一：CSS+Eth-Trunk+iStack）
了解下Apache Elasticsearch 和 Kibana
网友评论