1. 文字水平居中

將一段文字置於容器的水平中點，只要設定text-align屬性即可：

text-align:center;

2. 容器水平居中

先該容器設定一個明確寬度，然後將margin的水平值設為auto即可。

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

3. 文字垂直居中

單行文字的垂直居中，只要將行高與容器高設為相等即可。

比如，容器中有一行數字。

<div id="container">1234567890</div>

然後CSS這樣寫：

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

如果有n行文字，那麼將行高設為容器高度的n分之一即可。

4. 容器垂直居中

比如，有一大一小兩個容器，請問如何將小容器垂直居中？

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

首先，將大容器的定位為relative。

div#big{position:relative;height:480px; }

然後，將小容器定位為absolute，再將它的左上角沿y軸下移50%，最後將它margin-top上移本身高度的50%即可。

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

5. 圖片寬度自適應

如何使得較大的圖片，能夠自動適應小容器的寬度？CSS可以這樣寫：

img {max-width: 100%}

6. 3D按鈕

要使按鈕具有3D效果，只要將它的左上部邊框設為淺色，右下部邊框設為深色即可。

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

7. font屬性快捷寫法

font快捷寫法的格式為：

body {　font: font-style font-variant font-weight font-size line-height font-family; }

所以，

body { font-family: Arial, Helvetica, sans-serif; font-size: 13px; font-weight: normal; font-variant: small-caps; font-style: italic; line-height: 150%; }

可以被寫成：

body { font: italic small-caps normal 13px/150% Arial, Helvetica, sans-serif; }

8. link狀態設定順序

link的四種狀態，需要按照下面的前後順序進行設定：

a:link a:visited a:hover a:active

9. CSS優先性

如果同一個容器被多條CSS語句定義，那麼哪一個定義優先呢？

基本規則是：

行內樣式 > id樣式 > class樣式 > 標籤名樣式

比如，有一個元素：

<div id="ID" class="CLASS" style="color:black;"></div>

行內樣式是最優先的，然後其他設定的優先性，從低到高依次為：

div < .class < div.class < #id < div#id < #id.class < div#id.class

10. font-size基準

瀏覽器的預設字型大小是16px，你可以先將基準字型大小設為10px：

body {font-size:62.5%;}

後面統一採用em作為字型單位，2.4em就表示24px。

h1 {font-size: 2.4 em}

11. Text-transform和Font Variant

Text-transform用於將所有字母變成小寫字母、大寫字母或首字母大寫：

p {text-transform: uppercase} p {text-transform: lowercase} p {text-transform: capitalize}

Font Variant用於將字型變成小型的大寫字母（即與小寫字母等高的大寫字母）。

p {font-variant: small-caps}

12. CSS重置

CSS重置用於取消瀏覽器的內建樣式，請參考YUI和Eric Meyer的樣式表。

13. 用圖片充當列表標誌

預設情況下，瀏覽器使用一個黑圓圈作為列表標誌，可以用圖片取代它：

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

14. 透明

將一個容器設為透明，可以使用下面的程式碼：

.element { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; }

在這四行CSS語句中，第一行是IE專用的，第二行用於Firefox，第三行用於webkit核心的瀏覽器，第四行用於Opera。

15. CSS三角形

如何使用CSS生成一個三角形？

先編寫一個空元素

<div class="triangle"></div>

然後，將它四個邊框中的三個邊框設為透明，剩下一個設為可見，就可以生成三角形效果：

.triangle { border-color: transparent transparent green transparent; border-style: solid; border-width: 0px 300px 300px 300px; height: 0px; width: 0px; }

16. 禁止自動換行

如果你希望文字在一行中顯示完成，不要自動換行，CSS命令如下：

h1 { white-space:nowrap; }

17. 用圖片替換文字

有時我們需要在標題欄中使用圖片，但是又必須保證搜尋引擎能夠讀到標題，CSS語句可以這樣寫：

h1 { text-indent:-9999px; background:url("h1-image.jpg") no-repeat; width:200px; height:50px; }

18. 獲得焦點的表單元素

當一個表單元素獲得焦點時，可以將其突出顯示：

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

