页面布局
题目：假设高度已知，请写出三栏布局，其中左栏，右栏宽度各为300px，中间自适应
– 方案一：两边元素浮动不占位置，中间元素占父容器宽度百分之百
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
height: 500px;
}
#a{
float: left;
width: 300px;
background-color: red;
}
#b{
float: right;
width: 300px;
background-color: aqua;
}
#c{
width: 100%;
background-color: black;
}
</style>
</head>
<body>
<div>
<div id="a">左</div>
<div id="b">中</div>
<div id="c">右</div>
</div>
</body>
</html>
–方案二：左右使用绝对定位不占位置，中间占父元素百分之百
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
height: 500px;
}
div:nth-child(1){
position: relative;
}
#a{
position: absolute;
left: 0;
top:0;
width: 300px;
background-color: red;
}
#b{
position: absolute;
right: 0;
top: 0;
width: 300px;
background-color: aqua;
}
#c{
width: 100%;
background-color: black;
}
</style>
</head>
<body>
<div>
<div id="a">左</div>
<div id="b">中</div>
<div id="c">右</div>
</div>
</body>
</html>
–方案三：父元素使用flex布局，中间元素flex=1
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
height: 500px;
}
.fu{
display: flex;
width: 100%;
}
#a{
width: 300px;
background-color: red;
}
#b{
flex: 1;
background-color: aqua;
}
#c{
width: 300px;
background-color: black;
}
</style>
</head>
<body>
<div class="fu">
<div id="a">左</div>
<div id="b">中</div>
<div id="c">右</div>
</div>
</body>
</html>
–方案四：table-cell，设置父元素display为表格布局。（略）
–方案五：网格布局（略）
CSS盒模型
谈谈你对对盒模型的基本认识
- 基本概念
标准模型+IE模型 - 标准模型和IE模型区别
普通浏览器模型是content-box，而IE模型包括border与padding,也就是border-box. - CSS如何设置这两种模型
box-sizing属性 - JS如何设置获取盒模型对应的宽和高
dom.style.width
dom.currentStyle.width
window.getComputedStyle(dom).width
dom.BoundingClientRect().width //计算元素的绝对位置 - 实例题（根据盒模型解释边距重叠）
父子元素编剧重叠，子元素设置margin-top，父元素设置overflow=hidden,父元素高度会多margin-top像素 - BFC(编剧重叠解决方案)概念：块级格式化上下文
BFC原理及其应用
DOM事件类
- 基本概念：DOM事件的级别->dom0,dom2
- DOM事件模型：捕获和冒泡
- DOM事件流：通过捕获到目标元素，通过冒泡到window
- 描述DOM事件捕获的具体流程:window-document-body-…-目标元素
- event对象的常见应用：preventDefault();stopPropagation();stopImmediatePropagation();
currentTarget();currentTarget();target - 自定义事件：
var eve=new Event("custome");
domObj.addEventListener('custome',function(){....});
domObj.dispatchEvent(eve)//触发事件
原型链
- 创建对象的方法
var o1={name:'o1'}
var o11=new Object({name:"o11"})
var M=function(){this.name='o2'}
var o2=new M()
var P={name:"o3"}
var o3=Object.create(P)
通信类
- 什么是同源策略及限制
同源策略限制从一个源（协议+域名+端口）加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。 -Cookie,LocalStorage和indexDB无法读取。-DOM无法获得。-AJAX请求不能发送。 - 前后端如何通信
-Ajax。-WebSocket。-CORS - 如何创建Ajax。
- 跨越通信的几种方式
-JSONP。-Hash。-postMessage。-WebSocket。-CORS
安全类
- CSRF
基本概念和缩写：跨站请求伪造，Cross-site request forgery
攻击原理：略
防御措施：Token验证。Referer验证。隐藏令牌 - XSS
基本概念和缩写：跨域脚本攻击，cross-site scripting
攻击原理与防御措施：略
算法类
- 排序
- 堆栈，队列，链表
- 递归
- 波兰式和逆波兰式
js技能讲解
- 渲染机制
什么是DOCTYPE:告诉浏览器是当前文档是哪个文档类型
浏览器渲染过程：
重排Reflow:页面中的元素放在对应的位置，这个过程叫重排
重绘Repaint:页面内容画在页面上
布局Layout： - JS运行机制
任务队列； - 页面性能
资源压缩合并，减少HTTP请求。
非核心代码异步加载；动态脚本加载，defer,async
利用浏览器缓存：强缓存，协商缓存
使用CDN
预解析DNS - 错误监控
前端错误分类：代码错误，资源加载错误
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
