CSS实用技巧01

CSS实用技巧01

01.DIV水平居中

DIV 水平居中很简单，只需要设置DIV的宽带以及让左右margins设置成auto：

div#container {width: 960px; margin: 0 auto }

02.文字垂直居中
单行文字居中，只需要将行高和容器高度设置成一样即可。比如下面的HTML代码：
<div id="container">我是一行字</div>
然后通过下面的样式就可以居中：

div#container {height: 35px; line-height: 35px;}

如何你有很多行字，只要将行高设置成容器的高度的1/N就好。

03.DIV垂直居中【推】
比如有以下两个div，如何让包在中间的div垂直居中。
<div id="f">
　<div id="s">Some Things!</div>
</div>
首先，将外层容器的定位为relative。

div#f{ position:relative; height:500px;}

然后，将里面的容器定位设置成absolute，再将它的左上角沿y轴下移50%，最后将它margin-top上移本身高度的50%即可。

div#s { position: absolute; top: 50%; height: 250px; margin-top: -125px;}

使用同样的思路，也可以做出水平居中的效果。

04.自适应宽带的图片[推]
可以通过以下样式实现只适用外层容器大小的图片:

img {max-width: 100%}
/* IE 6 hack */
<!--[if IE 6]>
img {width: 100%}
<![endif]-->

<div style="width:100px;"><img src="pic.jpg"/></div>


05.3D按钮
要想让按钮具有3D效果，可以将它的左上部边框设为浅色，右下部边框设为深色即可。

div#button {
background: #888;
border: 1px solid;
border-color: #999 #777 #777 #999;
}

06.link 状态的设置顺序
a:link
a:visited
a:hover
a:active
简单记忆法：love hate (LVHA)


07.CSS的优先级
基本规则是：行内样式 > id样式 > class样式 > 标签名样式。

08.IE中min-height修正
由于IE6不支持min-height，我们可以通过以下这些方式修正：

/* 方法一 */
.element {
　min-height: 500px;
　height: auto !important;
　height: 500px;
}
/* 方法二 */
.element {
　min-height: 500px
　_height: 500px /* _ 只有IE6才能读取 */
}

09.突显焦点元素

input:focus { border: 2px solid green;}

10.!important
多条CSS语句冲突时，具有!important的语句将覆盖其他语句。由于IE不支持!important，所以也可以利用它区分不同的浏览器。

/* IE 显示蓝色标题，其他浏览器显示红色标题 */
h1 {
color: red !important;
color: blue;
}

11.CSS实现提示框
当鼠标移动到链接上方，会自动出现一个提示框:
<a class="tooltip" href="#">Link<span>Tooltips</span></a>

a.tooltip {position: relative}
a.tooltip span {display:none; padding:5px; width:200px;}
a:hover {background:#fff;} /*background-color is a must for IE6*/
a.tooltip:hover span{display:inline; position:absolute;}

12. Block和inline元素对比
所有的HTML元素都属于block和inline之一。
block元素的特点是：
1. 总是在新行上开始；
2. 高度，行高以及顶和底边距都可控制;
3. 宽度缺省是它的容器的100%，除非设定一个宽度;
<div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子。
inline元素的特点是：
1. 和其他元素都在一行上；
2. 高，行高及顶和底边距不可改变；
3. 宽度就是它的文字或图片的宽度，不可改变。
<span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子。

用display: inline 或display: block命令就可以改变一个元素的这一特性。什么时候需要改变这一属性呢？
1. 让一个inline元素从新行开始；
2.让块元素和其他元素保持在一行上；
3.控制inline元素的宽度（对导航条特别有用）；
4.控制inline元素的高度；
5.无须设定宽度即可为一个块元素设定与文字同宽的背景色。