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;居中

111、清除浮动：浮动一定要封闭到一个盒子中，否则就会对页面后续元素产生影响
.clearfloat{
    zoom: 1;
}
.clearfloat:after{
    display: block;
    clear: both;
    content: "";
    visibility: hidden;
    height: 0;
}

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;
}