前端面试题-1

1.css中单位px,em,rem的区别

px是相对长度单位，它是相对于显示器屏幕分辨率而言的。
比较稳定和精确，但在浏览器中放大或缩放浏览器页面时会出现页面混乱的情况。
em是相对长度单位，em是相对于父元素来设计字体大小的。如果当前对行内文本的字体尺寸未被人为设置，则相当于浏览器的默认字体尺寸。
em的值并不是固定的，它会继承父级元素的字体大小。
rem是css3新增的一个相对单位，REM是相对单位，是相对HTML根元素。
集相对大小和绝对大小的优点于一身，通过它可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

2.seo优化

a.关键词优化：meta标签的keywords,description属性值
b.网站结构和内容优化
c.内链和外链的优化

seo叫搜索引擎优化

设置网站的关键词和描述信息
设置网页的title
不要出现空链接
设置网络中图片的alt属性
在页面中多使用hx标签
优化网页相应速度
定期更新文章内容
购买外链
花钱买关键字（额外投入）

技巧：
d.所有的js,css采用外联方式，图片采用css精灵图，减少网络请求次数
e.利用布局：将重要的HTML内容代码放在最前
f.每个页面只能出现一次h1, h2可以多次；h1权限很高，普遍认定仅次于title
g.图片一定要写alt,title可选
h.非特殊性链接，链接地址一定要写href属性
i.网站结构呈扁平状树型，目录结构不宜过深，过深不利于搜索引擎的抓取
j.做好404页面，提升用户体验友好
k.尽量不使用iframe,重要的内容不要放在框架中，搜索引擎不会抓取到iframe里的内容

文档对象模型（DOM）：处理页面内容的方法和接口。浏览器对象模型（DOM）：与浏览器交互的方法和接口。
spa单页面应用程序如何做seo优化？
尽量的设置网页的title和描述信息
花钱买关键词
技术层面的:可以创建一个静态网站，专门用来做seo优化用。当判断当前是搜索引擎的蜘蛛对网站访问时，跳转到静态网页进行访问，当正常用户访问的时候就走正常的系统。是目前主流的一种解决方案

3.Sass,less

他们是css预处理器。他是css上的一种抽象层。他们是一种特殊的语法/语言编译成css
sass是一种动态样式语言，sass语法属于缩排语法，比css多出功能（变量，嵌套，运算，继承，颜色处理，函数等）更容易阅读。scss用{}取代了原来的缩进。
less也是一种动态样式语言，变量，继承，运算，函数。既可以在客户端上运行（IE6+，Webkit,Firefox）,也可以在服务器端运行（借助Node.js）。
区别：
编译环境不一样，sass Ruby环境，在服务端处理，less需要引入less.js来处理输出css到浏览器，也可以在开发环节中使用less然后后编译成css文件。
Sass 变量符号$，less变量符号@
less和sass中的变量会随着作用域的变化而不同
less没有输出设置，sass输出选项：nested(嵌套缩进 的css代码),compact（展开的多行css代码）,compressed（简介格式 的css代码）,expanded（压缩后的css代码）
sass支持条件语句，可以使用if{} else{} for{} 循环等待。而less不支持。
sass引入外部文件以_开头， less引用外部文件和css中的@import没什么差异。
sass有工具库compass，less有UI组件库Bootstrap。
Sass功能比less强大，less则相对清晰明了，易于上手，对编译环境要求比较宽松。
结构清晰，便于扩展，可以方便屏蔽浏览器私有语法差异，封装对浏览器语法差异的重复处理，减少无意义的机械劳动。可以轻松实现多重继承。完全兼容CSS代码，可以方便的应用到老项目中。Less只是在css语法上做了扩展，所以老的css代码可以与less代码一同编译。

4.src 与href的区别

src用于替换当前元素，source，指向外部资源的位置，指向的内容将会嵌入到文档当中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如JS脚本，img图片和frame元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载编译，执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。故js脚本放在底部而不是头部。

href用于在当前文档和引入资源之间确立关系。Hypertext Reference 指向网络资源所在位置，建立和当前元素（瞄点）或当前文档（链接）之间的链接，在文档中添加 那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。建议使用Link方式加载css，而不是使用@import方式。

5. 标准盒模型

标准w3c盒子模型：内容，内边距，外边距，边框：一般不计入盒子实际宽度
怪异盒：内容，内边距，外边距，边框：计入盒子的实际宽度

6.常见浏览器的兼容问题

（1）双边bug float引起的 使用display
（2）3像素问题，使用float引起的 使用display:inline -3px
（3）超链接hover 点击后失效，使用正确的书写顺序 link visited hover active
（4）IE z-index问题 给父级添加position:relative
（5）png透明 使用js代码改
（6）min-height 最小高度 ！important解决
（7）select在ie6下遮盖 使用iframe嵌套
（8）为什么没有办法定义1px左右的宽度容器（IE默认的行高造成的，使用over:hidden,zoom:0.08,line-height:1px）
（9）IE5-8不支持opacity，解决办法
.opacity{
Opacity:0.4
Filter:alpha(opacity=60);
-ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=60)”; /* for IE8 */
}
（10）用margin:0 auto;设置水平居中在IE下会失效，解决办法用text-align属性：
body{text-align:center};#content{text-align:left}
怪异模式下设置图片的padding会失效,怪异模式下Table中的字体属性不能继承上层的设置,怪异模式下white—space:pre会失效。