19. !important規則

多條CSS語句互相沖突時，具有!important的語句將覆蓋其他語句。由於IE不支援!important，所以也可以利用它區分不同的瀏覽器。

h1 { color: red !important; color: blue; }

上面這段語句的結果是，其他瀏覽器都顯示紅色標題，只有IE顯示藍色標題。

20. CSS提示框

當滑鼠移動到連結上方，會自動出現一個提示框。

<a class="tooltip" href="#">連結文字 <span>提示文字</span></a>

CSS這樣寫：

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

21. 各類瀏覽器的專用語句

/* IE6 and below */ * html #uno { color: red } /* IE7 */ *:first-child+html #dos { color: red } /* IE7, FF, Saf, Opera */ html>body #tres { color: red } /* IE8, FF, Saf, Opera (Everything but IE 6,7) */ html>/**/body #cuatro { color: red } /* Opera 9.27 and below, safari 2 */ html:first-child #cinco { color: red } /* Safari 2-3 */ html[xmlns*=""] body:last-child #seis { color: red } /* safari 3+, chrome 1+, opera9+, ff 3.5+ */ body:nth-of-type(1) #siete { color: red } /* safari 3+, chrome 1+, opera9+, ff 3.5+ */ body:first-of-type #ocho { color: red } /* saf3+, chrome1+ */ @media screen and (-webkit-min-device-pixel-ratio:0) { #diez { color: red } } /* iPhone / mobile webkit */ @media screen and (max-device-width: 480px) { #veintiseis { color: red } } /* Safari 2 - 3.1 */ html[xmlns*=""]:root #trece { color: red } /* Safari 2 - 3.1, Opera 9.25 */ *|html[xmlns*=""] #catorce { color: red } /* Everything but IE6-8 */ :root *> #quince { color: red } /* IE7 */ *+html #dieciocho { color: red } /* Firefox only. 1+ */ #veinticuatro, x:-moz-any-link { color: red } /* Firefox 3.0+ */ #veinticinco, x:-moz-any-link, x:default { color: red } /***** Attribute Hacks ******/ /* IE6 */ #once { _color: blue } /* IE6, IE7 */ #doce { *color: blue; /* or #color: blue */ } /* Everything but IE6 */ #diecisiete { color/**/: blue } /* IE6, IE7, IE8 */ #diecinueve { color: blue9; } /* IE7, IE8 */ #veinte { color/***/: blue9; } /* IE6, IE7 -- acts as an !important */ #veintesiete { color: blue !ie; } /* string after ! can be anything */

22. 容器的水平和垂直居中

HTML程式碼如下：

<figure class='logo'>　<span></span>　<img class='photo'/></figure>

CSS程式碼如下：

