莽石、前端开发

用于清除容器内浮动的css样式，留着备用。

.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { *zoom: 1; } /* IE6/7 */

连续的高温天气让人变得焦躁不安，没有了心情去工作。今天决定修改自己博客的导航条，把以前的只有一个banner的形式改成banner+Navigation的形式，丰富一下自己的博客。

（修改之前的形式）

（修改之后的形式）

用Photoshop切图完事后，Css定义样式的时候遇到一个不解的问题：现象是第一个导航按钮显示不出来，其他的都修改定义成功。唯独第一个导航按钮不显示，找了很多原因最后归结为Position属性改成absolute，相对位置改成绝对位置就成功显示了。

#banner li {
position:absolute;
}
#banner li a {
color:#FFFFFF;
display:block;
overflow-x:hidden;
overflow-y:hidden;
position:relative 改成 absolute;
 
}

消除遮盖的功能是设置页面中Flash为背景透明样式显示，使导航下拉菜单在Flash的前面显示出来。

<noscript>
        <object class="clsid:d27cdb6e-ac6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="619" height="238" align="absmiddle" title="11">
		<param name="movie" value="ytx_2007.swf"/>
		<param name="quality" value="high" />
		<param name="wmode" value="transparent" />
		<embed src="ytx_2007.swf" width="619" height="238" align="absmiddle" wmode="transparent" quality="high" pluginspage="http
		:// www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=shockwaveFlash" type="application/x-shockwave-flash"></embed>
		</object>
</noscript>

执行以上代码后，Flash将以背景透明的样式显示出来，不会对导航中的下拉菜单造成遮盖问题。

两者的区别：div是块元素，span是行内元素。所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行。

两个概念，一个是行内元素，一个是块级元素。行业元素是指该元素标记的内容不不会对现在的结构造成影响，属于应用样式，辅助应用样式表等作用；而块级元素为一个块状，单独占据一行，相当于在一个该元素前后各加一个换行。

两者最明显的区别是：DIV(division)是一个块级元素，可以包含段 落、标题、表格，乃至诸如章节、摘要和备注等。而SPAN 是行内元素，SPAN 的前后是不会换行的，它没有结构的意义，纯粹是应用样式，当其他行内元素都不合适时，可以使用SPAN。 块元素相当于内嵌元素在前后各加一个
换行。其实，块元素和行内元素也不是一成 不变的，只要给块元素定义display:inline，块元素就成了内嵌元素，同样地，给内嵌元 素定义了display:block就成了块元素了。

DIV指定渲染HTML的容器。SPAN指定内嵌文本容器。

今天打开自己的博客无意中发现了个问题，在正文中带链接的文本，点击后的显示效果看着很不舒服。应该说是自己的Css设置问题造成的。正确设置margin和padding的属性在这里显得尤为重要。

博客修改前在firefox里面显示正常，可是在IE和遨游等浏览器下显示的效果却不尽如人意！

以下是实际的效果显示图：

经过仔细检查，Css样式做如下修改后问题解决：

.entry p {margin: 0; padding: 0 0 16px 0;} 改成 .entry p {margin: 0 0 16px 0; padding: 0;}

问题总结：

错误地设置了内边距，导致以上的现象发生。在此谨记margin和padding的区别，尽量做到合理设置这两个属性。这回再看看效果吧！应该是很舒服的。http://www.mscss.cn/plants-vs-zombies/