一、常规流( Normal flow )知识
1.IFC中文字的水平排列取决于：text-align,垂直方向排列取决于：vertical-align；
2.当块级元素里面包含一个img的时候，总会在底部和父容器产生缝隙，这是由于父容器中的baseline决定的，起因是父容器的font-famliy、font-size。解决这个问题的方式是将img的vertical-align设置为：bottom top middle;
3.元素在相对定位下，left=-right;其他定位不行；而如果left和right冲突的时候，胜利的天平总会倾向于left，可如果direction存在的话，rtl right胜，ltr:left胜。
4.垂直方向上的margin，子元素间异向margin会重叠，这个无法避免。而子元素会和父容器之间会造成把父元素拉下水，想要避免，父容器触发BFC。如图所示：
事先*{margin:0; padding:0;}红色的是父容器，子元素都有margin:10px，被绿色的拉下10px，而绿色和父容器之间没有margin-top（其实这种情况就叫margin塌陷，margin collapse）。绿底和蓝顶只有10px距离，不是20px。
红色触发了BFC，解决了红被绿拉下水的问题，但是异向margin重叠现象依然存在。
二、包含块（Containing Block）说白了就是找爹
1.包含块是一个相对的概念，如果HTML中各节点间无定位，那么子元素的包含块就是父容器，初始包含块是HTML，这是怎么都不会改变的。
2.如果子元素的position定义为 relative或static的话，那它的包含块就是父容器。
3.如果子元素的position定义为fixed的情况下，那它的包含块就是HTML。
4.如果子元素的position定义为absolute的情况下，那它的包含块就是拥有position：absolute或relative的父容器。
5.如果子元素的position定义为absolute，且它的父容器为行级元素，那它的定位和行级父的实际所占区域有关，因为会存在rtl和rtl的问题，所以每个浏览器不同。但是不会因此改变子元素的left right方向。
双X都是绝对定位，灰色的span相对定位，外面的p标签设置rtl或rlt。红X：left:0 黄X:left:0 top:20px; 蓝X：right:0;
ltr时：
火狐：
如果存在父容器折行，那只在第一行做这些事 其他浏览器：
rtl时：
火狐还是不变，其他：
三、IE的写作模式 writing-mode
这是一个很有意思的属性：看属性值
tb-rl：
竖排靠右贴顶,同时自定义P标签的高度会被夸张的拉长。
变种：tb-lr:竖排靠左贴顶 bt-lr:竖排靠左贴低 bt-rl:竖排靠右贴低
lr-tb:
横排靠左贴顶。
变种：rl-tb:横排靠右贴顶 lr-bt：横排靠左贴低 rl-bt:横排靠右贴低
PS:此时定义direction无效。
X、其他
1.如果给行级元素加上浮动或绝对定位，那么该行级元素的left top right bottom和width height将会有效。
2.Function对象会有一个caller变量，目的是反编译出调用该函数的执行环境。看例子：
window.onload = function () { handleCaller();//1.输出handleCaller函数内容，也就是返回handleCaller函数 2.输出window.onload的执行内容，也就是返回onload函数
alert(handleCaller.caller.toString());//出错，只能在handlercaller函数内部使用caller }; callerDemo();//this is a top function function callerDemo() { if (callerDemo.caller) { var a = callerDemo.caller.toString(); alert(a); } else { alert("this is a top function"); } } function handleCaller() { callerDemo(); alert(handleCaller.caller.toString()); }
3.还有一个callee属性，是属于arguments的，它主要返回的是arguments所在的函数的执行环境，其实和caller的作用一样，都是反编译函数，但是caller返回的是改函数的执行函数，callee返回的是参数所在的函数。
window.onload = function () { test(1, 2); //1.输出test函数，因为函数自动触发toString，所以看到的会是test函数体 //2.输出test函数形参的个数， 3 }; function test(a, b, c) { alert(arguments.callee); alert(arguments.callee.length); }
4.CSS属性选择符：a.节点[属性]包含该属性的节点 b.节点[属性=值]满足节点属性为这个值的节点
5.块级元素内部有文字，文字的后面如果紧跟块级子元素的话，该文字会被套上匿名块框，使文字和块级子元素垂直排列。