前端面试宝典

<style>
    .clear{
        clear:both; 
        height: 0; 
        line-height: 0; 
        font-size: 0
    }
</style>
<div class="outer">    
    <div class="div1">1</div>    
    <div class="div2">2</div>    
    <div class="div3">3</div>    
    <div class="clear"></div>
</div>

(2)给父级元素定义overflow

<style>
    .over-flow{    
        overflow: auto; //也可以设置hidden    
        zoom: 1; 
        //zoom: 1; 处理兼容性问题
    }
</style>
<div class="outer over-flow"> //这里添加了一个class    
    <div class="div1">1</div>    
    <div class="div2">2</div>    
    <div class="div3">3</div>    
    <!--<div class="clear"></div>-->
</div>

(3):after方法（注意：作用于浮动元素的父级）

利用:after和:before来在元素内部插入两个元素块，从而达到清除浮动的效果。其实现原理类似于clear:both方法，只是区别在于:clear在html插入一个div.clear标签，而clearfix利用其伪类:after在元素内部增加一个类似于div.clear的效果

<style>
    .clearfix {
        zoom:1;
    }    /*==for IE6/7 Maxthon2==*/
    .clearfix:after {    
        clear:both;    
        content:'';    
        display:block;    
        width: 0;    
        height: 0;    
        visibility:hidden;
    }   /*==for FF/chrome/opera/IE8==*/
</style>
<div class="clearfix">    
    <div class="div1">1</div>    
    <div class="div2">2</div>    
    <div class="div3">3</div>
</div>

3.隐藏元素的方法

visibility：hidden; 只是简单的隐藏某个元素，但是元素占用的空间仍然存在
opacity：0；一个css3属性，设置0可以使一个元素完全人透明，制作出和visibility一样。与visibility相比，它可以被transition和animate
display：none；元素会变得不可见，并且不会再占用文档的空间
position:absolute;是元素脱离文档流，处于普通文档之上，给它设置一个很大的left负值定位，使元素定位在可见区域之外。

4.css什么属性可以继承

字体属性：

font-family，font-weight，font-size，font-style，

文本属性：

text-indext文本缩进

text-align文本水平对齐

line-height行高

word-spacing:单词之间的间距

letter-spacing：中文或者字母之间的间距

text-transform：控制文本大小写（就是uppercase、lowercase、capitalize这三个）

color颜色

注：字体以及文本相关的属性可以继承

5.css的选择器

元素选择器：标签选择器，id选择器，类选择器

关系选择器：子集选择器，后代选择器

属性选择器：E[att]、E[att="val"]等等

伪类选择器：E:link、E:visited、E:hover、E:active E:first-child、E:last-child等

伪对象选择器：E:before和E:after等

6.css选择器的优先级

!important>id>类>标签选择器

7.css的权重规则

一个行内样式+1000，一个id—+100，一个属性选择器/class类/伪类选择器+10，一个元素名/伪对象选择器+1。

8.css中link和@import的区别********

两者都是外部应用css样式，但是存在一定的区别
(1)link：
HTML标签，加载css，定义RSS等其他事务，
引用css时，在页面载入同时加载
XHTML标签，无兼容问题
支持使用JavaScript控制DOM改变样式
(2)@import：
属于css范畴，只可以加载css
页面完全载入以后再加载
在css2.1提出的，低版本的浏览器不支持，所有以兼容性问题
不支持使用JavaScript控制DOM改变样式

9.定位，子绝父相，弹性盒子比这个简单点

相对定位：positive:relative;它是参照它在页面中原来的位置进行移动的。
绝对定位：position:absolute;它是相对于距离它最近的有定位的父元素进行移动的
固定定位：position:fixed;它是相对于页面的位置进行移动的
注意：只有添加了定位的元素才可以设置z-index属性，后面的值代表层级，没有px等单位。

10、如何让一个盒子水平垂直居中？重中之重

//已知宽高
<div class="div1"></div>
<style>    
    .div1{        
        width:400px;        
        height:400px;        
        position:absolute;        
        left:50%;        
        top:50%         
        margin:-200px 0 0 -200px;        
        background-color:red;    
    }   
</style>//未知宽高
<!DOCTYPE html>
<html lang="en">
    <head>    
        <meta charset="UTF-8">    
        <title>Document</title>    
        <style>        
            .div1{            
                position: absolute;            
                left: 0;            
                top: 0;            
                bottom: 0;            
                right: 0;            
                margin: auto;            
                border: 1px solid #000;            
                width: 400px;            
                height: 400px;        
            }    
        </style>
    </head>
    <body>    
        <div class="div1"></div>
    </body>
