簡單的30個(gè)常用的CSS代碼段克婶，比較基礎(chǔ)立美，有些可能已經(jīng)不需要前綴盾似，使用時(shí)請注意氓涣。
1.清除浮動(dòng)（by Nicolas Gallagher）
.clearfix:before, .clearfix:after {content:"";display:table;}
.clearfix:after {clear:both;}
/*IE 6/7*/
.clearfix { *zoom:1;}
適用情形：父級對象盒子不能被設(shè)置了浮動(dòng)的子對象撐開汪拥，作用在父級對象上
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.container {width: 400px; border: 1px solid red;}
.div1 {float: left; width: 100px; height: 100px; border: 1px solid blue;}
.div2 {float: right; width: 200px; height:200px; border: 1px solid yellow;}
</style>
</head>
<body>
<div class="container">
<div class="div1 clearfix">float:left</div>
<div class="div2 clearfix">float:right</div>
</div>
</body>
</html>
未清除浮動(dòng)
簡單解釋：
class是.clearfix的元素應(yīng)該是包含子元素的父元素达传，即“為父元素追加一個(gè)看不見的塊元素”，使用 :after 偽類來提供浮動(dòng)塊后的 clear:both,這里的空白使用的是 display: table迫筑。
“*”符號只有IE 6/7才會(huì)識(shí)別宪赶，以便兼容。清除浮動(dòng)后代碼如下脯燃。
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.container { width:400px; border: 1px solid red; }
.div1 { float: left; width: 100px; height: 100px; border: 1px solid blue;}
.div2 {float: right; width: 200px; height:200px; border: 1px solid yellow;}
.container:after {content:"";display:table; clear:both;}
/*IE 6/7*/
.container { *zoom:1;}
</style>
</head>
<body>
<div class="container">
<div class="div1 ">float:left</div>
<div class="div2 ">float:right</div>
</div>
</div>
</body>
</html>
清除浮動(dòng)后
:before 偽類搂妻。用來處理 top-margin 邊折疊的，跟清理浮動(dòng)沒有多大的關(guān)系辕棚。但因?yàn)楦?dòng)會(huì)創(chuàng)建BFC欲主，這樣浮動(dòng)元素上的另而一元素上如果剛好有 margin-bottom 而這個(gè)浮動(dòng)元素剛好有margin-top 的話，應(yīng)該讓他們不折疊（雖然這種情況并不常見）逝嚎。
2.跨瀏覽器設(shè)置透明度
.transparent {
filter: alpha(opacity = 50); /*IE*/
-khtml-opacity: 0.5; /*老版本safari*/
-moz-opacity: 0.5; /*mozilla扁瓢，netscape*/
opacity: 0.5; /*fx，safari懈糯，opera*/
}
3.設(shè)置圓角
#container {
-webkit-border-radius: 4px 3px 6px 10px;
-moz-border-radius: 4px 3px 6px 10px;
-o-border-radius: 4px 3px 6px 10px;
border-radius: 4px 3px 6px 10px;
}
4.一般媒體查詢方法(針對PC涤妒、智能設(shè)備)
/* 智能設(shè)備（橫屏和豎屏） ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* 智能設(shè)備 (豎屏) ----------- */
@media only screen
and (min-width : 321px) {
/* 樣式設(shè)計(jì) */
}
/* 智能設(shè)備 (橫屏) ----------- */
@media only screen
and (max-width : 320px) {
/* 樣式設(shè)計(jì)*/
}
/* iPads (橫屏和豎屏) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* 樣式設(shè)計(jì) */
}
/* iPads (豎屏) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* 樣式設(shè)計(jì) */
}
/* iPads (橫屏) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* 樣式設(shè)計(jì) */
}
/* 臺(tái)式機(jī)和筆記本 ----------- */
@media only screen
and (min-width : 1224px) {
/* 樣式設(shè)計(jì) */
}
/* 超大屏 ----------- */
@media only screen
and (min-width : 1824px) {
/* 樣式設(shè)計(jì) */
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* 樣式設(shè)計(jì) */
}
5.css字體屬性簡寫
body {
font: font-style font-variant font-weight font-size line-height font-family;
}
6.自定義文本選擇的高亮效果
::selection { background: #e2eae2; }
::-moz-selection { background: #e2eae2; }
::-webkit-selection { background: #e2eae2; }
7.錨鏈接偽類的設(shè)置
a:link { color: blue;}
a:visited { color: purple;}
a:hover { color: red;}
a:active { color: yellow;}
8.全屏背景
html {
background: url('images/bg.jpg') np-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
9.垂直居中內(nèi)容
.container {
min-height: 6.5em;
display: table-cell;
vertical-align: middle;
}
10.強(qiáng)制垂直滾動(dòng)條
html { height:101% }
11.設(shè)置自定義字體
@font-face {
font-family: 'MyFontFamily';
src:url('webfont.eot'); /*IE9 Compat Modes*/
src:url('webfont.eot?#iefix') format('embedded-opentype'), /*IE6-IE8*/
url('myfont-webfont.woff') format('woff'), /*Modern Browsers*/
url('myfont-webfont.ttf') format('truetype'), /*Safari, Android ,iOS*/
url('myfont-webfont.svg#svgFontName') format('svg'); /*Legacy iOS*/
}
body {
font-family:'MyWebFont', Arial, sans-serif;
}
12.自定義段落首字母
p:first-letter{
display:block;
margin:5px 0 0 5px;
float: left;
color: #ff3366;
font-size: 5.4em;
font-family: Georgia, Times New Roman, serif;
}
13.CSS3盒子模型內(nèi)部陰影
#mydiv {
-moz-box-shadow: inset 2px 0 4px #000;
-webkit-box-shadow: inset 2px 0 4px #000;
box-shadow: inset 2px 0 4px #000;
}
14.CSS3盒子模型外部陰影
#mydiv {
-webkit-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);
-moz-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);
box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);
}
15.固定寬度的居中布局
#page-wrap {
width: 800px;
margin: 0 auto;
}
16.禁用移動(dòng)webkit瀏覽器中的高亮顯示
body {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
17.CSS省略號
div{
width:200px; /*設(shè)置寬度*/
white-space:nowrap; /*設(shè)置不折行*/
text-overflow:ellipsis; /*這就是省略號嘍*/
-o-text-overflow:ellipsis; /*兼容opera*/
overflow: hidden; /*將超出的部分設(shè)置為隱藏*/
}
18.CSS3斑馬條紋
tbody tr:nth-child(odd) {
background-color:#CCC;
}
19.給瀏覽器的滾動(dòng)條加上顏色
body{
scrollbar-face-color:#666666;
scrollbar-shadow-color:#FFFFFF;
scrollbar-highlight-color:#FFFFFF;
scrollbar-3dlight-color:#3366FF;
scrollbar-darkshadow-color:#666666;
scrollbar-track-color:#EEEEEE;
scrollbar-arrow-color:#666666;
}
20.修復(fù) IE6/7 margin/padding雙倍 間距錯(cuò)誤
ul li
{
float: right;
margin-right: 10px;
*display: inline; /*Target IE7 and bellow*/
_display: inline; /*Target IE6 and bellow*/
}
21.文字陰影
text-shadow:5px 5px 5px #6600FF;
22.文字的水平居中
.container {
text-align:center;
}
23.文字的垂直居中
.container {
height:35px;
line-height:35px;
}
24.讓子元素相對于父元素垂直居中
#big {
position: relative;
height: 480px;
}
#small {
position: absolute;
top: 50%;
height: 240px;
margin-top: -120px;
<div id="big">
<div id="samll">
</div>
</div>
25.圖片寬度的自適應(yīng)
img {
max-width:100%;
}
_img {
width:100%;
}
26.簡單3D按鈕
#button {
background:#888;
border:1px solid;
border-color: #999 #777 #777 #999;
}
27.用圖片美化列表標(biāo)志
ul {
list-style:none;
}
ul li {
background-image:url("path-to-your-image");
background-repeat:none;
background-position:0 0.5em;
}
28.用css畫三角形(見另一篇博文《CSS畫三角形的一種方法》）
.triangle{
border-color: transparent transparent green transparent;
border-style:solid;
border-width:0px 300px 300px 300px;
height:0px;
width:0px;
}
29.禁止自動(dòng)換行
h1 { white-space: nowrap;}
30.使用圖片替換<h1>標(biāo)簽元素又不影響SEO
h1 {
text-indent: -9999px;
background:url("h1-image.jpg") no-repeat;
width:200px;
height:50xp;
}
