你遇到的前端面试题都有什么？
1. cookie session 的用途和区别，以及有效期
1、cookie数据存放在客户的浏览器上，session数据放在服务器上。
2、cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKI
前端面试题：
1. 一个200*200的div在不同分辨率屏幕上下左右居中，用css实现
<div style=\"width:500px;height:500px;border:1px solid green;display:flex;justify-content:center;align-items:center;\">
<div style=\"\">
2. 写一个左中右布局占满屏幕，其中左右两块是固定宽度200 ，中间自适应宽，要求先加载中间块，请写出结构及样式：
<div id=\"left\">我是左边</div>
<div id=\"center\">我是中间</div>
<div id=\"right\">我是右边</div>
html,body{ margin: 0px;width: 100%; }
#left,#right{width: 200px;height: 200px;background-color: aqua;
position: absolute;}
#left{left: 0;top:0;}
#right{right: 0;top:0;}
#center{margin: 0 200px;background-color: blue;height: 200px;}
或者利用弹性盒子
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
body {
display: flex;
}
.left {
width: 100px;
background-color: rgb(199, 170, 223);
}
.center {
background-color: rgb(151, 228, 148);
flex: 1;
}
.right {
width: 100px;
background-color: rgb(199, 170, 223);
}
</style>
<body>
<div class=\"left\">left</div>
<div class=\"center\">center</div>
<div class=\"right\">right</div>
</body>
3. 阐述清楚浮动的几种方式（常见问题）
1.父级div定义 height
原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。
优点：简单、代码少、容易掌握
缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题
2.父级div定义 overflow:hidden
原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度
优点：简单、代码少、浏览器支持好
4. 结尾处加空div标签 clear:both
原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度
优点：简单、代码少、浏览器支持好、不容易出现怪问题
缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，让人感觉很不好
5. 解释css sprites ，如何使用？
CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。
CSS Sprites为一些大型的网站节约了带宽，让提高了用户的加载速度和用户体验，不需要加载更多的图片
6. 如何用原生js给一个按钮绑定两个onclick事件？
Var btn=document.getElementById(‘btn’);
//事件监听 绑定多个事件
var btn4 = document.getElementById(\"btn4\");
