【积累】一些遇到的知识点

一、常规流( 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.块级元素内部有文字，文字的后面如果紧跟块级子元素的话，该文字会被套上匿名块框，使文字和块级子元素垂直排列。