css技巧總結

一.自由佈局的相關技巧

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;  }