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

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

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

上一篇:iOS NSString的常用用法


下一篇:配置 Windows 下的 nodejs C++ 模块编译环境 安装 node-gyp