2009/08/05
网页的DOM模型听说过吗？指的是DHTML的一些东西。。。
我们常用的xxx=document.getElementById("innerPage").value语法就是使用了DOM模型，像Firefox，Safari等浏览器带DOM检查支持的，像IE这种垃圾浏览器就不行了。当然了，这不是说IE不支持DOM，是说IE不支持查看文档的DOM结构。
长话短说，如果你懂DOM，我给你抛块砖，引你这块玉好了。请看下面的例子。
word-break:break-all和word-wrap:break-word都是能使其容器如DIV的内容自动换行。
它们的区别就在于：
1，word-break:break-all
例如div宽200px，它的内容就会到200px自动换行，如果该行末端有个英文单词很长（congratulation），它会把单词截断，变成该行末端为congra(congratulation的前端部分)，下一行为tulation（congratulation）的后端部分了。
2，word-wrap:break-word
例子与上面一样，但区别就是它会把congratulation整个单词看成一个整体，如果该行末端宽度不够显示整个单词，它会自动把整个单词放到下一行，而不会把单词截断掉的。
在CSS中，有两个属性，都是与元素显示相关的，一个是大家熟悉的visibility，另一个则是display（你可能已经见到过display:block或类似的用法）。但是我发觉我把他们混淆了，所以今天特此发文比较一下，希望对大家有用。
visibility用于设置元素是否可见或不可见。
可选属性值：inherit | visible | hidden | collapse
- inherit: 继承上一级父对象的可见性。
- visible: 元素是可见的。
- hidden: 元素是不可见的。即使不可见的元素也会占据页面上的空间。请使用 "display" 属性来创建不占据页面空间的不可见元素。
- collapse: 当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 "hidden"。
visibility这个属性指定是否显示一个元素生成的元素框。这意味着元素仍占据其本来的空间，不过可以完全不可见。值 collapse 在表中用于从表布局中删除列或行。
相信大家对CSS都比较了解，CSS简化了我们很多的工作。
比如，CSS中，对font有font-family、family-size、font-style、font-weight这几个定义。我以前一直以为有一个叫font-color的，后来才发现，CSS中是没有font-color这么一说的。
自己玩HTML也有些年头了。今天在分析一段CSS代码时，突然发现，原来CSS中的position如果设置为absolute时， 也是可以不参考整个浏览器框架的。这同样是CSS相对定位的一句语法，但它用了position:absolute。
当父对象的position为absolute或relative的时候。子对像如果设置了position为absolute，则top、left、right、bottom相对于父对象。说白了，只要你对象有了明确的position声明（不管是absolute还是relative），则此时子对象的定位是相对父对象而言的。
我曾经在donews上申请了一个博客，是准备用来提高自己网站的Pagerank的。结果没多久，就废了。不知道为什么，一直显示错误。本想找对方的网管的，结果发现donews已经无人管理，想想也算了。
偶然的一次，我为了吴清忠先生的《人体使用手册》，偶尔注册了一个hexun的帐号。于是我决定把原来donews的博客分站移到hexun上来。
我的hexun博客的url是"http://8502733.blog.hexun.com/"，标题是“该死的沪A牌照”，子标题是“全中国全世界最贵的一块小铁皮”。
但是hexun的blog也不是很爽，乱七八糟的模块太多。用过的朋友都知道。怎么办呢？
由于本人熟悉Javascript和CSS，既然你不让我修改Javascript（连Google Adsense都不能放，需要达到一定的经验级别），那我改CSS好了。
我们先打开我的hexun博客，分析源代码，可以看到如下的代码：
<div class='navi_bar_left'><div id='bar_01' class='all_bar'><a href='http://hexun.com/8502733/default.html' target='_parent'>个人门户</a></div></div>
<div id='bar_02' class='all_bar'><a href='http://8502733.blog.hexun.com' target='_parent' >博客</a></div>
<div id='bar_03' class='all_bar'><a href='http://8502733.photo.hexun.com' target='_parent'>相册</a></div>
<div id='bar_04' class='all_bar'><a href='http://8502733.music.hexun.com' target='_parent' >音乐</a></div>
<div id='bar_05' class='all_bar'><a href='http://bookmark.hexun.com/8502733/default.aspx' target='_parent'>网摘</a></div>
<div id='bar_06' class='all_bar'><a href='http://rss.hexun.com/8502733/default.aspx' target='_blank'>博揽</a></div>
<div id='bar_07' class='all_bar'><a href='http://mail.hexun.com' target='_blank'>邮局</a></div>
<div id='bar_08' class='all_bar'><a href='http://hexun.com/8502733/circle.html' target='_parent'>朋友圈</a></div>
<div id='bar_09' class='all_bar'><a href='http://hexun.com/8502733/friends.html' target='_parent'>好友</a></div>
<div id='bar_10' class='all_bar'><a href='http://hexun.com/8502733/messageboard.html' target='_parent'>留言板</a></div>
<!--<div id='bar_12' class='all_bar'><a href='http://stock.hexun.com/mystock/' target='_blank'>理财</a></div>-->
所以我们只要设置CSS，把class=navi_bar_left，将visibility设置为hidden就可以了。
具体操作可以打开里面的全局CSS，打开“http://shequ2.tool.hexun.com/8502733/my.css”
#header #navi_bar .navi_bar_left { float: left; width: 720px; font-size: 14px; font-weight: bold; font-family: "宋体"; word-spacing: 12px; height: 28px; visibility:hidden}
这样的话，navi_bar_left下属的子元素全部visibility被设置为hidden。HTML代码再多，就是啥都不显示，嘿嘿。
所以我用这种方法，将我的hexun blog设置得比较清洁。只是不熟悉CSS代码的朋友，可能需要学习一下HTML和CSS。
