css編寫的技巧效果總結

1. 垂直對齊

若是你以前遇到過這個問題，你就應該知道它是多麼的煩人，幸運的是，如今你可使用CSS3變換來解決這個問題：

.vc{
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
2. 只在一側或者兩側具備投影

.box-shadow {
background-color: #AC92EC;
width: 160px;
height: 90px;
margin-top: -45px;
margin-left: -80px;
position: absolute;
top: 50%;
left: 50%;
}
.box-shadow:after {
content: "";
width: 150px;
height: 1px;
margin-top: 88px;
margin-left: -75px;
display: block;
position: absolute;
left: 50%;
z-index: -1;
-webkit-box-shadow: 0px 0px 8px 2px #000000;
-moz-box-shadow: 0px 0px 8px 2px #000000;
box-shadow: 0px 0px 8px 2px #000000;
}
3. 漸變背景動畫效果

從CSS3開始，動畫變得很是的酷了，可是切不可過度的使用它們。下面這一技巧巧妙地的移動背景位置，使其看起來像動畫同樣：

button {
padding: 15px;
background-image: linear-gradient(#FC6E51, #FFF);
background-size: auto 200%;
background-position: 0 100%;
transition: background-position 0.5s;
}
button:hover {
background-position: 0 0;
}
4. 將文本分紅多列

div
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
}
5. 表格自動寬度

td {
white-space: nowrap;
}
6. 像出版物同樣，第一個字變得大些

p:first-child::first-letter{
font-family: "papyrus";
font-size: 28px;
font-weight: bold;
}
7. 特定瀏覽器的CSS Hacks的完整列表

有時候解決跨瀏覽器兼容性可能會很是的棘手，但這些特定瀏覽器的技巧可能會幫你解決問題。

/***** Selector Hacks ******/

/* 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: blue\9; }

/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }

/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */

8. 建立模糊文本

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

9. 不使用表格實現跨瀏覽器垂直水平居中圖片

這段代碼能夠在一個已知寬高的容器內垂直水平居中一個未知大小的圖片，這是 IE 的一個hack：

<figure class='logo'>
<span></span>
<img class='photo'/>
</figure>
.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%; }

10. 高亮選中的 input

// HTML
<input id="mycheck1" type="checkbox" />
<label for="mycheck1">Check box label here</label>
<br />
<input id="mycheck2" type="checkbox" checked/>
<label for="mycheck2">Check box label here</label>
<br />
<input id="mycheck3" type="checkbox" />
<label for="mycheck3">Check box label here</label>

// CSS
input:checked + label{
background: yellow;
}
11. 跨瀏覽器透明度

selector {
filter: alpha(opacity=50); /* internet explorer */
-khtml-opacity: 0.5; /* khtml, old safari */
-moz-opacity: 0.5; /* mozilla, netscape */
opacity: 0.5; /* fx, safari, opera */
}
12. 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;
}
13. 跨瀏覽器最小高度

#div {
min-height: 500px;
height:auto !important;
height: 500px;
}
14. 固定 Footer

#footer {
position:fixed;
left:0px;
bottom:0px;
height:30px;
width:100%;
background:#999;
}

/* IE 6 */
* html #footer {
position:absolute;
top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}
15. 清除浮動 Clearfix

/* slightly enhanced, universal clearfix hack */
.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 */
16. 給可點擊元素添加手型光標

a[href], input[type='submit'], input[type='image'], label[for], select, button, .pointer {
cursor: pointer;
}
17. iPad 定向CSS

<!-- css -->
@media only screen and (max-device-width: 1024px) and (orientation:portrait) {
.landscape { display: none; }
}
@media only screen and (max-device-width: 1024px) and (orientation:landscape) {
.portrait { display: none; }
}

<!-- example markup -->
<h1 class="portrait">Your device orientation is "portrait"<h1>
<h1 class="landscape">Your device orientation is "landscape"<h1>
18. Pre 標籤內文本換行

pre{
height: 120px;
overflow: auto;
font-family: 「Consolas」,monospace;
font-size: 9pt;
text-align:left;
background-color: #FCF7EC;
overflow-x: auto; /* Use horizontal scroller if needed; for Firefox 2, not
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
margin: 0px 0px 0px 0px;
padding:5px 5px 3px 5px;
white-space : normal; /* crucial for IE 6, maybe 7? */
}
19. CSS3媒體查詢

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
20. 重置加載

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
21. 多邊框

元素必須是相對定位，且具備足夠的padding來顯示多餘的邊框：

#borders {
position:relative;
z-index:1;
padding:30px;
border:5px solid #f00;
background:#ff9600;
}
#borders:before {
content:"";
position:absolute;
z-index:-1;
top:5px;
left:5px;
right:5px;
bottom:5px;
border:5px solid #ffea00;
background:#4aa929;
}

#borders:after {
content:"";
position:absolute;
z-index:-1;
top:15px;
left:15px;
right:15px;
bottom:15px;
border:5px solid #00b4ff;
background:#fff;
}
22. 移除IE中textarea的滾動條

textarea { overflow: auto; }
23. 簡單但好看的引用樣式

css-blockquote

blockquote {
background:#f9f9f9;
border-left:10px solid #ccc;
margin:1.5em 10px;
padding:.5em 10px;
quotes:"\201C""\201D""\2018""\2019";
}
blockquote:before {
color:#ccc;
content:open-quote;
font-size:4em;
line-height:.1em;
margin-right:.25em;
vertical-align:-.4em;
}
blockquote p {
display:inline;
}
24. :-moz-placeholder

<!doctype html>
<html>
<head>
<title>Placeholder demo</title>
<style type="text/css">
input:-moz-placeholder {
color: green;
}
</style>
</head>
<body>
<input id="test" placeholder="Placeholder text!">
</body>
</html>
25. 另外一種固定footer的方式

