CSS技巧

1. 居中

<div class="div">块居中</div>

.div { position: relative; left: 50%; width: 200px; height:100px; margin-left: -100px; }

或

.div { width: 200px; height: 100px; margin: 0 auto; }

2. 单独移动块

.div { position: relative; top:10px; }

3. 消除span、a、img、等行内元素留白

在父标签中设置 font-size: 0; 或 { display: block; float: left; } 或 { display: inline-block; }

4. 标题行中右边的“查看更多”

<h3>我是标题<a>查看更多</a></h3>

h3 { position: relative; text-align: left; }

h3 a { position: absolute; right: 10px; }

5. 对行内元素进行宽高设置，需先转换成块元素

a { display: block/inline-block; width: 100px; height: 100px;  }

6. 文字超出块显示省略号

p { width: 100px; line-height: 20px; overflow: hidden; text-overflow: ellipsis; white-space:nowrap; }