可视化格式模型就是规定了用户端(一般指浏览器)在媒介(页面)中如何处理文档树。
关于这方面的介绍，请参看《KB007：可视化格式模型(Visual formatting modle)》。
本文链接
css的display属性如下:
none: 元素不会生成框，元素不显示，且在页面中不占据位置。
inline: 元素被当成内联元素(行内元素)对待，内联元素的默认值。
inline-block: 块级元素一方面被当成内联元素，因此可以使块级元素和内联元素可以同一行显示，但是另一方面这个元素却可以应用块级元素上的属性比如设置宽高，设置上下边距:
未设置inline-block属性前:
<head>
<title>inlineBlock</title>
<style type = "text/css">
div {
background: orange;
}
span {
background: red;
}
</style>
</head>
<body>
<div>
我是div
</div>
<span>
我是span
</span>
</body>
</html>
运行结果(火狐中)：
加入inline后
<head>
<title>inlineBlock</title>
<style type = "text/css">
div {
background: orange;
display:inline-block;
/*加入了块级元素才有效的属性*/
width: 100px;
height: 100px;
margin-top: 20px;
margin-bottom: 20px;
}
span {
background: red;
}
</style>
</head>
<body>
<div>
我是div
</div>
<span>
我是span
</span>
</body>
</html>
运行结果(火狐中):
可以看到div被当成行内元素，但是却能够设置宽度和上下边距，这些属性对行内元素是无效的。
block: 元素被当成块级元素对待，块级元素默认值。
ru
使用JS实现在图片上显示左右箭头的翻页代码，预览效果网址：http://www.keleyi.com/keleyi/phtml/picnext/
本实例使用了javascript的onmousemove 事件。onmousemove 事件会在鼠标指针移动时发生。
语法
onmousemove="SomeJavaScriptCode"
SomeJavaScriptCode是必需参数。规定该事件发生时执行的 JavaScript。
下面是核心代码（完整代码请在效果页面查看源代码）：
<script type="text/javascript">
function KeleyiImgNext(bigimg) {
var lefturl = "01.html";
var righturl ="03.html";
var imgurl = righturl;
var width = bigimg.width;
var height = bigimg.height;
bigimg.onmousedown = bigimg.onmousemove = function () {
if (event.offsetX < width / 2) {
imgurl = lefturl;
if (imgurl != "#")
bigimg.style.cursor = 'url(/blog_article/images/arr_left.cur),auto';
else
bigimg.style.cursor = 'default';
} else {
imgurl = righturl;
if (imgurl != '#')
bigimg.style.cursor = 'url(/blog_article/images/arr_right.cur),auto';
else
bigimg.style.cursor = 'default';
}
}
bigimg.onmouseup = function () {
if (imgurl != '#')
top.location = imgurl;
}
}
</script>
<img onmouseover="KeleyiImgNext(this)" src="/keleyi/phtml/picnext/images/k02.jpg" alt="keleyi" />
本文转载自柯乐义http://www.keleyi.com/a/bjac/a6e756c811719fff.htm
本文链接