/*方法1：*/img{display:block;} 方法2：/*img{vertical-align:top;}*/

input{vertical-align:middle;}

#test{height:25px;line-height:25px;}/* 只需设置文本的行高等于容器的高度即可 */

a:link{color:#03c;}a:visited{color:#666;}a:hover{color:#f30;}a:active{color:#c30;}/* 按L-V-H-A的顺序设置超链接样式即可，可速记为LoVe（喜欢）HAte（讨厌）*/

#test{width:150px;white-space:nowrap;}/* 设置容器的宽度和white-space为nowrap即可，其效果类似标签 */

#test{width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}/* 首先需设置将文本强制在一行内显示，然后将溢出的文本通过overflow:hidden截断，并以text-overflow:ellipsis方式将截断的文本显示为省略号。 */

#test{width:150px;word-wrap:break-word;}/* word-wrap的break-word值允许单词内换行 */

/*方法1：*/#test{clear:both;}/* #test为浮动元素的下一个兄弟元素 *//*方法2：*/#test{display:block;zoom:1;overflow:hidden;}/* #test为浮动元素的父元素。zoom:1也可以替换为固定的width或height *//*方法3：*/#test{zoom:1;}#test:after{display:block;clear:both;visibility:hidden;height:0;content:‘‘;}/* #test为浮动元素的父元素 */

#test{display:table-cell;*display:block;*position:relative;width:200px;height:200px;text-align:center;vertical-align:middle;}#test p{*position:absolute;*top:50%;*left:50%;margin:0;}#test p img{*position:relative;*top:-50%;*left:-50%;vertical-align:middle;}/* #test是img的祖父节点，p是img的父节点。Know More：未知尺寸的图片如何水平垂直居中 */

span{display:block;width:200px;height:100px;}/* 要使内联元素可以设置宽高，只需将其定义为块级或者内联块级元素即可。所以方法非常多样，既可以设置display属性，也可以设置float属性，或者position属性等等。 */

a{outline:none;}

.outer{width:200px;height:200px;background:rgba(0,0,0,.2);background:#000\9;filter:alpha(opacity=20)\9;}.outer .inner{position:relative\9;}/*我是不透明的内容*//* 高级浏览器直接使用rgba颜色值实现；IE浏览器在定义容器透明的同时，让子节点相对定位，也可达到效果 */

/*方法1：*/#test{border-collapse:collapse;border:1px solid #ddd;}#test th,#test td{border:1px solid #ddd;}姓名 Joy Du年龄 26/*方法2：*/#test{border-spacing:1px;background:#ddd;}#test tr{background:#fff;}姓名 Joy Du年龄 26/* IE7及更早浏览器不支持border-spacing属性，但是可以通过table的标签属性cellspacing来替代。*/