</html>
//未知宽高方法二：
<!DOCTYPE html>
<html lang="en">
    <head>    
        <meta charset="UTF-8">    
        <title>Document</title>    
        <style>        
            .div1{            
                position: absolute;            
                left: 50%;            
                top: 50%;            
                transform: translate(-50%,-50%);            
                border: 1px solid #000;            
                width: 400px;            
                height: 400px;        
            }    
        </style>
    </head>
    <body>    
        <div class="div1"></div>
    </body>
</html>

//未知宽高方法三：

css3的伸缩盒子

11.cookie，sessionStorage，localStorage的区别

①cookie，session的区别

cookie和session都是用来跟踪浏览器用户身份的会话方式。

区别：

1、保持状态：cookie保存在浏览器端，session保存在服务器端

2、使用方式：

（1）cookie机制：如果不在浏览器中设置过期时间，cookie被保存在内存中，生命周期随浏览器的关闭而结束，这种cookie简称会话cookie。如果在浏览器中设置了cookie的过期时间，cookie被保存在硬盘中，关闭浏览器后，cookie数据仍然存在，直到过期时间结束才消失。

Cookie是服务器发给客户端的特殊信息，cookie是以文本的方式保存在客户端，每次请求时都带上它

（2）session机制：当服务器收到请求需要创建session对象时，首先会检查客户端请求中是否包含sessionid。如果有sessionid，服务器将根据该id返回对应session对象。如果客户端请求中没有sessionid，服务器会创建新的session对象，并把sessionid在本次响应中返回给客户端。通常使用cookie方式存储sessionid到客户端，在交互中浏览器按照规则将sessionid发送给服务器。如果用户禁用cookie，则要使用URL重写，可以通过response.encodeURL(url) 进行实现；API对encodeURL的结束为，当浏览器支持Cookie时，url不做任何处理；当浏览器不支持Cookie的时候，将会重写URL将SessionID拼接到访问地址后。

3、存储内容：cookie只能保存字符串类型，以文本的方式；session通过类似与Hashtable的数据结构来保存，能支持任何类型的对象(session中可含有多个对象)

4、存储的大小：cookie：单个cookie保存的数据不能超过4kb；session大小没有限制。

5、安全性：cookie：针对cookie所存在的攻击：Cookie欺骗，Cookie截获；session的安全性大于cookie。

原因如下：（1）sessionID存储在cookie中，若要攻破session首先要攻破cookie；

（2）sessionID是要有人登录，或者启动session_start才会有，所以攻破cookie也不一定能得到sessionID；

（3）第二次启动session_start后，前一次的sessionID就是失效了，session过期后，sessionID也随之失效。

（4）sessionID是加密的

（5）综上所述，攻击者必须在短时间内攻破加密的sessionID，这很难。

6、应用场景：

cookie：（1）判断用户是否登陆过网站，以便下次登录时能够实现自动登录（或者记住密码）。如果我们删除cookie，则每次登录必须从新填写登录的相关信息。

（2）保存上次登录的时间等信息。

（3）保存上次查看的页面

（4）浏览计数

session：Session用于保存每个用户的专用信息，变量的值保存在服务器端，通过SessionID来区分不同的客户。

（1）网上商城中的购物车

（2）保存用户登录信息

（3）将某些数据放入session中，供同一用户的不同页面使用

（4）防止用户非法登录

7、缺点：cookie：（1）大小受限

（2）用户可以操作（禁用）cookie，使功能受限

（3）安全性较低

（4）有些状态不可能保存在客户端。

　　　　　　　　（5）每次访问都要传送cookie给服务器，浪费带宽。

（6）cookie数据有路径（path）的概念，可以限制cookie只属于某个路径下。

session：（1）Session保存的东西越多，就越占用服务器内存，对于用户在线人数较多的网站，服务器的内存压力会比较大。

（2）依赖于cookie（sessionID保存在cookie），如果禁用cookie，则要使用URL重写，不安全

（3）创建Session变量有很大的随意性，可随时调用，不需要开发者做精确地处理，所以，过度使用session变量将会导致代码不可读而且不好维护。

二、localStorage和sessionStorage区别

localStorage和sessionStorage一样都是用来存储客户端临时信息的对象。
他们均只能存储字符串类型的对象（虽然规范中可以存储其他原生类型的对象，但是目前为止没有浏览器对其进行实现）。
localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。

sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了。
不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的 localStorage（页面属于相同域名和端口），但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意的是，页面及标签页仅指顶级窗口，如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionStorage的

浅总结一下：

cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。
cookie数据始终在同源的http请求中携带（即使不需要），也会在浏览器和服务器间来回传递。
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

存储大小：
    cookie数据大小不能超过4k。
    sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

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

12、一个页面上两个div左右铺满整个浏览器，要保证左边的div一直为100px，右边的div跟随浏览器大小变化（比如浏览器为500，右边div为400，浏览器为900，右边div为800），写出大概的css代码

