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

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

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

3、水平居中显示
a、设置水平固定宽度
b、设置margin: 0 auto

4、水平并垂直居中(http://blog.csdn.net/freshlover/article/details/11579669)
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、注释，对应模块的开始和结束
<!-- xxxdiv start -->
<!-- xxxdiv end -->
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’);