1.清除浮動的方法

新建一個樣式選擇器CSS命名為“.clear”，並且對應選擇器樣式為“clear:both”，然後我們在父級“”結束前加此div引入“class=“clear””樣式。這樣即可清除浮動。

對父級CSS選擇器加overflow:hidden樣式，可以清除父級內使用float產生浮動。優點是可以很少CSS程式碼即可解決浮動產生。

2.用PHP壓縮CSS程式碼

<?php
ob_start ("ob_gzhandler");
header("Content-type: text/css; charset: UTF-8");
header("Cache-Control: must-revalidate");
$offset = 60 * 60 ;
$ExpStr = "Expires: " .
gmdate("D, d M Y H:i:s",
time() + $offset) . " GMT";
header($ExpStr);
?>
body 
 
{ color: red; }

3.翻轉圖片

img {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}

4.Clearfix

.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix 
 
{ display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

5.隱藏和文字文字縮排 

h1 {
text-indent:-9999px;
margin:0 auto;
width:400px;
height:100px;
background:transparent url("images/logo.jpg") no-repeat scroll
 
;
}

6.根據不同的檔案型別，展示不同的連結，看下面的程式碼

/* external links */
a[href^="http://"]{
padding-right: 20px;
background: url(external.gif) no-repeat center right;
}
/* emails */
a[href^="mailto:"]{
padding-right: 20px;
background: url(email.png) no-repeat center right;
}
/* pdfs */
a[href$=".pdf"]{
padding-right: 20px;
background: url(pdf.png) no-repeat center right;
}

7.去除textarea在IE當中的滾動條效果

textarea{ 
overflow:auto; 
}

8.CSS文字陰影效果

p { text-shadow: 4px 4px 4px #001; }

9.垂直居中

.container {
min-height: 10em;
display: table-cell;
vertical-align: middle;
}

10.列印分頁符

.page-break{
page-break-before:always;
}

11.文字旋轉

.rotate {
/* Safari */
-webkit-transform: rotate(-90deg);
/* Firefox */
-moz-transform: rotate(-90deg);
/* IE */
-ms-transform: rotate(-90deg);
/* Opera */
-o-transform: rotate(-90deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

12.A連結偽類（按順序）

a:link {color: blue;}
a:visited {color: purple;}
a:hover {color: red;}
a:active {color: yellow;}

13.設計梯子型文字

h1 {
font-size: 72px;
background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#333));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

14.使用**@import**匯入外部CSS檔案

<style type="text/css">
    @import url("外部樣式表的檔名稱");
</style>