HTML5,CSS,JS前端常见知识面试题

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

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

seo优化

seo叫搜索引擎优化。
设置网页的title，不要出现空链接，设置网络中图片的alt属性，在页面中多使用hx标签，优化网页相应速度，定期更新文章内容，购买外链，花钱买关键字（额外投入）
技巧：

1. 关键字优化：a.meta标签的keywords,description属性值；
2. 网站结构和内容优化
3. 内链和外链的优化
4. 设置网站的关键词和描述信息
5. 所有的js,css采用外联方式，图片采用css精灵图，减少网络请求次数
6. 利用布局：将重要的HTML内容代码放在最前
7. 每个页面只能出现一次h1, h2可以多次；h1权限很高，普遍认定仅次于title
8. 图片一定要写alt,title可选
9. 非特殊性链接，链接地址一定要写href属性
10. 网站结构呈扁平状树型，目录结构不宜过深，过深不利于搜索引擎的抓取
11. 做好404页面，提升用户体验友好
12. .尽量不使用iframe,重要的内容不要放在框架中，搜索引擎不会抓取到iframe里的内容

sass,less—css预处理器

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代码一同编译。

src与href的区别

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

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

页面中使用CSS的三种方式

（1）行内添加定义style属性值，
（2）页面头部内嵌调用，
（3）外面链接调用，link和@import

		importXML/HTML代码
		<link rel="stylesheet" rev="stylesheet" href="CSS文件" type="text/css" media="all" />   
		XML/HTML代码
		<style type="text/css" media="screen">   
		@import url("CSS文件");   
		</style>  

link和@import的区别

（1）link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
（2）link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
（3）link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
（4）link支持使用Javascript控制DOM去改变样式；而@import不支持。
@import url(style.css) 和@import url(“style.css”)是最优的选择，兼容的浏览器最多。从字节优化的角度来看@import url(style.css)最值得推荐。

标准盒模型

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

常见浏览器的兼容问题

（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会失效。

属性继承

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

css有哪些新特性

（1）cssc3实现圆角（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

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

（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

样式居中

{display:block;margin:0 auto}
{display:block;position:absolute;left:50%;right:50%;translate(-50%,-50%)}
水平垂直居中
1 margin负值+定位（transfrom）
2 {
	position:abosulate;
	top:50%;
	left:50%;
	transfrom:transition(-50%,-50%);
}
3 flex布局居中
{ // 给父元素添加
	display:flex;
	justify-content:center; // 水平居中
	align-item:center; // 垂直居中
}
4 gird布局居中
{ // 给父元素添加
	display:grid;
	place-align:center;
	// 或 place-content center
}

css的content属性

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

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

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

移动开发–如何实现适配

flex布局

圣杯布局，双飞翼布局

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

ge