常见前段面试题1

1.  一个200*200的div在不同分辨率屏幕上下左右居中，用css实现

div {
        width: 200px;
        height: 200px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -100px;
        margin-top: -100px;
        background-color: pink;
        }

2.阐述清除浮动的几种方式

1.父级div定义 height

原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。 
优点：简单、代码少、容易掌握 
缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题

2.父级div定义 overflow:hidden

原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度 
优点：简单、代码少、浏览器支持好

3.  结尾处加空div标签 clear:both

原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度 
优点：简单、代码少、浏览器支持好、不容易出现怪问题

缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，让人感觉很不好

4.父级div定义 伪类:after 和 zoom  

原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE转有属性)可解决ie6,ie7浮动问题  

优点：浏览器支持好、不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）  

缺点：代码多、不少初学者不理解原理，要两句代码结合使用才能让主流浏览器都支持

3.解释css sprites（精灵图） ，如何使用？

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。

CSS Sprites为一些大型的网站节约了带宽，让提高了用户的加载速度和用户体验，不需要加载更多的图片

4.如何用原生js给一个按钮绑定两个onclick事件？

<script>
        var btn = document.getElementById("btn");
        btn.addEventListener("click", myFunction1);
        btn.addEventListener("click", myFunction2);

        function myFunction1() {
            alert(111);
        }
        function myFunction2() {
            alert(222);
        }
</script>

5.请描述一下 cookies、sessionStorage和localstorage区别

相同点：都存储在客户端
不同点：1.存储大小
·        cookie数据大小不能超过4k。
·        sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

        2.有效时间
·        localStorage    存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
·        sessionStorage  数据在当前浏览器窗口关闭后自动删除。
·        cookie          设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

        3. 数据与服务器之间的交互方式
·        cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端
·        sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

6.document.write和innerHTML的区别：

document.write是直接写入到页面的内容流，如果在写之前没有调用document.open, 浏览器会自动调用open。每次写完关闭之后重新调用该函数，会导致页面被重写。  

innerHTML则是DOM页面元素的一个属性，代表该元素的html内容。你可以精确到某一个具体的元素来进行更改。如果想修改document的内容，则需要修改document.documentElement.innerElement。  

innerHTML将内容写入某个DOM节点，不会导致页面全部重绘     

innerHTML很多情况下都优于document.write，其原因在于其允许更精确的控制要刷新页面的那一个部分。

7.ajax的步骤

什么是ajax?

ajax(异步javascript xml) 能够刷新局部网页数据而不是重新加载整个网页。

如何使用ajax?

第一步，创建xmlhttprequest对象，var xmlhttp =new XMLHttpRequest（);XMLHttpRequest对象用来和服务器交换数据。

var xhttp;

if (window.XMLHttpRequest) {

//现代主流浏览器

xhttp = new XMLHttpRequest();

} else {

// 针对浏览器，比如IE5或IE6

xhttp = new ActiveXObject("Microsoft.XMLHTTP");

}

第二步，使用xmlhttprequest对象的open（）和send（）方法发送资源请求给服务器。

第三步，使用xmlhttprequest对象的responseText或responseXML属性获得服务器的响应。

第四步，onreadystatechange函数，当发送请求到服务器，我们想要服务器响应执行一些功能就需要使用onreadystatechange函数，每次xmlhttprequest对象的readyState发生改变都会触发onreadystatechange函数

8.块级元素水平垂直居中的方法？（3个）

（1）原理：要让div等块级元素水平和垂直居中，必需知道该div等块级元素的宽度和高度，然后设置位置为绝对位置，距离页面窗口左边框和上边框的距离设置为50%，这个50%就是指页面窗口的宽度和高度的50%，最后将该div等块级元素分别左移和上移，左移和上移的大小就是该div等块级元素宽度和高度的一半。

div {
    position: relative;  /* 相对定位或绝对定位均可 */  
    width:500px;   height:300px;   
    top: 50%;   left: 50%;   
    margin: -150px 0 0 -250px;      /* 外边距为自身宽高的一半 */   
    background-color: pink;   /* 方便看效果 */   
 }

（2）

未知容器的宽高，利用 `transform` 属性

 div {
 	position: absolute;		/* 相对定位或绝对定位均可 */
 	width:500px;
 	height:300px;
 	top: 50%;
 	left: 50%;
 	transform: translate(-50%, -50%);
 	background-color: pink;	 	/* 方便看效果 */

 }

（3）

利用 flex 布局
 实际使用时应考虑兼容性

 .container {
 	display: flex;
 	align-items: center; 		/* 垂直居中 */
 	justify-content: center;	/* 水平居中 */

 }
 .container div {
 	width: 100px;
 	height: 100px;
 	background-color: pink;		/* 方便看效果 */
 }