* { margin:0; padding:0; }

html, body, #wrap { height: 100%; }

body > #wrap {height: auto; min-height: 100%;}

#main { padding-bottom: 150px; } /* must be same height as the footer */

#footer {
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;}

/* CLEAR FIX*/
.clearfix:after {content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
<div id="wrap">

<div id="main" class="clearfix">

</div>

</div>

<div id="footer">

</div>

26. 背景透明

.rgba {
background-color: transparent;
background-color: rgba(200,200,200,0.8);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99dddddd,endColorstr=#99dddddd);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99dddddd,endColorstr=#99dddddd)";
}

27. 居中未知寬度的DIV元素

.content {
margin: 0 auto 8px;
display: table;
}

.content div {
display: table-cell;
}

<!--[if IE]>
.content {
display: block;
text-align: center;
}
.content div {
display: inline;
zoom: 1;
}
<![endif]-->
28. 根據文件類型設置樣式

/* external links */
a[href^="http://"]
{
padding-right: 13px;
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: 18px;
background: url(acrobat.png) no-repeat center right;
}

29. 解決IE6/7雙倍margin/padding問題

ul li
{
float: right;
margin-right: 10px;
*display: inline; /*Target IE7 and bellow*/
_display: inline; /*Target IE6 and bellow*/
}
/* This example fixes the double right margin bug */

30. 更改選中文本的樣式

::selection
{
color: white;
background-color: red;
}

::-moz-selection /* Firefox needs an extra attention for this */
{
color: white;
background-color: red;
}

31. 首字下沉

p:first-letter{
display:block;
margin:5px 0 0 5px;
float:left;
color:#FF3366;
font-size:60px;
font-family:Georgia;
}

 

3二、如何清除圖片下方出現幾像素的空白間隙？

方法1：
img{display:block;}
方法2：
img{vertical-align:top;}
除了top值，還能夠設置爲text-top | middle | bottom | text-bottom，甚至特定的<length>和<percentage>值均可以
方法3：
#test{font-size:0;line-height:0;}
#test爲img的父元素

 

3三、如何讓文本垂直對齊文本輸入框？
方法：
input{vertical-align:middle;}

 

3四、爲何Standard mode下IE沒法設置滾動條的顏色？
方法：
html{
scrollbar-3dlight-color:#999;
scrollbar-darkshadow-color:#999;
scrollbar-highlight-color:#fff;
scrollbar-shadow-color:#eee;
scrollbar-arrow-color:#000;
scrollbar-face-color:#ddd;
scrollbar-track-color:#eee;
scrollbar-base-color:#ddd;
}

 

3五、如何讓未知尺寸的圖片在已知寬高的容器內水平垂直居中？
方法：
#test{display:table-cell;*display:block;*position:relative;width:200px;height:200px;text-align:center;vertical-align:middle;}
#test p{*position:absolute;*top:50%;*left:50%;margin:0;}
#test p img{*position:relative;*top:-50%;*left:-50%;vertical-align:middle;}
#test是img的祖父節點，p是img的父節點。Know More：未知尺寸的圖片如何水平垂直居中

 

3六、如何容器透明，內容不透明？
方法1：
.outer{width:200px;height:200px;background:#000;filter:alpha(opacity=20);opacity:.2;}
.inner{width:200px;height:200px;margin-top:-200px;}

<div class="outer"><!--我是透明的容器--></div>
<div class="inner">我是不透明的內容</div>
原理是容器層與內容層並級，容器層設置透明度，內容層經過負margin或者position絕對定位等方式覆蓋到容器層上
方法2：
.outer{width:200px;height:200px;background:rgba(0,0,0,.2);background:#000\9;filter:alpha(opacity=20)\9;}
.outer .inner{position:relative\9;}

<div class="outer">
<div class="inner">我是不透明的內容</div>
</div>
高級瀏覽器直接使用rgba顏色值實現；IE瀏覽器在定義容器透明的同時，讓子節點相對定位，也可達到效果

 

3七、如何作1像素細邊框的table？

方法：
#test{border-collapse:collapse; border:1px solid #ddd;}
#test th,#test td{border:1px solid #ddd;}

<table id="test">
<tr><th>姓名</th><td>Joy Du</td></tr>
<tr><th>年齡</th><td>26</td></tr>
</table>

 

3八、如何使頁面文本行距始終保持爲n倍字體大小的基調？
方法：
body{line-height:n;}

 

3九、如何解決IE6下當li內部元素是定義了display:block的內聯元素時底部產生空白的問題？

a,span{display:block;background:#ddd;}

<ul>
<li><a href="http://css.doyoe.com/">CSS參考手冊</a></li>
<li><a href="http://blog.doyoe.com/">CSS探索之旅</a></li>
<li><a href="http://demo.doyoe.com/">web前端實驗室</a></li>
<li><span>測試li內部元素爲設置了display:block的內聯元素時底部產生空白</span></li>
</ul>

如上代碼，IE6及更早瀏覽器每一個li內部的內聯元素底部都會產生空白。解決方案是給li內部的內聯元素再加上zoom:1

 

40、如何區別display:none與visibility:hidden？

方法：
相同的是display:none與visibility:hidden均可以用來隱藏某個元素； 不一樣的是display:none在隱藏元素的時候，將其佔位空間也去掉；而visibility:hidden只是隱藏了內容而已，其佔位空間仍然保留。

 

4一、如何解決IE7及更早瀏覽器下當li中出現2個或以上的浮動時，li之間產生的空白間隙的BUG？方法：li{vertical-align:top;}除了top值，還能夠設置爲text-top | middle | bottom | text-bottom，甚至特定的<length>和<percentage>值均可以