2007年3月15日

x 方向margin（以及border,padding,width等），有一套详细的规则。
y 方向普通block元素要稍微简单一点，基本是根据内容定。

首先 x 方向， margin+border+padding+width = containing block

这个还要分 inline 元素，block元素和定位元素几种情况来看呢。

如果你说的是block元素，首先它要有一个containing block.

这个宽度是固定的，如果你同时设定了marign-left和margin-right以及width，在从左到右的语序中，右边margin会被忽略。

他设定的值会被忽略，而根据上面的公式重新计算。

比如containing block 100px,
margin:0 50px; width:80px;
最后实际的margin-right不是50而是100-50-80 = -30 px

最好还是看css spec 的 visual formatting model 部分

margin表示一个距离，距离是没有参考线的。

containing blocks
http://www.w3.org/TR/CSS21/visuren.html#containing-block

margin-bottom 应该表示 border-bottom 边缘位于 containg block 下边缘时候的取值。

OPERA也推出开发工具Opera developer tools

http://dev.opera.com/articles/view/opera-developer-tools/
也是一个可以查DOM、即时编写JS、HTML、CSS的工具，用OPERA打开上面的网址后，点击那个“ Developer Console.” 在弹出的对话框中添加按纽到OPERA中，然后在把按纽拖动到OPERA合适的位置就可以用了～
详细用法大家可以看这个网址：http://dev.opera.com/articles/view/opera-developer-tools/?page=2#docs

至此，加上IE的Developer Toolbar和FF的FireBug，三大浏览器都为广大WEB开发者提供了开发工具，只是希望大家在显示网页时可不可以统一一下啊，光推出个Developer Toolbar也解决不了根本问题啊～

另：Internet Explorer Developer Toolbar 下载地址：
http://www.microsoft.com/downloads/details.aspx?FamilyID=e59c3964-672d-4511-bb3e-2d5e1db91038&DisplayLang=en
Firefox FireBug 下载地址：
http://getfirebug.com/

再另：Internet Explorer Developer Toolbar 偷偷的在2007-1-12号更新了……

2007年3月12日

打开一个网站，然后在地址栏内打入javascript:document.body.contentEditable='true';document.designMode='on';void 0
你就可以随意编辑这个这个页面了

退出移动版