面试中知道开头不知道结尾的web知识点

阿里云双11来了!从本博客参与阿里云,服务器最低只要86元/年!

1. 假设高度已知,请写出三栏布局,其中左栏、右栏宽度各位100px,中间自适应

1.1 float方式⚠️div排放位置

优点:兼容性好

缺点:脱离文档流(清除浮动)

<style>
.left {
    float: left;
    background: pink;
    width: 100px;
}.right {
    float: right;
    width: 100px;
    background: darkkhaki;
}
<style>

1.2 position:absolute方式

优点:快捷

缺点:可实用性差,脱离文档流

.box>div {
    position: absolute;
}
.left {
    left: 0;
    background: pink;
    width: 100px;
}
.right {
    right: 0;
    width: 100px;
    background: darkkhaki;
}.middle {
    left: 100px;
    right: 100px;
    background: peachpuff;
}

1.3 flex的方式

有的点:比较完美

缺点:IE8不支持flex

1.4 table

优点:兼容性好

缺点:一个单元格高度变化,都会变化

.box>div {
    display: table-cell;
}
.box {
    display: table;
    width: 100%;
}
.left {
    background: pink;
    width: 100px;
}
.right {
    width: 100px;
    background: darkkhaki;
}

1.5 grid

缺点:兼容性差

.box {
    display: grid;
    width: 100%;
    grid-template-columns: 100px auto 100px;
}

2. css盒模型box-sizing

2.1 盒模型分为两类

  • 标准模型:content-box width*height
  • 怪异模型:border-box (width+padding)*(height+padding)

2.2 Js获取盒模型对应的宽和高

  • dom.style.width/height–>内联style不支持外部引入css
  • dom.currentStyle.width/height–>渲染之后的宽高,仅IE支持
  • dom.getBoundingClientRect().width/height–>可获取绝对位置left\top\right\bottom

2.3 BFC(块级格式化上下文)

创建BFC的方式

  • display:inline-block
  • overflow !== visible
  • display:flow-root
  • display-table

3.DOM事件

3.1 DOM事件级别

  • DOM0:element.onclick=function(){}
  • DOM1:没有更新事件内容
  • DOM2:element.addEventListener(‘click‘,function(){},false)
  • DOM3:element.addEventListener(‘keyup‘,function(){},false)

3.2 DOM事件模型

  • 捕获:window->document->html->body->……->目标元素
  • 冒泡:window<-document<-htm<-body<-……<-目标元素

事件流:捕获->目标阶段->冒泡

3.3 Event常见对象

  1. event.preventDefault–> 阻止默认行为
  2. event.stopPropagation –>停止事件传递
  3. event.stopImmediatePropagation –>阻止其它绑定事件执行(事件相应优先级)
  4. event.currentTarget–> 当前发生事件的元素(事件优化:子类元素点击相同方法直接在父级元素统一处理)
    <html>
    <head>
    <script type="text/javascript">
    function getEventTrigger(event)
      { 
      x=event.currentTarget; 
      alert("The id of the triggered element: "
       + x.id);
      }
    </script>
    </head>
    <body >
    <div id="p1" onmousedown="getEventTrigger(event)">
    	<button>点击我</button>
    	<button>点击我</button>
    	<button>点击我</button>
        
    </div>
    </body>
    </html>

  5. event.target–> 触发事件的节点(事件优化:子类元素点击相似方法直接在父级元素统一处理)
<html>
<head>
<script type="text/javascript">
function getEventTrigger(event)
  { 
  x=event.target; 
  alert("点击id是"
   + x.id);
  }
</script>
</head>
<body >
<div id="p1" onmousedown="getEventTrigger(event)">
 <p id='1'> 点击id=1</p>
 <p id='2'> 点击id=2</p>
</div>
</body>
</html>

4. http协议

http 协议主要特点:简单、快速、灵活、无状态、无连接

4.1 http报文组成

1. 请求报文

  • 请求行: http方法(get、post、put、delete、head)、 http协议、 http地址、版本号
  • 请求头: key->value
  • 空行
  • 请求体

2. 响应报文

  • 状态行
  • 响应头
  • 空行
  • 相应体

4.2 get和post区别

  • get浏览器回退是无害的,post会再次提交
  • get产生的url可以收藏,post 不可以
  • get会被浏览器缓存,post不可以缓存(性能优化)
  • get参数会被完整保留在浏览器历史记录里,post不会
  • get的URL传送的参数有长度限制,post无限制
  • get参数数据类型直接收ASCII字符,post无限制

4.3 http状态码

  • 1xx:指示信息
  • 2xx:成功
  • 3xx:重定向
  • 4xx:客户端错误
  • 5xx:服务器端错误

4.4 持久连接(keep-Alive)HTTP/1.1和部分HTTP/1.0增加了持久连接

http支持持久连接:避免了建立或者重新建立连接

管线化:将多个HTTP请求整批发送,在发送过程中不用等待对方响应

未管线化:请求1->响应1->请求2->响应2->请求3->响应3

管线化:请求1->请求2->请求3->响应2->响应1->响应3

  • 管线化机制通过持久连接完成,只有get和head请求可以进行管线化,post则有限制
  • 管线化不会影响响应到来顺序响应返回顺序不改变

5. 面向对象

5.1 类的声明

function People(name){  
    this.name:name}
class PeopleES6(name){
  constoructors{
    this.name=name
  }
}
//实例化
new People('周梅')
new PeopleES6('周梅')

5.2 类的继承

function Parent(){
	this.name='周梅'
	this.like=['唱歌''读书']
}
function Chlid(){
    this.type='chlid'
    Parent.call(this)//修改上下文,避免操作子类属性影响父级属性
}
Child.prototype=Object.create(Parent.prototype)//复制父级原型链,Object.create使子类原型链指向子类,不在指向父类
Child.prototype.constoructor=Child//修改构造方法

6.通信

6.1 同源策略

协议、域名、端口 都相同的即为同源

同源限制

  • cookie、localstorage和IndexDB无法读取
  • DOM无法获得
  • Ajax请求不能发送

前后端如何通信:Ajax、webSocket、CORS

跨域通信方式

JSONP:设置回调名称->注册window事件->监听onload->删除window对象->添加<script>发起请求

Hash:hash更新,页面不刷新原则添加 onhashchange事件

postMessage :window.postMessage(‘data’,’https://www.baidu.com/’)

window.addEventListener(‘message’,function(){},false)

websocket :配置请求头Upgrade: websocket和Connection: Upgrade

CORS:ajax发送一个非同源请求时,会在请求头添加origin字段

https://juejin.im/post/5db7b17ae51d4529ef3eedcd

Python量化投资网携手4326手游为资深游戏玩家推荐:《《航海王:燃烧意志》:《航海王启航》水雷系玩家必看!完全体甚平使用心得

「点点赞赏,手留余香」

    还没有人赞赏,快来当第一个赞赏的人吧!
0 条回复 A 作者 M 管理员
    所有的伟大,都源于一个勇敢的开始!
欢迎您,新朋友,感谢参与互动!欢迎您 {{author}},您在本站有{{commentsCount}}条评论