CSS盒子模型就是在CSS技术所使用的一种思维模型。CSS假定所有的HTML文档元素都生成一个描述该元素在HTML文档布局中所占空间的矩形元素框，可以形象地将其看作是一个盒子。通过定义一系列与盒子相关的属性，可极大地丰富和促进各个盒子乃至整个HTML文档的表现效果和布局结构。
CSS盒子模型由内容区、填充、边框和空白边四部分组成。内容区是盒子模型的中心，呈现盒子的主要信息内容；填充是内容区和边框之间的空间；边框是环绕内容区和填充的边界；空白边位于盒子的最外围，是添加在边框外周围的空间。
1、用脚本（js或jquery）实现：
onmouseover的时候显示播放按钮层(div),onmouseout的时候再隐藏播放按钮层。
2、用css实现：
:hover 伪类在鼠标移到元素上时向此元素添加特殊的样式。
如下是我做的一个小案例(css实现)，比较简单，提供一种思路。
【源代码见附件，仅供学习参考使用】。
1、确定你的播放器的尺寸建议使用音画其他部件，如图片、视频的尺寸作为播放器尺寸。默认播放器尺寸：880*550
2、输入或粘贴MP3网址
粘贴操作：先在外部将网址作“复制”，然后鼠标指向输入栏，按鼠标右键，选“全选”，再选“粘贴”。
一旦输入或粘贴MP3网址后，如网址有效，就开始播放。
“MP3备份网址”作用是当MP3网址（主网址）失效时，播放器启用MP3备份网址。这是可选项。如不需要备份网址，则跳过。
3、选择播放器控制按钮
“控制按钮选择：”下方方框打钩或点击图例。
．透明按钮：默认。全透明按钮，尺寸自动取播放器尺寸。控制音乐播放或暂停直接点击画面。（此生成器为了能输入，采用文字按钮代替）
．图标按钮：三角为播放按钮，两竖为暂停按钮。
．英文按钮：PLAY为播放按钮，STOP为暂停按钮。
当选择图标、英文按钮时，点击“－”或“＋”可以缩小或放大该按钮。鼠标指向按钮，按住鼠标左键，可将按钮拖到你需要的位置后放开鼠标。改变播放器尺寸时，按钮自动取中心位置。
4、选择滚动字幕·
如果需要滚动字幕。请在“滚动字幕”右边方框打钩。清除原先文字（鼠标指向文字，按右键，选“全选”，再按右键，选“删除”），然后在输入栏内粘贴（输入）一行文字。
．修改滚动字幕文字属性：字体、字号、颜色等
．发光颜色亮度为0，不发光，“文字发光颜色”参数无效。
．字幕显示宽度：默认880
．字幕移动速度：默认1。数字大，移动快。
修改以上参数后必须按“确定”才有效。
字幕位置：默认水平0、垂直470可以拖动字幕到所需位置。操作方法：鼠标指向字幕按左键点击一下，出现绿条之后按下鼠标左键，拖动字幕。到位后放开鼠标。
5、复制代码
制作过程（或“字幕修改参数”按“确定”后）同步更新生成代码。
代码（一）：所有参数都写在博客代码中。
制作结束后，点击生成代码（一）下面的“复制”按钮，自动将生成代码复制到你的电脑的“粘贴板”了，可直接“粘贴”博文代码编辑栏。预览博文观察效果。
代码（二）：所有参数都写gif文件中。
制作结束后，点击生成代码（二）下面的“复制”按钮，自动将生成的博客代码和gif文件内容复制到你的电脑的“粘贴板”了，可直接“粘贴”电脑的“记事本”。然后将博客代码和gif文件内容分离，上传gif文件得到网址后，将网址替换博客代码中的”XXX.gif“，最后将博客代码粘贴到博文代码编辑栏。预览博文观察效果。
建议使用”代码（二）“方法，代码简洁，且适用各种浏览器。
6、在博文中调整播放器的“相对定位”代码。
......
这是“相对定位”代码。
．TOP: Xpx，离上一元素底部的距离。LEFT: Xpx，离博文页面左边的距离。
![如何用css设置网页字体[多图]](/aiimages/%E5%A6%82%E4%BD%95%E7%94%A8css%E8%AE%BE%E7%BD%AE%E7%BD%91%E9%A1%B5%E5%AD%97%E4%BD%93%5B%E5%A4%9A%E5%9B%BE%5D.png)