CSS备忘

abstract：垂直居中：           先height再ling-height,都设成一样高span 垂直居中：vertical-align:50%设置外边距：           margin-top,margin-left,margin-rig

垂直居中：
           先height再ling-height,都设成一样高

span 垂直居中：vertical-align:50%
设置外边距：
           margin-top,margin-left,margin-right，margin-bottom
div背景单张铺满设置：
           width: 30px;
           height: 30px;
           line-height: 30px;
           background-image: url(../image/lzhf/one.png);
           background-repeat: no-repeat;
           background-size: 100% auto;
div浮在div上：
           <div style="position: relative;height: 30px;width: 100%">
              <div style="height: 30px; overflow: hidden;position: absolute;z-index: 2;width: 100%;">
                  <img alt="主要职责" style="width: 100%; height: 30px;"
                      src="../../image/ljfy/zcjgtop.png">
              </div>

              <div style="position: absolute;z-index: 3;margin-left:10px;height: 30px;line-height: 30px;">
                  <img src="../../image/ljfy/zyzzc.png" width="30" height="30">
              </div>
              <div style="position: absolute;z-index: 3;margin-left: 38px;height: 30px;line-height: 30px;">
                  <font style="font-weight: bold">共有内设机构20个</font>
              </div>
          </div>   

解决非固定宽度的浮动问题：

结束加上<div style="clear:both;height: 0px;"></div>

js改变背景颜色：
document.getElementById('mycolor').style.background=yc

显示不显示：

document.getElementById("ah2").style.display = "block";

$("#id").css('display','none'); 

$("#id")[0].style.display = 'none'; 

图片在div中居中显示(水平居中和垂直居中)：
水平居中：div设置：text-align:center;
img设置：width:图片宽度; margin:0 auto;

垂直居中：div设置：position:relative;
img设置：position:absolute; top:50%; height:图片高度; margin-top:图片高度的一半;

让两个Div并排显示：

<div style="width:300px; height:auto; float:left; display:inline">AAAA</div>   

<div style="width:300px; height:auto; float:left; display:inline">BBBB</div>  

table中的td换行:

在table定义中，添加style="table-layout:fixed;"

在对需要换行的td中，添加style="word-break:break-all;"

预打印：

分页  <br style="page-break-after: always;" />

打印时不显示  

<style> 
@media print { 
　　.noprint { 
　　display: none 
　　} 
} 
</style> 
<tr align="center" class="noprint">

点击文字可以选中相应的checkbox  ：

<input id="check1" name="tag" type="checkbox" value="长发"/><label for="check1">长发</label>

图片居中：

 img{ display:block; margin:0 auto;}

优先级：

.style1{
 color: #5a5100 !important;
 text-decoration: none;
}