Block Formatting Context 能帮助我们做什么?

Block Formatting Context(块格式化上下文)是个很重要的概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。

举个好理解的例子:可以把页面想象成一个社区,这个社区里的建筑就是 HTML 元素。而为了避免不同社区里的建筑相互混淆,开发商都是把建筑建在自己的社区里,这样的话无论开发商怎么盖楼,都不会影响到其它社区,那么这个社区的范围就可以被想象成 Block Formatting Context。

由于在 IE8 之前的 IE 版本中,规范中没有提及 Block Formatting Context 的概念,而是用私有属性 hasLayout 来达到相似的目的。两者都是决定了对内容如何定位及大小计算的规则,以及与其它元素的相互作用的规则,但它们对一类事物的不同理解,以及它们的启用条件也都不尽相同,所以很多兼容性的问题都是因它而起。

可生成 Block Formatting Context 的 CSS 特性:

  • float: ( 除 none 外的任何值 )
  • overflow: ( 除 visible 外的任何值 )
  • display: ( table-cell,table-caption 或 inline-block )
  • position: ( 除 relative 和 static 外任意值 )

可触发 hasLayout 的 CSS 特性:

  • display: inline-block
  • height: ( 除 auto 外任何值 )
  • width: ( 除 auto 外任何值 )
  • float: ( left 或 right )
  • position: absolute
  • writing-mode: tb-rl
  • zoom: ( 除 normal 外任意值 )

继续阅读 Block Formatting Context 能帮助我们做什么?

让 Firefox 支持 offsetX、offsetY

前不久做了一个效果,需求是鼠标划上显示大图,并跟随鼠标移动,效果很简单,利用 offsetX/Y 分别判断出鼠标指针位置相对于触发事件的对象的 X 坐标和 Y 坐标,但坑爹的是 firefox 不支持这个方法,这一下就蛋疼了… 在网上看了很多兼容的方法,感觉最可靠的方法是利用【当前鼠标指针到文档的距离】减去【当前触发事件的对象到文档的距离】等于【当前鼠标指针到第一个定位的父元素的坐标】,很绕口是吧,我画了张图,看着能清楚些:

firefox_offsetX_test

要获取【当前鼠标指针到文档的距离】,我们需要 window.pageYOffset(Netscape属性,指的是滚动条顶部到网页顶部的距离)加上 clientY(当前鼠标指针相对于当前窗口的垂直坐标)。

而要获取【当前触发事件的对象到文档的距离】,我们需要从当前触发元素到根节点为止,各级 offsetParent 元素下面有解释)的 offsetLeftoffsetTop 值之和。

offsetParent:获得被定位的最近的父级对象,定位的要求是设置了 position 属性。

如果元素本身已经定位,那么 offsetParent 属性返回此元素已定位的父级元素,如没有已定位的父级元素,则返回 body 对象。

如果元素没有定位, offsetParent 不但会找已经定位的父级元素而且还会查找类型为 td 和 table 的父级元素,只要找到这三种父级元素的其中任何一种元素将返回此元素,否则返回 body 对象。

继续阅读 让 Firefox 支持 offsetX、offsetY

控制好javascript在页面中的执行顺序

一、页面中脚本的执行顺序

1.页面中 Javascript 的执行顺序是依靠页面引入的<script>标记的先后顺序决定的。

2.脚本定义的函数或全局变量,后面加载的脚本也可以调用。

3.调用的变量如果前面没有声明,则会返回 undefined。

3.如果调用的函数不在同一段脚本中,则会报函数未定义错误。

5.document.write() 中写入的脚本,浏览器会在解析完 document.write() 后继续解析document.write() 写入的脚本。

好了,我们把这些载入脚本的方法放在一起,看个例子:

<script type="text/javascript">
document.write('<script type="text/javascript" src="test.js"></script>');
document.write('<script type="text/javascript">');
document.write('alert(4);')
document.write('fn();');
document.write('alert(e);');
document.write('</script>');
</script>
<script type="text/javascript">
alert(5);
</script>

test.js中的代码:

var e = 1;
function fn(){
  alert(2);
}
alert(3);

chrome中的执行顺序为:3 – 4 – 2 – 1 – 5;

IE中的执行循序为:4 – 3 – 5 并报错属性“fn”的值为 null、未定义或不是 Function 对象;

继续阅读 控制好javascript在页面中的执行顺序