1.什么是盒模型
盒模型分为标准盒模型和怪异盒模型:
1.标准盒模型
width和height 指的是你盒模型中content中宽度和高度。
2.怪异盒模型
盒模型大小= width + height+ padding + border(至于content 部分它可以自动计算);
2.行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？行内元素和块级元素有什么区别？
1、块级元素
+ 独占一行
+ 写宽、高可以起作用
+ 排列方式上：上下排列
+ h1-h6 、p、div、ul li ol dl dt dd
2、行内元素
+ “比较和谐”，允许其它元素和它共占一行
+ 写宽高不起作用，它的大小是由自身内容决定的
+ 排列方式：左右
+ a b span img input select strong
3、行内块元素
+ “比较和谐”，允许其它元素和它共占一行
+ 写宽高起作用
+ 排列方式：左右
+ img
使用display属性能够将三者任意转换：
display:block;转换为块状元素
display:inline;转换为行内元素
display:inline-block;转换为行内块状元素
3.简述src和href的区别
+ href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。
+ src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。
+当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。
4. 什么是css Hack
CSS hack主要是用来解决浏览器的兼容问题，能够针对不同的浏览器去写不同的CSS，而且还能在不同的浏览器中得到想要的页面效果
+ hack就是由于不同厂商的浏览器，如Internet Explorer,Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，对CSS的支持不同，所以生成的页面效果也不一样，在这个时候就需要我们针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中得到我们想要的页面效果。换句话说， hack的目的就是使你的CSS代码兼容不同的浏览器
例如：我们在写CSS3属性时经常会碰到针对不同的浏览器需要写不同的代码，如下所示
animation:5s;/*标准版*/
-moz-animation: 5s;/* Firefox */
-webkit-animation:5s;/* Safari 和 Chrome */
-o-animation:5s;/* Opera */
!important问题：
IE6及以下的版本中的!important标识符存在问题，如果同一属性的另一个样式出现在同一样式声明块中，就会导致该标识符被忽略。这可用于提供IE6及其他浏览器忽略的特殊属性值。但在IE7及以上这个问题就不存在了
<style>
p
{
background: green !important;
background: red;
}
</style>
<body class="page-body">
<p>TEST</p>
5.什么叫优雅降级和渐进增强
+ 渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
+ 优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
区别：
优雅降级是从复杂的现状开始，并试图减少用户体验的供给，
而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。
降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带
6.px和em的区别
+ px像素（Pixel），是相对于显示器屏幕分辨率而言的。
+ em是相对长度单位。相对于当前对象内文本的字体尺寸,多理解父级设定font-size的尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
em有如下特点：
1.em的值并不是固定的。
2.em会继承父级元素的字体大小。
因此需要强调：
1.body选择器中声明font-size=62.5%
2.将原来的px数值除以10，然后换上em为单位
3.重新计算那些被放大的字体的em值，避免字体大小重复声明。
7.HTML5 为什么只写一行
html5的doctype，现代浏览器都认识它。
8.Http的状态码有哪些
2xx:表示成功
200 OK 表示所有东西都正常
204 表示请求成功,但是服务端没有内容给你
3xx: 表示重定向
301 永久重定向(当访问一个永久重定向的网站的时候,一个域名被指向一个其他网站,且是永久的)
302 临时重定向但是会在重定向的时候改变 method: 把 POST 改成 GET，于是有了 307
304 走缓存(服务端觉得你之前请求过这个东西,而且服务器上的那一份没有发生变化,告诉客户端用缓存 就行)
307，Temporary Redirect。临时重定向，在重定向时不会改变 method
4xx: 表示客户端错误
400 参数传递不当,导致的错误
401 权限不够导致的
403 服务端已经理解请求,但是拒绝响应
404 客户端请求的资源或者数据不存在(发现请求接口404,有两种情况一种是咱们写错接口了或者服 务端还没部署)
5xx: 表示服务端错误(遇到以5开头的错误去找服务端错误)
500 服务端内部错误
502 网关错误
9.一次完整的HTTP事务是怎么一个过程
a. 域名解析
b. 发起TCP的3次握手
c. 建立TCP连接后发起http请求
d. 服务器端响应http请求，浏览器得到html代码
e. 浏览器解析html代码，并请求html代码中的资源
f. 浏览器对页面进行渲染呈现给用户
10.HTTPS是如何实现加密
HTTPS就是使用SSL/TLS协议进行加密传输，让客户端拿到服务器的公钥，然后客户端随机生成一个对称加密的秘钥，使用公钥加密，传输给服务端，后续的所有信息都通过该对称秘钥进行加密解密，完成整个HTTPS的流程。
11.浏览器是如何渲染页面的
1.解析HTML文件，创建DOM树。
自上而下，遇到任何样式（link、style）与脚本（script）都会阻塞（外部样式不阻塞后续外部脚本的加载）。
2.解析CSS。处理CSS标记并构建CSSOM树。
优先级：浏览器默认设置<用户设置<外部样式<内联样式<HTML中的style样式；
3.将CSS与DOM合并，构建渲染树（Render Tree）
4.布局和绘制，重绘（repaint）和重排（reflow）
参考： www.jianshu.com/p/b7b7a5904…
12.浏览器的内核有哪些？分别有什么代表的浏览器
Trident 内核：IE，搜狗高速浏览器等
Gecko 内核：Firefox（火狐浏览器），Netscape6及以上版本
Webkit 内核：Safari 、曾经的 Chrome
Blink 内核：现在 Chrome 内核是 Blink，Opera现已改用Google Chrome的Blink内核
13.页面导入时，使用link和@import有什么区别
1.类型不同
link: 是html标签
@import: 是css语法，只能用于加载CSS;
2. 加载时机不同
link: 引入的样式在页面加载时同时加载
@import: 是在页面加载完之后
3. 兼容性
link: 是XHTML标签没有兼容性问题
@import: 不兼容ie5以下
4.动态改变
link: 支持使用Javascript控制DOM
@import: 不支持js操作dom来控制。
14.如何优化图像，图像格式的区别
1、不用图片，尽量用css3代替。
2、使用矢量图SVG替代位图。
3、使用恰当的图片格式
4、按照HTTP协议设置合理的缓存。
5、使用字体图标webfont、CSS Sprites等。
6、用CSS或JavaScript实现预加载。
15.列举你了解Html5. Css3 新特性 www.cnblogs.com/star91/p/56…
16.可以通过哪些方法优化css3 animation渲染
+ 减少动画元素
减少动画元素，是动画性能优化中首先需要完成的。通过审查页面动画 DOM 元素结构，去除不必要的动画元素，减少元素的数量，相应地会减少布页面局和绘制的时间。
+ 尽量使用 fixed、absolute 定位
对于动画元素，尽量使用用 fixed、absolute 定位方式，避免影响到其他节点重排。
+ 尽量只改变transform和opacity
能用 transform、opacity 优先使用，其属性的改变不会发生重排和重绘。如位移操作的，可以使用translate 来实现，渐隐渐现效果可以使用 opacity 属性来实现。
+ 恰当开启硬件加速效果
对动画元素应用transform: translate3d(0, 0, 0)、will-change: transform 等来开启硬件加速。通常开启硬件加速可以让动画变得更加流畅。但这里需注意，在不需要的时候需去掉避免过多的内存消耗。
17.列举几个前端性能方面的优化
18.浏览器的存储技术有哪些
+ 1、Cookie
+ 2、LocalStorage
+ 3、SessionStorage
+ 4、UserData、GlobalStorage、Google Gear
+ 5、Flash ShareObject
20.css定位方式
默认的是static
相对定位：relative
+ 相对定位是相对自身的
+ 没有脱离文档流,层级高于普通文档流
+ 给绝对定位做参照物
绝对定位：absolute
+ 脱离文档流,层级高于普通文档流
+ 绝对定位的元素在找参照物的时候，不能是同级元素(不能是兄弟级)
+ 给绝对的元素设置参照物的时候，如果这个参照物本身具备position:absolute 或者position:fixed 或者position:relative;只要三者之一，就不用再写position:relative;
+ 浏览器在找参照物的时候遵循“就近原则”，想要看某个元素的参照物是谁，浏览器会以这个元素为目标，一级一级向上查找，如果遇到上面的三者之一就停止。如果找到最后都没有，那参照物就是body。
+ 正常的，宽度是可继承的，如果这个元素没写宽度，用了绝对定位，那么它的宽度只能是自身大小内容决定。（不能继承了，和浮动的那个特点一样）
固定定位：fixed
+ 固定定位是相对整个窗口来说的，无论滚动条怎么滚动，始终相对窗口固定。
+ 脱离文档流
21.尽可能多的写出浏览器兼容性问题
+ 1. 不同浏览器的标签默认的margin和padding不同 => 可以使用Normalize来清除默认样式
+ 2. 块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大 => 在float的标签样式控制中加入 display:inline;将其转化为行内属性
+ 图片默认有间距 =>使用float属性为img布局
+ margin值合并问题
#有两个盒子，它们是上下关系，当我们给上面的盒子设置margin-bottom：value1; 又给下面的盒子设置了margin-top：value2; 那它俩直接的距离并不是距离之和，而是选择最大的那个距离。#
+ 为父元素添加overflow:hidden;
+ margin值穿透
#一个父盒子里面套了一个小盒子，如果这个父盒子里面没有文字，也没有边框（border），也没有padding-top （这三个条件中没有一个满足的），当我们给小盒子设置margin-top的时候，会发现父盒子会跟着一起往下掉，这个现象就叫做margin值穿透。#
+ 给父盒子加border; transparent代表透明色
+ 给父盒子加oveflow:hidden;
+ 既然margin-top有这样的问题，我们在遇到这种情况的时候，可以给父盒子添加padding-top来代替。
22.垂直上下居中的方法
<style>
.box {
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px; （减去盒子的一半）
margin-left: -50px;
width: 100px;
height: 100px;
}
</style>
========================
/* 未知宽高 */
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
==========================
.box {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
===============================
[父级] {
display: flex;
justify-content: center;
align-items: center;
}
23.响应式布局原理 blog.csdn.net/sinat_17775…
25.清除浮动的方法
清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题
浮动的特点
+ 脱离普通文档流
+ 浮动的方向是参照的父级。
+ 宽度本身是可继承的，但是一旦给元素设置浮动，宽度就不能再继承父亲的宽，它的宽度是由自身内容决定的。（这个盒子本身不写宽的时候）
+ 行内元素本身设置宽高不起作用，但是这个元素一旦浮动，写宽高也可以起作用。
**清除浮动的方法**
+ 浮动元素的父级没有高度，加一个高度
+ 给浮动元素的父级增加overflow:hidden;
+ 给浮动元素父级的末尾增加一个元素，给这个元素设置clear:both;
+ 谁浮动，就给谁的父级增加一个类名clearfix。（前提把下面的样式粘贴到css部分）本质和第三种是一样。
+ 并不是真正的在结构上添加元素，而是通过样式去增加，所以这种元素叫做“伪元素”。（通常可以用来写列表前面的小icon）
<!--clearfix-->
.clearfix::after{
content:"";
display:block;
visibility: hidden;
font-size:0;
height:0;
clear:both;
}
.clearfix{
*zoom:1
}
<!--伪元素-->
<style>
p::before{
content:"棒棒哒！";
display:inline-block;
color:red;
font-size:16px;
}
p::after{
content:"哇哇哇~";
display:inline-block;
color:red;
font-size:16px;
}
</style>
<p>我是浮动</p>
26.http协议和tcp协议
TCP是传输层协议，定义数据传输和连接方式的规范。握手过程中传送的包里不包含数据，三次握手完毕后，客户端与服务器才正式开始传送数据。
HTTP 超文本传送协议(Hypertext Transfer Protocol )是应用层协议，定义的是传输数据的内容的规范。
HTTP协议中的数据是利用TCP协议传输的，特点是客户端发送的每次请求都需要服务器回送响应，它是TCP协议族中的一种，默认使用 TCP 80端口。
好比网络是路，TCP是跑在路上的车，HTTP是车上的人。每个网站内容不一样，就像车上的每个人有不同的故事一样。
27.刷新页面，js请求一般会有哪些地方有缓存处理
dns 缓存，cdn 缓存，浏览器缓存，服务器缓存。
28.如何对网站的文件和资源进行优化
29.你对网页标准和W3C重要性的理解 www.jianshu.com/p/9bd5cb016…
30.Http和https的区别
1、HTTPS协议需要到CA申请证书，一般免费证书较少，因而需要一定费用。(以前网易官网是http，而网易邮箱是 https。)
2、HTTP是超文本传输协议，信息是明文传输，HTTPS则是具有安全性的 SSL加密传输协议。
3、HTTP 和 HTTPS使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。
4、HTTP 的连接很简单，是无状态的。HTTPS协议是由 SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比 HTTP 协议安全。(无状态的意思是其数据包的发送、传输和接收都是相互独立的。无连接的意思是指通信双方都不长久的维持对方的任何信息。)
31.data-属性的作用
data-属性用于储存私有的自定义数据，data-属性可以让我们在所有html元素上增加自定义data属性，存储的data属性能被JavaScript调用。
data-属性不应该包含任何大写字母，并且在data-后必须最少拥有一个字符，属性值可以是任意字符串
<!--取值方法:-->
// getAttribute
var id = document.getElementById('id');
var data = id.getAttribute(‘data-xxx’);
// dataset
var id = document.getElementById('id');
id.dataset.xxx; //取值
id.dataset.xxx = 'xxx'; //赋值
id.dataset.xxx2 = 'xxx2'; //新增
delete id.dataset.xxx; //删除
// JQuery data
var data = $('#id').data('xxx'); //取值
$('#id').data('xxx','xxx1'); //赋值 新增
$('#id').removeData('xxx'); //删除
// JQuery attr
var data = $('#id').attr('data-xxx'); //取值
$('#id').attr('data-xxx','xxx1'); //赋值 新增
$('#id').removeAttr('data-xxx'); //删除
32.如何让Chrome浏览器显示小于12px的文字
-webkit-transform:scale(0.833);
/*这个数字0.833，是缩放比例，可以根据你自己的情况不同而不同。*/
33.哪些操作会引起页面回流（Reflow）
改变窗口大小，字体大小，增加或者移除样式表，内容变化，操作class属性，新增或者减少，js操作dom, offset相关属性计算，
34.如何实现页面每次打开时清除本页缓存
1.设置HTTP请求头
2.url请求地址设置随机数;
35.http的几种请求方法和区别
+ GET系列
+ GET : 向特定的资源发出请求，它的本质就是发送一个请求来取得服务器上的某一资源。
+ HEAD : 只想获取响应头内容;
+ OPTIONS 试探性请求，发个请求给服务器，测试服务器的功能性。
+ DELETE :一般应用于告诉服务器，从服务器上删除点东西
+ POST系列
+ POST : 向指定资源提交数据进行处理请求（例如提交表单或者上传文件等）。数据被包含在请求体中。
+ PUT：向指定资源位置上传最新内容。一般是想让服务器把我传递的信息存储到服务器上（一般应用于文件和大型数据内容）
+ 区别：
+ GET系列一般用于从服务器获取信息，POST系列一般用于给服务器推送信息;
+ GET采用：问号传参; POST采用：设置请求主体; GET传递参数大小有限制，URL有最长大小限制（IE一般限制2KB,其余浏览器一般限制4-8K，超过长度的部分自动被浏览器截取了）
+ GET会产生缓存（缓存不是自己可控制的），因为请求的地址（尤其是问号传参的信息一样），浏览器有时候会认为你要和上次请求的数据一样，拿的是上一次信息;
+ GET相比较POST来说不安全:因为参数暴露在 URL 中，有一种技术叫做URL劫持，这样别人可以获取或者篡改传递信息；而POST基于请求主体传递信息，不容易被劫持;
36.前端需要注意哪些SEO
1.合理的title，description，keyswords 搜索引擎对这三项的权重逐个减小，title 值强调重点即可，重要的关键词出现不要超过两次，而且要靠前。
2.不同页面的tilte要有所不同；description把页面的内容高度概括，长度合适，不可过分堆叠关键词，不同页面description有所不同。keyswords列举出重要的关键词即可。
3.语义化的HTML代码，符合W3C 规范：语义化代码有利于搜索引擎理解网页。
4.重要的内容HTML代码放在前面：搜索引擎抓取HTML 的顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容一定会被抓取。
5.重要的内容不要用js输出，爬虫不会执行js获取内容。
6.尽量少用iframe ，搜索引擎不会抓取iframe中的内容。
7.非装饰的图片必须加alt 。
8.提高网站速度：网站速度是搜索引擎排序的一个重要指标。
37.的title和alt有什么区别
+ title 可提高图片高可访问性，搜索引擎会重点分析。鼠标滑过时显示的文字提示，用户体验上很重要。当然不必要所有的img标签都加此属性，比方说logo这样比较重要或者说用户会体验到的图片内容建议一定要加此属性。
+ alt属性:图片的alt属性则是起到替代文字的作用，当图片不存在或者载入出错时候，那么该文字才会显示，以提高用户体验
38.从浏览器地址栏输入url到显示页面的步骤
1、输入网址
2、DNS解析
3、建立tcp连接
4、客户端发送HTTP请求
5、服务器处理请求 
6、服务器响应请求
7、浏览器展示HTML
8、浏览器发送请求获取其他在HTML中的资源。
39.如何进行网站性能优化 blog.csdn.net/ZZ_SUPERR/a…
40.语义化的理解
用正确的标签做正确的事情！
html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；
在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的。
搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。
便于团队开发和维护；
41.HTML5的离线储存怎么使用，工作原理能不能解释一下？
在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件。
HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。
首先，在html页面头部加入一个manifest的属性:
<!DOCTYPE HTML>
<html manifest = "cache.manifest">
...
</html>
然后书写cache.manifest文件：
CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.html
42.浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢
在离线的情况下，浏览器发现html头部有manifest属性，它会请求manifest文件，如果是第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储，如果已近访问过app并且资源已经立宪存储了，那么浏览器就会使用立宪的资源存储了，然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。离线的情况下，浏览器就直接使用离线存储的资源。
43.iframe有那些缺点？
1.frame会阻塞主页面的Onload事件；
2.frame和主页面共享链接池，而浏览器对相同城的链接有限制，所以会影响页面的并行加载，会产生很多页面，不容易管理；
3.不利于seo;
4.iframe框架页面会增加服务器的http请求，对于大型网站不可取
5.很多的移动设备（PDA手机）无法完全显示框架，设备兼容性差。
6.iframe框架页面会增加服务器的http请求，对于大型网站是不可取的。
44.WEB标准以及W3C标准是什么?
web标准：将结构、表现、行为分离，使其更具有模块化。
w3c标准：标签字母要小写，双标签要闭合，标签不允许随意嵌套
尽量使用外部样式和外链js，使结构、表现、行为分为三块，这样可以提高页面渲染速度。
样式尽量少用行内样式，id和class名要做到见名知意。
不需要变动页面内容，便可提供打印版本，不需要提供复制内容，提高网站易用性。
45.Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?
46.HTML全局属性(global attribute)有哪些
class :为元素设置类标识
data-* : 为元素增加⾃定义属性
draggable : 设置元素是否可拖拽
id : 元素 id ，⽂档内唯⼀
lang : 元素内容的的语⾔
style : ⾏内 css 样式
title : 元素相关的建议信息
47.Canvas和SVG有什么区别？ www.cnblogs.com/qinglaoshi/…
48.如何在页面上实现一个圆形的可点击区域？ www.jb51.net/article/144…
49.网页验证码是干嘛的，是为了解决什么安全问题
+ 网页的登录验证码，属于双因素认证应用到账号安全的范畴，作用是确保是用户本人进行登录，大大降低了由于账号被盗，导致的非授权登录行为。网页的注册验证码，是验证注册者的身份，防止恶意注册，确保用户的有效性。
+ 可以防止恶意pojie密码，刷票，论坛灌水
+ 有效防止黑客对某人特定注册用户用特定程序暴力pojie
50.CSS选择器有哪些？哪些属性可以继承？
可继承的属性
字体系列
font、 font-family、font-weight、font-size、font-style
文本xilie
text-align、line-height、color
51.CSS优先级算法如何计算？ blog.csdn.net/qq_41155191… www.jianshu.com/p/82412cc67…
52.CSS3有哪些新特性？ www.html.cn/qa/css3/136…
53.请解释一下CSS3的flexbox（弹性盒布局模型）,以及适用场景？ www.jianshu.com/p/4e23aee6d…
54.用纯CSS创建一个三角形的原理是什么？
<style>
#triangle {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 50px solid blue;
}
</style>
</head>
<body>
<div id="triangle"></div>
</body>
55.常见的兼容性问题？
1、不同浏览器的标签默认的margin和padding不一样。*{margin:0;padding:0;}
2、 IE6双边距bug：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大。hack：display:inline;将其转化为行内属性。
3、IE下，可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性；Firefox下，只能使用getAttribute()获取自定义属性。解决方法:统一通过getAttribute()获取自定义属性。
4、Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。或者怎么让Chrome支持小于12px 的文字？p{font-size:10px;-webkit-transform:scale(0.8);} //0.8是缩放比例
5、超链接访问过后hover样式就不出现了，被点击访问过的超链接样式不再具有hover和active了。解决方法是改变CSS属性的排列顺序:L-V-H-A ( love hate ): a:link {} a:visited {} a:hover {} a:active {}
6、chrome中，使用collapse值和使用hidden没有区别。
firefox，opera和IE，使用collapse值和使用display：none没有什么区别。
56.为什么要初始化CSS样式
1.浏览器差异
不同浏览器对有些标签的默认值是不同的，如果没对css初始化会出现浏览器之间的页面显示差异
2.提高编码质量
如果不初始化，整个页面做完会很糟糕，重复的css样式很多
57.CSS里的visibility属性有个collapse属性值？在不同浏览器下以后什么区别？
+ 对于一般的元素，它的表现跟display:hidden是一样的。
+ 如果这个元素是table相关的元素，例如table行，table group，table列，table column group，它的表现却跟display: none一样，也就是说，它们占用的空间也会释放。
+ 在不同浏览器下的区别
+ 在谷歌浏览器里，使用collapse值和使用hidden值没有什么区别。
+ 在火狐浏览器、Opera和IE11里，使用collapse值的效果就如它的字面意思：table的行会消失，它的下面一行会补充它的位置。
58.display:none与visibility：hidden的区别？
+ display:none：该元素以及它的所有后代元素都会隐藏，隐藏后的元素无法点击，无法使用屏幕阅读器等辅助设备访问，占据的空间消失。
+ visibility: hidden 也可以隐藏这个元素，但是隐藏元素仍需占用与未隐藏时一样的空间，也就是说虽然元素不可见了，但是仍然会影响页面布局。
+ 具有继承性，给父元素设置visibility:hidden;子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则子元素又会显示出来。这个和display: none有着质的区别
+ visibility: hidden不会影响计数器的计数，如图所示，visibility: hidden虽然让一个元素不见了，但是其计数器仍在运行。这和display: none完全不一样
+ 同时transition过渡是支持visibility属性的，因此在使用过渡动画的时候，想让元素实现淡入淡出效果来控制显隐的可以使用visibility:hidden。
59.position跟display、overflow、float这些特性相互叠加后会怎么样？
1.如果元素的display为none,那么元素不被渲染,position,float不起作用,
2.如果元素拥有position:absolute;或者position:fixed;属性那么元素将为绝对定位,float不起作用.
3.如果元素float属性不是none,元素会脱离文档流,根据float属性值来显示.
4.有浮动,绝对定位,inline-block属性的元素,margin不会和垂直方向上的其他元素margin折叠.
60.对BFC规范(块级格式化上下文：block formatting context)的理解？
BFC 就是“块级格式化上下文”的意思,创建了 BFC 的元素就是一个独立的盒子
会触发为 BFC ：
1、浮动元素，float 除 none 以外的值
2、绝对定位元素，position（absolute，fixed）
3、display 为以下其中之一的值 inline-block，table-cell，table-caption
4、overflow 除了 visible 以外的值（hidden，auto，scroll）
61.为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式？
+ 浮动float最开始出现的意义是为了让文字环绕图片而已，但人们发现，如果想要三个块级元素并排显示，都给它们加个float来得会比较方便。
+ 清除浮动是指清除由于子元素浮动带来父元素高度塌陷的影响。
+ 为父元素设置高度
+ 给父元素添加overflow:hidden
+ 在父元素的最后设置clear:both
+ 伪元素；只需要给父元素追加fix类就能达到清除浮动的效果
```
.fix::after {
content:".";
display:block;
height:0;
visibility:hidden;
clear:both;
}
```
62.上下margin重合的问题
+ 外层元素padding代替
+ 外层元素 overflow:hidden;
+ 内层元素绝对定位 postion:absolute:
+ 内层元素 加float:left;或display:inline-block;
+ 内层元素padding:1px;
+ 内层元素透明边框 border:1px solid transparent;
63.设置元素浮动后，该元素的display值是多少？
display:block
64.移动端的布局用过媒体查询吗？ www.cnblogs.com/fengxiaopia…
65.CSS优化、提高性能的方法有哪些？
66.浏览器是怎样解析CSS选择器的？ developer.aliyun.com/ask/264822
67.在网页中的应该使用奇数还是偶数的字体？为什么呢？
偶数字号相对更容易和 web 设计的其他部分构成比例关系
68.margin和padding分别适合什么场景使用?
margin:
需要在border外侧添加空白时；
空白处不需要背景（色）时；
上下相连的两个盒子之间的空白，需要相互抵消时。
padding：
需要在border内测添加空白时；
空白处需要背景（色）时；
上下相连的两个盒子之间的空白，希望等于两者之和时。
69.元素竖向的百分比设定是相对于容器的高度吗？
对于竖直方向的margin和padding，参照父元素的宽度。
对于水平方向的margin和padding，也是参照父元素的宽度。
70.全屏滚动的原理是什么？用到了CSS的哪些属性？
有点类似于轮播，整体的元素一直排列下去，假设有5个需要展示的全屏页面，那么高度是500%，只是展示100%，剩下的可以通过transform进行y轴定位，也可以通过margin-top实现
71.什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？
响应式网站设计(Responsive Web design)的理念是：集中创建页面的图片排版大小，可以智能地根据用户行为以及使用的设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相对应的布局，无论用户正在使用笔记本还是iPad，我们 的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备。
响应式Web设计不仅仅是关于屏幕分辨率自适应以及自动缩放的图片等等，它更像是一种对于设计的全新思维模式, 如我们需要兼容不同屏幕分辨率、清晰度以及屏幕定向方式竖屏(portrait)、横屏(landscape)，怎样才能做到让一种 设计方案满足所有情况？
基本原理: 媒体查询 @media
兼容IE可以使用JS辅助一下来解决
72.::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用？
单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。（伪元素由双冒号和伪元素名称组成）;
:before/:after 的兼容性要比::before/::after好 ， 不过在H5开发中建议使用::before/::after比较好。
想让插入的内容出现在其它内容前，使用::before，否者，使用::after；
在代码顺序上，::after生成的内容也比::before生成的内容靠后；
如果按堆栈视角，::after生成的内容会在::before生成的内容之上。
73.position:fixed;在android下无效怎么处理？ www.jianshu.com/p/8ec85e64b…
74.如果需要手动写动画，你认为最小时间间隔是多久，为什么？
多数显示器的默认频率是60HZ，即每秒刷新60次。所以理论上的最小间隔是 1/60*1000ms = 16.7ms
75.li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？ blog.csdn.net/sjinsa/arti…
76.display:inline-block 什么时候会显示间隙 www.jianshu.com/p/dd99ac30e…
77.有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度
78.style标签写在body后与body前有什么区别？
79.CSS属性overflow属性定义溢出元素内容区的内容会如何处理? 参数是scroll时候，必会出现滚动条。 参数是auto时候，子元素内容大于父元素时出现滚动条。 参数是visible时候，溢出的内容出现在父元素之外。 参数是hidden时候，溢出隐藏。
默认为visible
80. 一行或多行文本超出隐藏
一行文本
.txt {
width: 200px;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
多行
.ljl {
width: 200px;
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
81.阐述一下CSS Sprites
，再利用 CSS 的"background-image"，"background-repeat"，"background-position" 的组合进行背景定位，background-position 可以用数字能精确的定位出背景图片的位置。这样可以减少很多图片请求的开销，因为请求耗时比较长；请求虽然可以并发，但是也有限制，一般浏览器都是6个。对于未来而言，就不需要这样做了，因为有了 http2。
82.png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp？ blog.csdn.net/ApologizeEr…