7.属性继承

可继承：font-size font-family color,ul li dl dd dt;
不可继承：border padding margin width height;

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.7
（6）媒体查询，多栏布局
（7）Border-image

9.如何对网站的文件和资源进行优化

（1）文件合并（目的是减少http请求）
（2）我呢见最小化/文件压缩（最小化css,js，减小文件体积）
（3）使用CDN托管
（4）缓存的使用
（5）将css放在页面最上面
（6）将script放在页面最下面
（7）避免在css中使用表达式
（8）将css，js都放在外部文件中
（9）减少DNS查询，将资源分布到恰当数量的主机名
（10）避免重定向
（11）移除重复脚本
（12）配置实体标签etag
（13）使用ajax缓存，让网站内容分批加载，局部更新
content方面：
减少http请求：合并文件，css精灵等。
减少DOM元素的数量
cookie方面：减少cookie大小
css方面：将样式表放到页面顶部
不使用css表达式
使用引入文件，不使用@import

10. 样式居中

{display:block;margin:0 auto}
{display:block;position:absolute;left:50%;right:50%;translate(-50%,-50%)}

11.css的content属性

css的content属性专门应用在before/after伪元素上，用来插入生成内容。最常用的应用是利用伪类清除浮动。

12.div+css布局较table布局的优点

结构与样式分离，代码语义性好，更符合HTML标准规范，SEO优化
table布局的适用场景：某种原因不方便加载外部css的场景，例如邮件正文，此时用table布局可以在无css情况下保持页面局部正常。

13.Link和import两者差别（实际开发中用Link）

(1)本质上link是标签，是html的写法，但import是css的书写方式
(2)兼容性link是没有兼容性问题的，import在老版本IE上不支持IE5以下
(3)加载顺序上不一样 link是结构HTML和CSS样式同时加载的，import是先加载HTML后加载CSS，造成在网速比较慢时，先看到较难看的页面，然后才有页面样式。
(4)在用js控制dom修改样式的时候，Link可以被修改，但是import不可以。

14.圣杯布局，双飞翼布局

都是为了是心啊一个两侧宽度固定，中间宽度自适应的三栏布局，中间部分在DOM结构上优先以便先行渲染。（核心目的：先解析中间栏，展示当前页面的核心内容，提升用户体验。）
圣杯布局：结构上先解析center，三块之间没有重叠部分，给最大的盒子添加了padding挤进去的
双飞翼布局：结构上先解析center，3大块，最大的中间是和左右重叠的，center中的小盒子是margin挤进去的

15.get和post的区别

（1）get是获取数据，post是传送数据
（2）get的安全性比较低（明文传输），它传送的参数数据包含在url中，可以在地址栏看到。post安全性比较高（加密传输），post传参包含在请求体中无法直接获取。
（3）传参的数据量大小不同get传送的数据量比较小2kb，post一般是不受限制,大小由服务器端决定。

16.var,let,const的区别

（1）var声明的变量属于函数作用域；let和const声明的变量属于块级作用域，不能跨函数访问。
（2）var存在变量提升现象，而let和const没有
（3）var变量可以重复声明，值可改变；在同一个块级作用域下：let变量不能重复声明；const定义的变量是常量，声明时必须赋值，但不允许重复赋值，如果定义的是引用类型，可以修改数据内部结构。
18.jpg,gif,png-8,png-24的区别，及其各自的使用场景
gif,jpg,png格式的图片在网站制作中的区别
gif格式的特点：
（1）透明性，gif是一种布尔透明类型，它既可以是全透明，也可以是全不透明，但是它并没有半透明（alpha透明）
（2）动画，gif这种格式支持动画
（3）无耗损性，gif是一种无损耗的图像格式，这也意味着你可以对gif图片做任何操作也不会使得图像质量产生损耗。
（4）水平扫描，gif是使用了一种叫做LZW的算法进行压缩的，这也意味着同等条件下，横向的gif图片比竖向的git图片更加小。例如50010的图片比10500的图片更加小。
（5）间隔渐进显示，gif支持可选择性的间隔渐进显示
　由以上特点看出只有256种颜色的gif图片不适合照片，但它适合对颜色要求不高的图形（比如说图标，图表等），它并不是最优的选择，我们会在后面中看到png是最优的选择。
png格式特点：
（1）类型,Png这种图片格式包括了许多子类，但是在实践中大致可以分为256色的png和全色的png，你完成可以用256色的png代替gif，用全色的png代替jpeg
（2）透明性,Png是完全支持alpha透明的（透明，半透明，不透明），尽管有两个怪异的现象在ie6（下面详细讨论）
　（3）动画,它不支持动画
　　PNG图片格式现在包含三种类型：
　　1.PNG8 256色PNG的别名
　　2.PNG 24全色PNG的别名
　　3.PNG 32全色PNG的别名