1. 假设高度已知,请写出三栏布局,其中左栏、右栏宽度各位300px,中间自适应
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常见对象
- event.preventDefault--> 阻止默认行为
- event.stopPropagation -->停止事件传递
- event.stopImmediatePropagation -->阻止其它绑定事件执行(事件相应优先级)
- 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>
- 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
- 空行
- 请求体
- 状态行
- 响应头
- 空行
- 相应体
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字段