day04 --前端复习

目录

 

CDN

Ajax中get 和 post 的区别

CSS三列布局

两列定宽，一列自适应

css单位

JS继承

---

CDN

内容分发网络，是部署在互联网上多个数据中心的大型分布式服务器系统，以更高的带宽提供来自服务器的文件本意在于尽可能避免互联网上所有影响数据传输速度和稳定性的瓶颈和环节，使内容传输更快，更稳定。适用于站点加速，点播，直播等场景。用户可以就近取的所需内容。

缺点：实施复杂，投资大。目前大部分只对静态内容加速

Ajax中get 和 post 的区别

get和post都是向服务器发送一种请求，只是发送机制不一样。

• get请求会将参数跟在url后进行传递，post作为http消息的实体内容发送，用户不可见。
• get大小限制4k，post不限制
• get请求会被浏览器缓存起来，其他人可以从浏览器的历史记录读取这些数据，账号密码等不安全。

get和post在服务器端的区别：

• 在客户端使用get请求，服务端使用Request.QueryString来获取资源，post在服务器使用Request.Form获取资源。
• http标准使用这两种方法达到不同的目的，get可以无副作用时使用（如搜索资源），post进行创建资源，资源内容会编入到http请示的内容中。

若符合下列任一情况，则用POST方法：

* 请求的结果有持续性的副作用，例如，数据库内添加新的数据行。
* 若使用GET方法，则表单上收集的数据可能让URL过长。
* 要传送的数据不是采用7位的ASCII编码。

若符合下列任一情况，则用GET方法：

* 请求是为了查找资源，HTML表单数据仅用来帮助搜索。
* 请求结果无持续性的副作用。
* 收集的数据及HTML表单内的输入字段名称的总长不超过1024个字符。

CSS三列布局

两列定宽，一列自适应

<div class="parent">
  <div class="left">左列定宽</div>
  <div class="center">中间定宽</div>
  <div class="right">右列自适应</div>
</div>

/*1. float+margin  */
.parent{
  min-width:310px; /*防止宽度不够，设置子元素的总和*/
}
.left{
  margin-right:10px; /*left和center的间隔*/
  float:left;
  width:100px;
  height:500px;
}
.center{
  float:left;
  width:200px;
}
.right{
  margin-left:320px;
}

/*2. overflow + float */
.parent{
  min-width:310px; /*防止宽度不够，设置子元素的总和*/
}
.left{
  margin-right:10px; /*left和center的间隔*/
  float:left;
  width:100px;
  height:500px;
}
.center{
  float:left;
  width:200px;
}
.right{
  overflow:hidden; /*触发BFC*/
}


/*3. table，设置border-spacing间距 */
.parent{
  width:100%;
  display:table;
  height: 520px; /*抵消上下间距10*2的高度影响*/
  border-spacing: 10px;  /*关键!!!设置间距*/
  background:#443434;
  margin:-10px 0; /*抵消上下边间距10的位置影响，不设置顶部会有空白*/
   /*左右两边间距大了一点,子元素改用padding设置盒子间距就没有这个问题*/
}
.left{
  display:table-cell;
  width:100px;
  background:#00ddff;
}
.center{
  display:table-cell;
  width:200px;
  background:#00d000;
}
.right{
  display:table-cell;
  background:#00ddff;
}

/*4. flex,自适应的设置flex：1*/
.parent{
  display:flex;
  height: 500px;
  
}
.left{
  margin-right:10px; /*间距*/
  width:100px;
  background:#00ddff;
}
.center{
  margin-right:10px;/*间距*/
  width:200px;
  background:#00d000;
}
.right{
  flex:1;
  background:#00ddff;
}

/*5.grid布局*/
.parent{
  display:grid;
  grid-template-columns: 100px 200px auto; /*设置三列，固定第一第二列的宽度，第三列自适应*/
  height: 500px;
  
}
.left{
  margin-right:10px; /*间距*/
  background:#00ddff;
}
.center{
  margin-right:10px;/*间距*/
  background:#00d000;
}
.right{
  background:#00ddff;
}

css单位

%	百分比
in	英寸，1in = 25.4mm=72pt=6pc=96px
cm	厘米
mm	毫米
em	1em 等于当前字体尺寸 2em 等于当前字体两倍尺寸 例如，某元素以12pt显示，那么2em就是24pt
rem	相对于根元素，根元素默认字号16px，12px = 12/16 = .75rem
ex	一个ex是字体的x-height.(x-height 通常是字体尺寸的一半。)
pt	磅(1 pt 等于 1/72 英寸) 1pt = px*4/3
pc	12个活点(1 pc 等于 12 点)
px	像素(计算机屏幕上的一个点)

JS继承

面向对象语言都支持两种继承方式：接口继承和实现继承。接口继承只继承方法签名，而实现继承则继承实际的方法。由于函数没有签名，ESCAScript只支持实现继承。实现继承是依靠原型链来实现的。实现的本质是重写原型对象。

高程P162

https://juejin.im/post/591523588d6d8100585ba595

通过两种方式确定原型和实例的方法，一是instanceof，二是isPrototypeOf()方法