div+css小技巧(持续更新中)

最近的学习中积累了一些关 于div+css的小技巧，感觉虽然不是很难，但是如果不知道的话，确实需要很长时间去查。

1div中文本垂直居中

网上有很多种，刚哥提醒我使用label，最后使用的是div嵌套table。感觉还是在table中容易实现对字体的操控

<div style="margin:2px;padding:0px;line-height:10px;text-align:center;float:left;height:20px;">
       
        <table style="text-align:center;margin:0px;padding:0px;height:20px;">
        <tr><td>开课学院:</td></tr>
</table>
    </div>

2首行缩进2个字的距离

<td style="text-indent: 2em;">课程:</td>

效果图

3特别小心float:left

常见的块级元素有：h1~h6、p、div、ul、table等，常见的行内元素有：span、a、input、select等。 行内元素与块级元素有很多区别。首先，块级元素独占一行，行级元素不会。同时行级元素无法设置高和宽。但是如果给行级元素设置float:left就会让行级元素变成块级元素。如果给某个div设置了float:left,会影响其他div块的布局。如果既想实现多个div块在同行，又不想影响其他div块，请用父级div包裹它们，并设置overflow:hidden。代码如下

<div style="height:20px;overflow:hidden;">
         <p style="width:85px;float:left;"></p>
       <div style="margin:2px;padding:0px;line-height:10px;text-align:center;float:left;height:20px;">
          <table style="text-align:center;margin:0px;padding:0px;height:20px;">
          <tr><td style="text-indent: 2em;">课程:</td></tr>
          </table>
       </div>
          <p style="width:10px;float:left;"></p>
          <select class="easyui-combobox" name="state" style="width:200px;float:left;">
          <option>英语</option>
          <option>数学</option>
          </select>
        
   </div>

关于这一部分的学习，推荐博客:http://www.jb51.net/css/33740.html

4音频文件的播放

<div id="OBJplayerDiv"><embed id="OBJplayer" style="FILTER: invert(); WIDTH: 315px; HEIGHT: 50px" src="../Music/03.mp3" type="audio/mpeg" autostart="true"  /></div>

缺点在于火狐浏览器无法识别。如何做出兼容的标记，还请大神指导。

5height:100%无效的原因

很多时候我们会发现如果给标签设置height:100%,结果确是无效的。原因不明，解决方法却很简单，给父节点设置高度