Flash Of Unstyled Content：用户定义样式表加载之前浏览器使用默认样式显示文档，用户样式加载渲染之后再从新显示文档，造成页面闪烁。解决方法：把样式表放到文档的head
如何创建块级格式化上下文(block formatting context),BFC有什么用
创建规则：
作用：
display,float,position的关系
外边距折叠(collapsing margins)
毗邻的两个或多个margin会合并成一个margin，叫做外边距折叠。规则如下：
如何确定一个元素的包含块(containing block)
如果元素position为absolute，它的包含块由祖先元素中最近一个position为relative,absolute或者fixed的元素产生，规则如下：
如果祖先元素为行内元素，the containing block is the bounding box around the padding boxes of the first and the last inline boxes generated for that element.
其他情况下包含块由祖先节点的padding edge组成
如果找不到定位的祖先元素，包含块为初始包含块
stacking context,布局规则
z轴上的默认层叠顺序如下（从下到上）：
如何创建stacking context：
如何水平居中一个元素
如果需要居中的元素为常规流中inline元素，为父元素设置text-align: center;即可实现
如果需要居中的元素为常规流中block元素，1）为元素设置宽度，2）设置左右margin为auto。3）IE6下需在父元素上设置text-align: center;,再给子元素恢复需要的值
<body>
<div>
aaaaaa aaaaaa a a a a a a a a
</div>
</body>
<style>
body {
background: #DDD;
text-align: center; /* 3 */
}
.content {
width: 500px;
/* 1 */
text-align: left; /* 3 */
margin: 0 auto; /* 2 */
background: purple;
}
</style>
如果需要居中的元素为浮动元素，1）为元素设置宽度，2）position: relative;，3）浮动方向偏移量（left或者right）设置为50%，4）浮动方向上的margin设置为元素宽度一半乘以-1
<body>
<div>
aaaaaa aaaaaa a a a a a a a a
</div>
</body>
<style>
body {
background: #DDD;
}
.content {
width: 500px;
/* 1 */
float: left;
position: relative; /* 2 */
left: 50%;
/* 3 */
margin-left: -250px; /* 4 */
background-color: purple;
}
</style>
如果需要居中的元素为绝对定位元素，1）为元素设置宽度，2）偏移量设置为50%，3）偏移方向外边距设置为元素宽度一半乘以-1
<body>
<div>
aaaaaa aaaaaa a a a a a a a a
</div>
</body>
<style>
body {
background: #DDD;
position: relative;
}
.content {
width: 800px;
position: absolute;
left: 50%;
margin-left: -400px;
background-color: purple;
}
</style>
如果需要居中的元素为绝对定位元素，1）为元素设置宽度，2）设置左右偏移量都为0,3）设置左右外边距都为auto
<body>
<div>
aaaaaa aaaaaa a a a a a a a a
</div>
</body>
<style>
body {
background: #DDD;
position: relative;
}
.content {
width: 800px;
position: absolute;
margin: 0 auto;
left: 0;
right: 0;
background-color: purple;
}
</style>
如何竖直居中一个元素
参考资料：6 Methods For Vertical Centering With CSS。 盘点8种CSS实现垂直居中
需要居中元素为单行文本，为包含文本的元素设置大于font-size的line-height：
<p>center text</p>
<style>
.text {
line-height: 200px;
}
</style>
$javascript概念部分
DOM元素e的e.getAttribute(propName)和e.propName有什么区别和联系
offsetWidth/offsetHeight,clientWidth/clientHeight与scrollWidth/scrollHeight的区别
Measuring Element Dimension and Location with CSSOM in Windows Internet Explorer 9
XMLHttpRequest通用属性和方法
readyState:表示请求状态的整数，取值：
focus/blur与focusin/focusout的区别与联系
focus/blur不冒泡，focusin/focusout冒泡
focus/blur兼容性好，focusin/focusout在除FireFox外的浏览器下都保持良好兼容性，如需使用事件托管，可考虑在FireFox下使用事件捕获elem.addEventListener('focus', handler, true)
可获得焦点的元素：
mouseover/mouseout与mouseenter/mouseleave的区别与联系
例子：鼠标从div#target元素移出时进行处理，判断逻辑如下：
<div><span>test</span></div>
<script type="text/javascript">
var target = document.getElementById('target');
if (target.addEventListener) {
target.addEventListener('mouseout', mouseoutHandler, false);
} else if (target.attachEvent) {
target.attachEvent('onmouseout', mouseoutHandler);
}
function mouseoutHandler(e) {
e = e || window.event;
var target = e.target || e.srcElement;
// 判断移出鼠标的元素是否为目标元素
if (target.id !== 'target') {
return;
}
// 判断鼠标是移出元素还是移到子元素
var relatedTarget = event.relatedTarget || e.toElement;
while (relatedTarget !== target
&& relatedTarget.nodeName.toUpperCase() !== 'BODY') {
relatedTarget = relatedTarget.parentNode;
}
// 如果相等，说明鼠标在元素内部移动
if (relatedTarget === target) {
return;
}
// 执行需要操作
//alert('鼠标移出');
}
</script>
sessionStorage,localStorage,cookie区别
javascript跨域通信
同源：两个文档同源需满足
跨域通信：js进行DOM操作、通信时如果目标与当前窗口不满足同源条件，浏览器为了安全会阻止跨域操作。跨域通信通常有以下方法
javascript有哪几种数据类型
六种基本数据类型
一种引用类型
Object
什么闭包,闭包有什么用
闭包是在某个作用域内定义的函数，它可以访问这个作用域内的所有变量。闭包作用域链通常包括三个部分：
闭包常见用途：
创建特权方法用于访问控制
事件处理程序及回调
javascript有哪几种方法定义函数
重要参考资料：
应用程序存储和离线web应用
相关文章
精彩导读
热门资讯
关注我们
