学步园

一.自由布局的相关技巧

1.尽量不用指定像素宽度(width:300px)

用百分比或者auto(width:90%或者width:auto)

2.相对大小字体

{font-size:0.875em}

small元素的大小是默认大小的0.875倍，即14像素（14/16=0.875) 默认是16px

3.流动布局

float:left; clear:both的活用

4.选择加载CSS

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 400px)" href="tinyScreen.css" />

<link rel="stylesheet" type="text/css" media="screen and (min-width: 400px) and (max-device-width: 600px)" href="smallScreen.css" />

@media screen and (max-device-width:400px) {

    .column {float:none;width:auto;}

　　#sidebar {display:none;}

}

5.图片的自动缩放

这只要一行CSS代码：

img { max-width: 100%;}

这行代码对于大多数嵌入网页的视频也有效，所以可以写成　　

img, object { max-width: 100%;}

老版本的IE不支持max-width，所以只好写成：

img { width: 100%; }

此外，windows平台缩放图片时，可能出现图像失真现象。这时，可以尝试使用IE的专有命令

img { -ms-interpolation-mode: bicubic; }

二.常用CSS技巧

1.容器的垂直居中

small要在big容器里垂直居中

<div id="big">
　　　<div id="small">
　　　</div>
</div>

div#big{
　　position:relative;
　　height:480px;
}
div#small {
　　position: absolute;
　　top: 50%;
　　height: 240px;
　　margin-top: -120px;
}

里面有2个技巧：

1.position:absolute定位的话会寻找第一个外层position为absolute或者是relative的。

2.内部元素如果要居中只要top父元素的50%,然后margin-top反方向自己的50%的高度就可以了，尤其是布局类似tabel最为有效

2.用icon来替代ul li的小黑点

　　ul {list-style: none}
　　ul li { 
　　　　background-image: url("path-to-your-image"); 
　　　　background-repeat: none; 
　　　　background-position: 0 0.5em; 
　　}

3.去除float脱离文档流的方法

详细可以查看http://www.ruanyifeng.com/blog/2009/04/float_clearing.html

主要方法大致是在float元素后面加入clear:both;

或者在父级元素上加入style="overflow:hidden",也会自动消除子元素的float的脱离文档流的行文

三.CSS特效

1.CSS使button有3D效果

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

2.CSS3水印字

.element {
    color: #222;
    text-shadow: 0px 2px 3px #555;
}