HTML+CSS+js常见知识点

一、HTML、CSS常见知识点

1.垂直居中盒子

/* 方法一 */
 html, body { width: 100%; height: 100%; padding: 0; margin: 0; }
.box { width: 300px; height: 300px; background: yellowgreen; margin: 0 auto; position: relative; top: 50%; margin-top: -150px; }
/* 方法二 */
html, body { width: 100%; height: 100%; padding: 0; margin: 0; }
.box { width: 300px; height: 300px; background: yellowgreen; margin: 0 auto; position: relative; top: 50%; transform: translateY(-50%); }
/* 方法三 */
html, body { width: 100%; height: 100%; padding: 0; margin: 0; }
body { display: flex; align-items: center; justify-content: center; }
.box { width: 300px; height: 300px; background: yellowgreen; }

2、浏览器间的hack方法

ie6--------------------->-
ie6/7------------------->+,=,~,!,@,#,$,%,^,&,*,`
ie6\ie7\ie8\ie9\ie10---->\9
ie9\ie\10--------------->\9\0
firefox----------------->-moz-
chrome,360------------------>-webkit-

3、WEB语义化有利于SEO优化和快速查找

H5新特性：

（1）用于绘画canvas元素；

（2）用于媒介回放的video和audio；

（3）本地离线存储localStorage长期存储数据，浏览器关闭后数据不丢失；sessionStorage的数据在浏览器关闭后自动删除；

（4）语义化更好的元素，如：header、article、section、footer、nav\aside（定义侧边栏）\details（描述文档某个部分的细节） \dialog（定义对话框）\figure（规定独立的流内容）\progress(定义任何类型的任务的进度)；

（5）表单控件，如：datetime(显示完整日期)\date(显示日期)\time\email\url(网页地址)\search（谷歌下输入文字后，会多出一个关闭X）\range\tel\number\color.

CSS3新功能：圆角、多背景、动画与渐变、box阴影、背景透明等。

二、JS常见知识点

1、同源策略（同协议、同域名、同端口）：JS重要的安全度量标准，为了防止某个文档或脚本从多个不同的源装载。

2、作用域链：保证执行环境里有权访问的变量和函数是有序的，作用域链的变量“只能”向上访问，变量访问到window即终止。

3、原型链：通过函数对象或普通对象自带的_proto_属性进行访问。

4、闭包：指一个变量在他自身作用域外被使用了，就叫发生了闭包。

例子：
var fun(n,o){
	consle.log(o);
	return{
		fun:function(m){
			return fun(m,n);
		}
	}
}