概述
相信大家在寫(xiě)css屬性的時(shí)候肌访，會(huì)遇到一些問(wèn)題找默，比如說(shuō)：垂直對(duì)齊，垂直居中吼驶，背景漸變動(dòng)畫(huà)惩激，表格寬度自適應(yīng)店煞，模糊文本，樣式重置风钻，清除浮動(dòng)顷蟀，通用媒體查詢，自定義選擇文本骡技，強(qiáng)制出現(xiàn)滾動(dòng)條鸣个，固定頭部和頁(yè)腳，自己在網(wǎng)上看到的一篇關(guān)于css的文章布朦，感覺(jué)這里邊一些常用的css代碼片段對(duì)大家很有幫助囤萤，所以我就把這篇文章分享給大家，希望大家能夠喜歡是趴。
css代碼片段
1阁将、垂直對(duì)齊
如果你用CSS，則你會(huì)有困惑：我該怎么垂直對(duì)齊容器中的元素右遭？現(xiàn)在做盅，利用CSS3的Transform，可以很優(yōu)雅的解決這個(gè)困惑：
.verticalcenter{
????position: relative;
????top: 50%;
????-webkit-transform: translateY(-50%);
????-o-transform: translateY(-50%);
????transform: translateY(-50%);
}
2窘哈、伸展一個(gè)元素到窗口高度
在具體場(chǎng)景中吹榴，你可能想要將一個(gè)元素伸展到窗口高度，基本元素的調(diào)整只能調(diào)整容器的大小,因此要使一個(gè)元素伸展到窗口高度滚婉，
我們需要伸展頂層元素：html和body:
html, body {
????height: 100%;
}
然后將100%應(yīng)用到任何元素的高
div {
? ? height: 100%;
}
3图筹、基于文件格式使用不同的樣式
為了更容易知道鏈接的目標(biāo)，有時(shí)你想讓一些鏈接看起來(lái)和其它的不同让腹。下面的片段在文本鏈接前添加一個(gè)圖標(biāo)远剩，對(duì)不同的資源使用不同的圖標(biāo)或圖片：
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;
}
4、背景漸變動(dòng)畫(huà)
CSS中最具誘惑的一個(gè)功能是能添加動(dòng)畫(huà)效果骇窍，除了漸變瓜晤，你可以給背景色、透明度腹纳、元素大小添加動(dòng)畫(huà)痢掠。目前，你不能為漸變添加動(dòng)畫(huà)嘲恍，但下面的代碼可能有幫助足画。它通過(guò)改變背景位置，讓它看起來(lái)有動(dòng)畫(huà)效果佃牛。
button {
????background-image: linear-gradient(#5187c4, #1c2f45);
????background-size: auto 200%;
????background-position: 0 100%;
????transition: background-position 0.5s;
}
button:hover {
????background-position: 0 0;
}
5淹辞、CSS：表格列寬自適用
對(duì)于表格，當(dāng)談到調(diào)整列寬時(shí)俘侠，是比較痛苦的象缀。然后彬向，這里有一個(gè)可以使用的技巧：給td元素添加white-space: nowrap;能讓文本正確的換行
td {
????white-space: nowrap;
}
6、只在一邊或兩邊顯示盒子陰影
如果你要一個(gè)盒陰影攻冷，試試這個(gè)技巧娃胆，能為任一邊添加陰影。為了實(shí)現(xiàn)這個(gè)等曼，首先定義一個(gè)有具體寬高的盒子里烦，然后正確定位:after偽類。實(shí)現(xiàn)底邊陰影的代碼如下
.box-shadow{
????background-color:#FF8020;
????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:0px0px8px2px#000000;
????-moz-box-shadow:0px0px8px2px#000000;
????box-shadow:0px0px8px2px#000000;
}
7禁谦、包裹長(zhǎng)文本
如果你碰到一個(gè)比自身容器長(zhǎng)的文本胁黑，這個(gè)技巧對(duì)你很有用。在這個(gè)示例中州泊，默認(rèn)時(shí)丧蘸，不管容器的寬度，文本都將水平填充遥皂。
簡(jiǎn)單的CSS代碼就能在容器中調(diào)整文本：
pre {
????white-space: pre-line;
????word-wrap: break-word;
}
效果看起來(lái)如下：
8力喷、制造模糊文本
想要讓文本模糊？可以使用color透明和text-shadow實(shí)現(xiàn)
.blurry-text {
????color: transparent;
????text-shadow: 0 0 5px rgba(0,0,0,0.5);
}
9、用CSS動(dòng)畫(huà)實(shí)現(xiàn)省略號(hào)動(dòng)畫(huà)
這個(gè)片段將幫助你制造一個(gè)ellipsis的動(dòng)畫(huà)，對(duì)于簡(jiǎn)單的加載狀態(tài)是很有用的莲趣，而不用去使用gif圖像。
.loading:after {
????overflow: hidden;
????display: inline-block;
????vertical-align: bottom;
????animation: ellipsis 2s infinite;
????content: "\2026";? ?/* ascii code for the ellipsis character */
}
@keyframes ellipsis {
????from {
????????width: 2px;
????}
????to {
????????width: 15px;
????}
}
10拂募、樣式重置
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, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
????margin: 0;
????padding: 0;
????border: 0;
????font-size: 100%;
????font: inherit;
????vertical-align: baseline;
????outline: none;
????-webkit-box-sizing: border-box;
????-moz-box-sizing: border-box;
????box-sizing: border-box;
}
html {
????height: 101%;
}
body {
????font-size: 62.5%;
????line-height: 1;
????font-family: Arial, Tahoma, sans-serif;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
????display: block;
}
ol, ul {
????list-style: none;
}
blockquote, q {
????quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
????content: '';
????content: none;
}
strong {
????font-weight: bold;
}
table {
????border-collapse: collapse;
????border-spacing: 0;
}
img {
????border: 0;
????max-width: 100%;
}
p {
????font-size: 1.2em;
????line-height: 1.0em;
????color: #333;
}
11、典型的CSS清除浮動(dòng)
.clearfix:after {
????content: ".";
????display: block;
????clear: both;
????visibility: hidden;
????line-height: 0;
????height: 0;
}
.clearfix {
????display: inline-block;
}
html[xmlns] .clearfix {
????display: block;
}
* html .clearfix {
????height: 1%;
}
12窟她、新版清除浮動(dòng)（2011）
.clearfix:before, .container:after {
????content: "";
????display: table;
}
.clearfix:after {
????clear: both;
}
/* IE 6/7 */
.clearfix {
????zoom: 1;
}
13陈症、跨瀏覽器的透明
.transparent {
????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 */
}
14、通用媒體查詢
/* Smartphones (portrait and landscape) ----------- */
@mediaonly screen and (min-device-width :320px) and (max-device-width :480px) {
????/* Styles */
}
/* Smartphones (landscape) ----------- */
@mediaonly screen and (min-width :321px) {
????/* Styles */
}
/* Smartphones (portrait) ----------- */
@mediaonly screen and (max-width :320px) {
????/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@mediaonly screen and (min-device-width :768px) and (max-device-width :1024px) {
????/* Styles */
}
/* iPads (landscape) ----------- */
@mediaonly screen and (min-device-width :768px) and (max-device-width :1024px) and (orientation : landscape) {
????/* Styles */
}
/* iPads (portrait) ----------- */
@mediaonly screen and (min-device-width :768px) and (max-device-width :1024px) and (orientation : portrait) {
????/* Styles */
}
/* Desktops and laptops ----------- */
@mediaonly screen and (min-width :1224px) {
????/* Styles */
}
/* Large screens ----------- */
@mediaonly screen and (min-width :1824px) {
????/* Styles */
}
/* iPhone 4 ----------- */
@mediaonly screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5) {
????/* Styles */
}
15震糖、自定義文本選擇
::selection {
????background: #e2eae2;
}
::-moz-selection {
????background: #e2eae2;
}
::-webkit-selection {
????background: #e2eae2;
}
16录肯、為logo隱藏H1
h1 {
????text-indent: -9999px;
????margin: 0 auto;
????width: 320px;
????height: 85px;
????background: transparent url("images/logo.png") no-repeat scroll;
}
17、錨鏈接偽類
a:link {
????color: blue;
}
a:visited {
????color: purple;
}
a:hover {
????color: red;
}
a:active {
????color: yellow;
}
18试伙、CSS3：全屏背景
html {
????background: url('images/bg.jpg') no-repeat center center fixed;
????-webkit-background-size: cover;
????-moz-background-size: cover;
????-o-background-size: cover;
????background-size: cover;
}
19嘁信、內(nèi)容垂直居中
.container {
????min-height: 6.5em;
????display: table-cell;
????vertical-align: middle;
}?
20于样、強(qiáng)制出現(xiàn)垂直滾動(dòng)條
html { height: 101% }
21疏叨、CSS3漸變模板
#colorbox {
????background: #629721;
????background-image: -webkit-gradient(linear, left top, left bottom, from(#83b842), to(#629721));
????background-image: -webkit-linear-gradient(top, #83b842, #629721);
????background-image: -moz-linear-gradient(top, #83b842, #629721);
????background-image: -ms-linear-gradient(top, #83b842, #629721);
????background-image: -o-linear-gradient(top, #83b842, #629721);
????background-image: linear-gradient(top, #83b842, #629721);
}
22、CSS3 斑馬線
tbody tr:nth-child(odd) {
????background-color: #ccc;
}
23穿剖、內(nèi)部CSS3 盒陰影
#mydiv {
????-moz-box-shadow: inset 2px 0 4px #000;
????-webkit-box-shadow: inset 2px 0 4px #000;
????box-shadow: inset 2px 0 4px #000;
}
24蚤蔓、外部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);
}
25、三角形列表項(xiàng)目符號(hào)
ul {
????margin: 0.75em 0;
????padding: 0 1em;
????list-style: none;
}
li:before {
????content: "";
????border-color: transparent #111;
????border-style: solid;
????border-width: 0.35em 0 0.35em 0.45em;
????display: block;
????height: 0;
????width: 0;
????left: -1em;
????top: 0.9em;
????position: relative;
}
26糊余、CSS3 鮮艷的輸入
input[type=text], textarea {
????-webkit-transition: all 0.30s ease-in-out;
????-moz-transition: all 0.30s ease-in-out;
????-ms-transition: all 0.30s ease-in-out;
????-o-transition: all 0.30s ease-in-out;
????outline: none;
????padding: 3px 0px 3px 3px;
????margin: 5px 1px 3px 0px;
????border: 1px solid #ddd;
}
input[type=text]:focus, textarea:focus {
????box-shadow: 0 0 5px rgba(81, 203, 238, 1);
????padding: 3px 0px 3px 3px;
????margin: 5px 1px 3px 0px;
????border: 1px solid rgba(81, 203, 238, 1);
}
