HTML+CSS基础篇——小技巧集合

1、清除两个input之间空隙
    a、设置两个input的父div的font-size=0
    b、两个input都 float:left 浮动起来，然后设置父div宽度width，最后设置父div的 margin: 0 auto; 就可以让两者水平居中了

11、两个input不对奇
【解决】两个都设置vertical-align: middle;居中

2、无序列表水平展示
    a、ul { list-style: none;   /*消除默认样式*/ }
    b、li { float: left;  /*左浮动起来*/  }

3、水平居中显示
    a、设置水平固定宽度
    b、设置margin: 0 auto
特殊情况：比如：
a、知道父元素960px; (div)
b、给该元素套一个p标签,并设p标签一个宽度值，如600px;
c、再设置p标签水平居中, text-align: center;
c、设置p标签margin-left： 180px;
就这么愉快地搞定
4、水平并垂直居中(http://blog.csdn.net/freshlover/article/details/11579669)
    0、设置父元素: position: relative;
    a、设置固定宽高
    b、position: absolute;margin: auto;
       top: 0;left: 0;bottom: 0;right: 0;
    bb(另一种方式)、width: 300px;  height: 200px; padding: 20px;  
        position: absolute;  top: 50%; left: 50%;  
        margin-left: -170px; /* (width + padding)/2 */  
        margin-top: -120px; /* (height + padding)/2 */  

5、浮动会让元素塌陷。即被浮动元素的父元素不具有高度。例如：一个父元素包含了浮动元素，它将塌陷具有零高度。怎么让父元素高度正常?
    a、在父元素中设置clear: both; overflow:hidden

6、清除点击后的超链接字体系统默认颜色

/*控制超链接的初始状态和访问状态*/
li a:link, li a:visited {
    color: #ccc;
    text-decoration: none;
}
7、注释，对应模块的开始和结束
    
    
8、img小图标的居中(经常是在文字和图标一行垂直显示的情况)
    vertical-align: middle;
9、文字在行中垂直居中
    a、设置height 和 line-height的高度为父元素的的高度值
    b、或者巧妙使用margin
10、background具体图片样式要在设置图片资源后才生效
    background-size: contain;/*要放在background url后面设置才有效果*/
11、取消button默认背景样式
    background: none;

12、文字垂直显示
    设置width的宽度(1em)或设置一个小值
13、简写css
  a、border边框属性

//border-width；border-style；border-color
border:1px solid yellow;

  b、background背景属性

//background-color；background-image；background-repeat；background-position
background: #ccc url(uimage.png) no-repeat top center;
background-size: contain;

  c、font字体属性

//font-style；font-variant；font-weight；font-size/line-height；font-family
font:italic bold 14px/18px arial, sans-serif;

  d、list-style列表属性

//list-style-type；list-style-position；list-style-image
list-style:square inside url(‘/img/uimage.gif’);

14、让一个div下的图片img和文字span垂直对齐
【解决】

.xxxDiv *{
    vertical-align: middle;
}