.logo { display: block; text-align: center; display: block; text-align: center; vertical-align: middle; border: 4px solid #dddddd; padding: 4px; height: 74px; width: 74px; } .logo * { display: inline-block; height: 100%; vertical-align: middle; } .logo .photo { height: auto; width: auto; max-width: 100%; max-height: 100%; }

23. CSS陰影

外陰影：

.shadow { -moz-box-shadow: 5px 5px 5px #ccc; -webkit-box-shadow: 5px 5px 5px #ccc; box-shadow: 5px 5px 5px #ccc; }

內陰影：

.shadow {　-moz-box-shadow:inset 0 0 10px #000000;　-webkit-box-shadow:inset 0 0 10px #000000;　box-shadow:inset 0 0 10px #000000; }

24. 取消IE文字框的滾動條

textarea { overflow: auto; }

25. 黑白影象

這段程式碼會讓你的彩色照片顯示為黑白照片，是不是很酷？

img.desaturate { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%);}

26. 使用 :not() 在選單上應用/取消應用邊框

先給每一個選單項新增邊框

/* add border */.nav li { border-right: 1px solid #666;}

然後再除去最後一個元素

// remove border /.nav li:last-child { border-right: none;}

可以直接使用 :not() 偽類來應用元素：

.nav li:not(:last-child) { border-right: 1px solid #666;}

這樣程式碼就乾淨，易讀，易於理解了。

當然，如果你的新元素有兄弟元素的話，也可以使用通用的兄弟選擇符（~）：

.nav li:first-child ~ li { border-left: 1px solid #666;}

27. 頁面頂部陰影

下面這個簡單的 CSS3 程式碼片段可以給網頁加上漂亮的頂部陰影效果：

body:before { content: ""; position: fixed;top: -10px; left: 0; width: 100%;height: 10px; -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8); -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8); box-shadow: 0px 0px 10px rgba(0,0,0,.8); z-index: 100;}

28. 給 body 新增行高

你不需要分別新增 line-height 到每個p,h標記等。只要新增到 body 即可,這樣文字元素就可以很容易地從 body 繼承。

body { line-height: 1;}

29. 所有一切都垂直居中

要將所有元素垂直居中，太簡單了：注意：在IE11中要小心flexbox。

html, body { height: 100%; margin: 0;}body { -webkit-align-items: center; -ms-flex-align: center; align-items: center; display: -webkit-flex; display: flex;}

30. 逗號分隔的列表

讓HTML列表項看上去像一個真正的，用逗號分隔的列表,對最後一個列表項使用 :not() 偽類。

ul > li:not(:last-child)::after { content: ",";}

31. 使用負的 nth-child 選擇專案

在CSS中使用負的 nth-child 選擇專案1到專案n。

li { display: none;}/* select items 1 through 3 and display them */li:nth-child(-n+3) { display: block;}

32. 對圖示使用 SVG

我們沒有理由不對圖示使用SVG，SVG對所有的解析度型別都具有良好的擴充套件性，並支援所有瀏覽器都回歸到IE9。這樣可以避開.png、.jpg或.gif檔案了。

.logo { background: url("logo.svg");}

33. 優化顯示文字

有時，字型並不能在所有裝置上都達到最佳的顯示，所以可以讓裝置瀏覽器來幫助你：

html { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;}

注：請負責任地使用 optimizeLegibility。此外，IE /Edge沒有 text-rendering 支援。

34. 對純 CSS 滑塊使用 max-height

使用 max-height 和溢位隱藏來實現只有CSS的滑塊：

.slider ul { max-height: 0; overlow: hidden;}.slider:hover ul { max-height: 1000px; transition: .3s ease;}

35. 繼承 box-sizing

讓 box-sizing 繼承 html：

html { box-sizing: border-box;}*, *:before, *:after { box-sizing: inherit;}

這樣在外掛或槓桿其他行為的其他元件中就能更容易地改變 box-sizing 了。

36. 表格單元格等寬

表格工作起來很麻煩，所以務必儘量使用 table-layout: fixed 來保持單元格的等寬：

.calendar { table-layout: fixed;}

37. 用 Flexbox 擺脫外邊距的各種 hack

當需要用到列分隔符時，通過flexbox的 space-between 屬性，你就可以擺脫nth-，first-，和 last-child 的hack了：

.list { display: flex; justify-content: space-between;}.list .person { flex-basis: 23%;}

現在，列表分隔符就會在均勻間隔的位置出現。

38. 使用屬性選擇器用於空連結

當a元素沒有文字值，但 href 屬性有連結的時候顯示連結：

a[href^="http"]:empty::before { content: attr(href);}

相當方便。

39. 檢測滑鼠雙擊

HTML：

<div class="test3"> <span><input type="text" value=" " readonly="true" /> <a href="http://www.yoke66.com">Double click me</a></span></div>

CSS：

.test3 span { position: relative;}.test3 span a { position: relative; z-index: 2;}.test3 span a:hover, .test3 span a:active { z-index: 4;}.test3 span input { background: transparent; border: 0; cursor: pointer; position: absolute; top: -1px; left: 0; width: 101%; /* Hacky */ height: 301%; /* Hacky */ z-index: 3;}.test3 span input:focus { background: transparent; border: 0; z-index: 1;}

40. CSS 寫出三角形

/* create an arrow that points up */div.arrow-up { width:0px; height:0px; border-left:5px solid transparent; /* left arrow slant */ border-right:5px solid transparent; /* right arrow slant */ border-bottom:5px solid #2f2f2f; /* bottom, add background color here */font-size:0px; line-height:0px;}/* create an arrow that points down */div.arrow-down { width:0px; height:0px; border-left:5px solid transparent; border-right:5px solid transparent; border-top:5px solid #2f2f2f;font-size:0px; line-height:0px;}/* create an arrow that points left */div.arrow-left { width:0px; height:0px; border-bottom:5px solid transparent; /* left arrow slant */ border-top:5px solid transparent; /* right arrow slant */ border-right:5px solid #2f2f2f; /* bottom, add background color here */ font-size:0px; line-height:0px;}/* create an arrow that points right */div.arrow-right { width:0px; height:0px; border-bottom:5px solid transparent; /* left arrow slant */ border-top:5px solid transparent; /* right arrow slant */ border-left:5px solid #2f2f2f;/* bottom, add background color here */ font-size:0px; line-height:0px;}

41. CSS3 calc() 的使用

calc() 用法類似於函式，能夠給元素設定動態的值：

/* basic calc */.simpleBlock { width: calc(100% - 100px);}/* calc in calc */.complexBlock { width: calc(100% - 50% / 3); padding: 5px calc(3% - 2px); margin-left: calc(10% + 10px);}

42. 文字漸變

文字漸變效果很流行，使用 CSS3 能夠很簡單就實現：

h2[data-text] { position: relative;}h2[data-text]::after { content: attr(data-text); z-index: 10; color: #e3e3e3; position: absolute; top: 0; left: 0; -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), color-stop(50%, rgba(0,0,0,1)), to(rgba(0,0,0,0)));}

43. 禁用滑鼠事件

CSS3 新增的 pointer-events 讓你能夠禁用元素的滑鼠事件，例如，一個連線如果設定了下面的樣式就無法點選了。

.disabled { pointer-events: none; }

44. 模糊文字

簡單但很漂亮的文字模糊效果，簡單又好看！

.blur { color: transparent; text-shadow: 0 0 5px rgba(0,0,0,0.5);}

45.簡單的方法調整圖片大小

.content img {height:auto;width:500px;}

46.CSS陰影

.shadow {-moz-box-shadow: 3px 3px 5px 6px #ccc;-webkit-box-shadow: 3px 3px 5px 6px #ccc;box-shadow: 3px 3px 5px 6px #ccc;}

47.CSS首字放大

p:first-letter {display: block;float: left;margin: 5px 5px 0 0;color: red;font-size: 1.4em;background: #ddd;font-family: Helvetica;}

48.用CSS翻轉影象

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

49.移除被點連結的點框

a {outline: none}或者a {outline: 0}

50.元素透明

.element {filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity: 0.5;opacity: 0.5;}

51.使用CSS顯示連結之後的URL

a:after{content:" (" attr(href) ") ";}這會在連結錨點後顯示URL。你也可以用字型或其他樣式定義它。

52.為手持裝置定製特殊樣式

<link type="text/css" rel="stylesheet" href="handheldstyle.css" media="handheld">

53.用圖片充當列表標誌

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

54.禁止自動換行

h1 { white-space:nowrap; }

55.獲得焦點的表單元素 

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

56.user-select 禁止使用者選中文字

div {user-select: none; /* Standard syntax */}

57.清除手機tap事件後element 時候出現的一個高亮

* {-webkit-tap-highlight-color: rgba(0,0,0,0);}

58.增強使用者體驗，使用偽元素實現增大點選熱區

.btn::befoer{content:"";position:absolute;top:-10px;right:-10px;bottom:-10px;left:-10px;}

59.偽元素實現換行，替代換行標籤

inline-element ::after{content:"A";white-space: pre;}

60.will-change提高頁面滾動、動畫等渲染效能

/* 關鍵字值 */will-change: auto;will-change: scroll-position;will-change: contents;will-change: transform; /* <custom-ident>示例 */will-change: opacity; /* <custom-ident>示例 */will-change: left, top; /* 兩個<animateable-feature>示例 */will-change的使用也要謹慎，遵循最小化影響原則，不要這樣直接寫在預設狀態中，因為will-change會一直掛著：.will-change {will-change: transform;transition: transform 0.3s;}.will-change:hover {transform: scale(1.5);}可以讓父元素hover的時候，宣告will-change，這樣，移出的時候就會自動remove，觸發的範圍基本上是有效元素範圍。.will-change-parent:hover .will-change {will-change: transform;}.will-change {transition: transform 0.3s;}.will-change:hover {transform: scale(1.5);}

61.box-sizing 讓元素的寬度、高度包含border和padding

{box-sizing: border-box;}

62.calc() function, 計算屬性值

div {width: calc(100% - 100px);}例子就是讓寬度為100%減去100px的值

63.css實現不換行、自動換行、強制換行

//不換行white-space:nowrap;//自動換行word-wrap: break-word;word-break: normal;//強制換行word-break:break-all;

64.perspective 透視

這個屬性的存在決定你看到的元素是2d還是3d。一般設定在包裹元素的父類上。.div-box {perspective: 400px;}

65.設定影象透明度的兩種方式

opcity:0.6；background:rgba(0,0,0,.6)；

66.position定位屬性

position屬性指定一個元素(靜態的、相對的、絕對或固定)的定位方法的型別。position的屬性值：absolute：生成絕對定位的元素；fixed：生成絕對定位的元素，相對於瀏覽器視窗進行定位；relative：生成相對定位的元素，相對於其正常位置經行定位。z-index：指定一個元素的堆疊順序。

67.cursor屬性

cursor屬性定義了滑鼠指標放在一個元素邊界範圍內時所用的游標形狀。CSS提供的cursor值：pointer ：小手指；help：箭頭加問號；wait：轉圈圈；move：移動游標；crosshair：十字游標。通過pointer屬性我們可以偽造超連結：<span >pointer</span>

68.隱藏沒有靜音、自動播放的影片

video[autoplay]:not([muted]) {display: none;}

69.Font-Size 基準

/* 假設瀏覽器的預設的大小是 16px ， 首先將其設定為10px (font-size:10/16) */body {font-size:10/16;}/* 然後就可以用em做統一字型單位了 2.4em = 24px */h1 {font-size: 2.4 em}

70.透明容器

.element {filter:alpha(opacity=50); /* for ie */-moz-opacity:0.5; /* for ff */-khtml-opacity: 0.5; /* for webkit as chrome */opacity: 0.5; /* for opera */}

71、平行四邊導航條程式碼

使用css3 的 2D變形中的 skew() 傾斜屬性，讓偽元素傾斜而不是li傾斜，是為了讓li的文字正常顯示。

<style>.keith li { list-style: none; position: relative; display: inline-block; padding: 10px 15px; color: #fff; cursor: pointer;}.keith li::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; top: 0; border-radius: 5px; z-index: -1; background: #2175BC; transform: skewX(-25deg);}.keith li:hover::after { background: #39a3f5;}</style><ul class='keith'> <li>首頁</li> <li>筆記</li> <li>問問</li> <li>學習</li> <li>設定</li></ul>

72、梯形導航條

使用css3 3D 變形中的 perspective()、rotateX()、transform-origin。

perspective(): 用於設定使用者和元素3D空間Z平面之間的距離，值越小，使用者與3D空間Z平面距離越近，視覺效果會明顯；反之，值越大，使用者與3D空間Z平面距離越遠，視覺效果越小。

rotateX(): 3D空間上X軸的旋轉

tansform-origin: 指定元素的旋轉中心點位置，可以控制梯形傾斜。值為bottom，不傾斜；值為left，左傾斜；值為right，右傾斜。

<style>.keith li { list-style: none; position: relative; display: inline-block; padding: 20px 15px 5px 15px; margin-left: -10px; color: #fff; cursor: pointer;}.keith li::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: -1; background: #2175BC; border: 1px solid #fff; border-top-right-radius: 8px; border-top-left-radius: 8px; transform: perspective(0.5em) rotateX(5deg); transform-origin: bottom;}.keith li:hover::after { background: #39a3f5;}</style><ul class='keith'> <li>首頁</li> <li>筆記</li> <li>問問</li> <li>學習</li> <li>設定</li></ul>