一、HTML 方面
1、三栏布局，左右固定，中间自适应？
左中右三栏宽度自适应于浏览器的方法有三个：绝对定位法，margin负值法以及自身浮动法。
一、绝对定位法：左右两栏采用绝对定位，分别固定于页面的左右两侧，中间的主体栏用左右margin值撑开距离。于是实现了三栏自适应布局。
这种方式三个div的顺序可以任意改变。
此方法的优点在于：理解容易，上手简单，受内部元素影响而破坏布局的概率低，就是比较经得起折腾。
缺点在于：如果中间栏含有最小宽度限制，或是含有宽度的内部元素，当浏览器宽度小到一定程度，会发生层重叠的情况。
<body>
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</body>
.main {
margin: 0 200px;
background: red;
}
.left {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 100%;
}
.right {
position: absolute;
top: 0;
right: 0;
width: 200px;
height: 100%;
}
二、自身浮动法：左栏左浮动，右栏右浮动，中间栏放最后
这种方式需要注意三个div的顺序，左右两栏的顺序不分先后，但是中间一栏必须放在最后。
此方法的优点是：代码足够简洁与高效
缺点是：中间主体存在克星，clear:both属性。如果要使用此方法，需避免明显的clear样式。
<body>
<div class="left"></div>
<div class="right"></div>
<div class="main"></div>
</body>
.main {
margin :0 200px;
}
.left {
float: left;
width: 200px;
height: 100%;
}
.right {
float: right;
width: 200px;
height: 100%;
}
三、margin负值法：左右两栏均左浮动，左右两栏采用负的margin值。中间栏被宽度为100%的浮动元素包起来。
左右两栏div的顺序不分先后，但是主体部分div要放前面。
此方法的优点在于：三栏相互关联，可谓真正意义上的自适应，有一定的抗性——布局不易受内部影响。
缺点在于：相对比较难理解些，上手不容易，代码相对复杂。出现百分比宽度，过多的负值定位，如果出现布局的bug，排查不易。
<body>
<div class="main">
<div class="content"></div>
</div>
<div class="left"></div>
<div class="right"></div>
</body>
.main {
float: left;
width:100%;
}
.content {
margin:0 200px;
height:100%;
}
.left {
float: left;
width: 200px;
margin-left: -100%;
}
.right {
float: left;
width: 200px;
margin-left: -200px;
}
二、CSS 方面
1、css盒模型有哪些及区别？
IE盒子模型box-sizing:border-box;（怪异模式）
W3C标准盒子模型 box-sizing:content-box;（标准模式）默认模式
2、同上问题，怎么相互转换？
来说说为什么要将标准盒模型转换为IE盒模型
为什么IE盒模型更容易开发？先来解决这个问题。从上面两张图片对比可以看出来，标准的盒模型padding，border是不算在宽度之内的，所以当你比如要在一个容器里并排显示两个同样的盒子。你用标准模型时肯定会这样设置每个盒子width:50%.但是当你查看时会发现两个盒子紧紧挨在一起实在是不美观，所以你又设置padding:0 5%；然而这时候两个盒子宽度又超过了大容器的总宽度，所以你又得去调整盒子的width:40% 这样确实可以解决问题，可是这样你不觉得很不方便吗。。好了这时候就可以看出IE盒模型的好处了。就将两个盒子的宽度设置为50%，这时候就算你再怎么去调整padding都会在两个盒子的内部去调整，不会再影响布局。简直方便到不要不要的~~
box-sizing 属性
3、页面导入样式时，使用link和@import有什么区别？
1.link属于HTML标签，除了加载CSS外，还能用于定义RSS，定义rel连接属性等作用；而@import是CSS提供，只能加载CSS;
2.页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载；
import是CSS2.1提出的，只在IE5以上才能被识别，而link是HTML标签，无兼容问题；
4、清楚浮动有哪些方式？比较好的方式是哪一种？
1、父级div定义height。
2、结尾处加空div标签clear：both。
3、父级div定义伪类：after和zoom。
4、父级div定义overflow：hidden。
5、父级div定义overflow：auto。
6、父级div也浮动，需要定义宽度。
7、父级div定义display：table。
8、结尾处加br标签clear:both。
比较好的是第3种，好多网站都这样用
5、CSS实现垂直水平居中？
HTML 结构
<div class="wrapper">
<div class="content"></div>
</div>
CSS 结构
.wrapper {
position: relative;
}
.content {
width: 200px;
height: 200px;
position: absolute; //父元素需要相对定位
top: 50%;
left: 50%;
margin-top: -100px ; //二分之一的height，width
margin-left: -100px;
}
第二种方法
.content {
position: absolute;
left: 50%;
top: 50%;
width: 200px;
height: 200px;
transform: translate(-50%,-50%);
}
6、css选择符有哪些？哪些属性可以继承？
类型选择符（body）、群组选择符（h1，h2，h3，span）、包含选择符（h2 span）、ID选择符（#id）、Class选择符（.content）
CLASS属性，伪类A标签，列表ul、li、dl、dd、dt可以继承
优先级算法：
1.优先级就近原则，同权重情况下样式定义最近者为准;
2.载入样式以最后载入的定位为准;
3.!important > id > class > tag
4.important 比 内联优先级高，但内联比 id 要高
7、CSS3新增伪类？
1) p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
2) p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
3) p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
4) p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。
5) p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。
6) :enabled :disabled 控制表单控件的禁用状态。
7) :checked 单选框或复选框被选中。
8、CSS3有哪些新特性？
1) CSS3实现圆角（border-radius），阴影（box-shadow），
2) 对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）
3) transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋转,缩放,定位,倾斜
4) 增加了更多的CSS选择器 多背景 rgba
5) 在CSS3中唯一引入的伪元素是 ::selection.
6) 媒体查询，多栏布局
7) border-image
9、display:none;与visibility:hidden的区别是什么？
display:none;使用该属性后，HTML元素（对象）的宽高，高度等各种属性值都将“丢失”；
visibility:hidden;使用该属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在，也即是说它仍然具有高度，宽度等属性值。
10、怎么解决边界重叠问题？
11、display:inline-block的间隙问题和解决办法？
**原因：**inline-block元素间有空格或是换行，因此产生了间隙。
三、JS 方面
1、js三种存储方式区别？
sessionStorage、localStorage、cookier
相同点：都保存在浏览器端，同源的
不同点：
①传递方式不同
cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
②数据大小不同
cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。
存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。
sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
③数据有效期不同
sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；
localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；
cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
④作用域不同
sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；
localStorage 在所有同源窗口中都是共享的；
cookie也是在所有同源窗口中都是共享的。
Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。
Web Storage 的 api 接口使用更方便。
2、null 与 undefined 区别？
null： Null类型，代表“空值”，代表一个空对象指针，使用typeof运算得到 “object”，所以你可以认为它是一个特殊的对象值。
undefined： Undefined类型，当一个声明了一个变量未初始化时，得到的就是undefined。
3、this 指向几种情况？
1：如果一个函数中有this，但是它没有被上一级的对象所调用，那么this指向的就是window，这里需要说明的是在js的严格版中this指向的不是window，但是我们这里不探讨严格版的问题，你想了解可以自行上网查找。
2：如果一个函数中有this，这个函数有被上一级的对象所调用，那么this指向的就是上一级的对象。
3：如果一个函数中有this，这个函数中包含多个对象，尽管这个函数是被最外层的对象所调用，this指向的也只是它上一级的对象。
4、继承几种方式？
5、防止事件冒泡与取消默认事件、事件捕获？
防止冒泡
w3c的方法是e.stopPropagation()，IE则是使用e.cancelBubble = true
取消默认事件
w3c的方法是e.preventDefault()，IE则是使用e.returnValue = false;
DOM事件流（event flow ）存在三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。
事件捕获（event capturing）：通俗的理解就是，当鼠标点击或者触发dom事件时，浏览器会从根节点开始由外到内进行事件传播，即点击了子元素，如果父元素通过事件捕获方式注册了对应的事件的话，会先触发父元素绑定的事件。
事件冒泡（dubbed bubbling）：与事件捕获恰恰相反，事件冒泡顺序是由内到外进行事件传播，直到根节点。
无论是事件捕获还是事件冒泡，它们都有一个共同的行为，就是事件传播，它就像一跟引线，只有通过引线才能将绑在引线上的鞭炮（事件监听器）引爆，试想一下，如果引线不导火了，那鞭炮就只有一响了！！！
dom标准事件流的触发的先后顺序为：先捕获再冒泡，即当触发dom事件时，会先进行事件捕获，捕获到事件源之后通过事件传播进行事件冒泡。不同的浏览器对此有着不同的实现，IE10及以下不支持捕获型事件，所以就少了一个事件捕获阶段，IE11、Chrome 、Firefox、Safari等浏览器则同时存在。
说到事件冒泡与捕获就不得不提一下两个用于事件绑定的方法addEventListener、attachEvent。当然还有其它的事件绑定的方式这里不做介绍。
addEventListener(event, listener, useCapture)
·参数定义：event---（事件名称，如click，不带on），listener---事件监听函数，useCapture---是否采用事件捕获进行事件捕捉，
默认为false，即采用事件冒泡方式
addEventListener在 IE11、Chrome 、Firefox、Safari等浏览器都得到支持。
attachEvent(event,listener)
·参数定义：event---（事件名称，如onclick，带on），listener---事件监听函数。
attachEvent主要用于IE浏览器，并且仅在IE10及以下才支持，IE11已经废了这个方法了（微软还是挺识趣的，慢慢向标准靠拢）。
6、什么是Ajax，同步与异步区别，创建一个Ajax？
AJAX是“Asynchronous JavaScript and XML”的缩写。他是指一种创建交互式网页应用的网页开发技术。
同步：阻塞的，浏览器向服务器请求数据，服务器比较忙，浏览器一直等着(页面白屏)，直到服务器返回数据，浏览器才能显示页面。
异步：非阻塞的，浏览器向服务器请求数据，服务器比较忙，浏览器可以自如的干原来的事情(显示页面)，服务器返回数据的时候通知浏览器一声，浏览器把返回的数据再渲染到页面，局部更新。
//ajax编写步骤//
//1、创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
//2、设置请求参数
xhr.open(请求方式,请求地址,异步或同步);
//3、设置回调函数
xhr.onreadystatechange = function(){
if(xhr.reasyState===4){
if(xhr.status === 200) {
//5、接受响应
console.log(xhr.responseText);
}
}
}
// 4、发送请求
xhr.send();
7、如何解决跨域问题？
理解跨域的概念：协议、域名、端口都相同才同域，否则都是跨域。
出于安全考虑，服务器不允许ajax跨域获取数据，但是可以跨域获取文件内容，所以基于这一点，可以动态创建script标签，使用标签的src属性访问js文件的形式获取js脚本，并且这个js脚本中的内容是函数调用，该函数调用的参数是服务器返回的数据，为了获取这里的参数数据，需要事先在页面中定义回调函数，在回调函数中处理服务器返回的数据，这就是解决跨域问题的主流解决方案。
8、GET和POST的区别，何时使用POST?
GET:一般用于信息获取，使用URL传递参数，对所发送信息的数量也有限制，一般在2000个字符，有的浏览器是8000个字符。
POST：一般用于修改服务器上的资源，对所发送的信息没有限制。
以下情况中，请使用POST请求：
①、无法使用缓存文件(更新服务器上的文件或数据库)
②、向服务器发送大量数据(POST没有数据量限制)
③、发送包含未知字符的用户输入时，POST比GET更稳定也更可靠。
9、一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？
分为4个步骤：
1. 当发送一个 URL 请求时，不管这个 URL 是 Web 页面的 URL 还是 Web 页面上每个资源的 URL，浏览器都会开启一个线程来处理这个请求，同时在远程 DNS 服务器上启动一个 DNS 查询。这能使浏览器获得请求对应的 IP 地址。
2. 浏览器与远程 Web 服务器通过 TCP 三次握手协商来建立一个 TCP/IP 连接。该握手包括一个同步报文，一个同步-应答报文和一个应答报文，这三个报文在 浏览器和服务器之间传递。该握手首先由客户端尝试建立起通信，而后服务器应答并接受客户端的请求，最后由客户端发出该请求已经被接受的报文。
3. 一旦 TCP/IP 连接建立，浏览器会通过该连接向远程服务器发送 HTTP 的 GET 请求。远程服务器找到资源并使用 HTTP 响应返回该资源，值为 200 的 HTTP 响应状态表示一个正确的响应。
4. 此时，Web 服务器提供资源服务，客户端开始下载资源。
网友评论