方法一：
<!DOCTYPE html>
<html lang="en">
    <head>    
        <meta charset="UTF-8">    
        <meta http-equiv="X-UA-Compatible" content="IE=edge">    
        <meta name="viewport" content="width=device-width, initial-scale=1.0">        <title>Document</title>    
        <style>        
            .left{            
                width: 100px;            
                height: 200px;            
                background-color: #000;            
                float: left;        
            }        
            .right{            
                background-color: red;            
                margin-left: 100px;            
                height: 200px;        
            }    
        </style>
    </head>
    <body>    
        <div class="left"></div>    
        <div class="right"></div>
    </body>
</html>

浮动效果：

<!DOCTYPE html>
<html lang="en"><head>    
    <meta charset="UTF-8">    
    <meta http-equiv="X-UA-Compatible" content="IE=edge">    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>Document</title>    
    <style>        
        .big{            
            display: flex;            
            flex-direction: row;            
            align-items: center;        
        }        
        .left{            
            flex-basis: 100px;//初始长度            
            background-color: blue;            
            height: 300px;        
        }        
        .right{            
            background-color: green;            
            height: 300px;            
            flex-grow: 1;        
        }    
    </style>
    </head>
    <body>    
        <div class="big">        
            <div class="left"></div>        
            <div class="right"></div>    
        </div>
    </body>
</html>

13、什么是跨域，如何解决跨域

13.1什么是跨域？

跨域是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript实施的安全限制。

什么是同源策略呢？

同源策略是浏览器最核心也是最基本的安全功能，它是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript的浏览器都会只用这个策略，所谓同源是指：域名，协议，端口相同，有一个不一样就是非同源策略

同源策略限制的情况：

1、Cookie、LocalStorage 和 IndexDB 无法读取

2、DOM 和 Js对象无法获得

3、AJAX 请求不能发送

注意：对于像 img、iframe、script 等标签的 src 属性是特例，它们是可以访问非同源网站的资源的。

13.2.跨域实例演示

13.3.如何解决跨域问题

response添加header
JSONP方式
CORS
HttpClient请求转发
nginx转发

总结：
JSONP、CORS、通过修改document.domain来跨子域、使用window.name来进行跨域、HTML5中新引进的window.postMessage方法、在服务器上设置代理页面 
1、JSONP  原理是：动态插入script标签，通过script标签引入一个js文件，这个js文件载入成功后会执行我们在url参数中指定的函数，并且会把我们需要的json数据作为参数传入。  由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源，为了实现跨域请求，可以通过script标签实现跨域请求，然后在服务端输出JSON数据并执行回调函数，从而解决了跨域的数据请求。  优点是兼容性好，简单易用，支持浏览器与服务器双向通信。缺点是只支持GET请求。 
2、CORS  服务器端对于CORS的支持，主要就是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置，就可以允许Ajax进行跨域的访问。  
3、通过修改document.domain来跨子域  将子域和主域的document.domain设为同一个主域.前提条件：这两个域名必须属于同一个基础域名!而且所用的协议，端口都要一致，否则无法利用document.domain进行跨域  主域相同的使用document.domain  
4、使用window.name来进行跨域  window对象有个name属性，该属性有个特征：即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的，每个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的所有页面中的

14、前端如何优化网站性能

14.1减少http的请求数量

在浏览器与服务器进行通信时，主要是通过http进行通信。浏览器与服务器需要通过三次握手，每次握手需要花费大量时间。而且不同浏览器对资源文件并发请求数量有限（不同浏览器允许并发数），一旦HTTP请求数量达到一定数量，自愿请求就存在等待状态，这是很致命的，因此减少http的请求数量可以很大程度上对网站性能进行优化。

14.1.1css Sprite

又称精灵图，雪碧图，将多张图片弄成一张图片，减少http请求的一种解决方案，可以通过css的background属性来访问图片内容。这种方案同时还可以减少图片总字节数。

使用雪碧图的优点：

将多张图片合并到一张图片中，可以减少图片的总大小
将多长图片合并成一张后，下载全部所需的资源，只需要一次请求，可以减小建立连接的消耗。

如何生成雪碧图？

这个有很多软件可以使用，Firework，首先新建文件夹，宽度一般为100像素，高度可以根据图片的大小来设定，画布颜色为透明色，点击确定。再返回图片，点击裁剪工具，再点击指针工具，Ctrl+c复制，Ctrl+v粘贴。

Photoshop也可以

如何使用雪碧图？

（1）确定在哪里引入精灵图，并为其设置大小

（2）在样式css中插入背景图，background-image:url("路径");

（3）利用background-position：x,y;属性和background-size:cover；background-repeat：no-repeat；等属性的组合进行定位。

在使用精灵图过程中可能会遇到的问题？

雪碧图太大，安放到指定位置只会显示一部分？？？

两个解决办法：
1. 上传雪碧图是就按照需要的大小上传
2. 使用background-size：属性缩放整块背景图，这里要注意下缩放了背景图的