＃1、清除浮動
浮動給我們的代碼帶來的麻煩，想必不需要多說，我們會用很多方式來避免這種麻煩，其中我覺得最方便也是兼容性最好的一種是….
/ 清除浮動
.clearfix{
zoom: 1;
}
.clearfix:after{
display: block;
content: '';
clear: both;
}
2、垂直居中
在css的世界里水平居中比垂直居中來的簡單一些，經過了多年的演化，依然沒有好的方式來讓元素垂直居中(各種方式各有優缺點，但都不能達到兼容性好，破壞力小的目標)，以下是幾種常見的實現方式
絕對定位方式且已知寬高
osition: absolute;
top: 50%;
left: 50%;
margin-top: -3em;
margin-left: -7em;
width: 14em;
height: 6em;
絕對定位 ＋ 未知寬高 ＋ translate
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
//需要補充瀏覽器前綴
flex 輕松搞定水平垂直居中( 未知寬高)
display: flex;
align-items: center;
justify-content: center;
3、文本末尾添加省略號
當文本的內容超出容器的寬度的時候，我們希望在其默認添加省略號以達到提示用戶內容省略顯示的效果。
寬度固定，適合單行顯示...
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
寬度不固定，適合多行以及移動端顯示
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
4、制作文本的模糊效果
color: transparent;
text-shadow:0 0 2px rgba(0,0,0,.5);
5、動畫實現簡潔loading 效果
.loading:after{
display: inline-block;
overflow: hidden;
vertical-align: bottom;
content: '\2026';
-webkit-animation: ellipsis 2s infinite;
}
// 動畫部分
@-webkit-keyframes ellipsis{
from{
width: 2px;
}
to{
width: 15px;
}
}
6、自定義文本選中樣式
默認情況下，我們在網頁上選中文字的時候，會給選中的部分一個深藍色背景顏色(可以自己拿起鼠標試試)，如果我們想自己定制被選中的部分的樣式呢？
// 注意只能修改這兩個屬性 字體顏色 選中背景顏色
element::selection{
color: green;
background-color: pink;
}
element::-moz-selection{
color: green;
background-color: pink;
}
7、頂角貼效果
有時候我們會有這樣的需求，在一個列表展示頁面，有一些列表項是新添加的、或者熱度比較高的，就會要求在其上面添加一個貼紙效果的小條就像hexo默認博客的fork me on github那個效果一樣，如下圖。
html
<div class="wrap">
<div class="ribbon">
<a href="#">Fork me on GitHub</a>
</div>
</div>
css
/* 外層容器幾本設置 */
.wrap{
width: 160px;
height:160px;
overflow:hidden;
position: relative;
background-color: #f3f3f3;
}
.ribbon{
background-color: #a00;
overflow: hidden;
white-space: nowrap;
position: absolute;
/* shadom */
-webkit-box-shadow: 0 0 10px #888;
-moz-box-shadow: 0 0 10px #888;
box-shadow: 0 0 10px #888;
/* rotate */
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
/* position */
left: -50px;
top: 40px;
}
.ribbon a{
border: 1px solid #faa;
color: #fff;
display: block;
font: bold 81.25% 'Helvetica Neue', Helvetica, Arial, sans-serif;
margin: 1px 0;
padding: 10px 50px;
text-align: center;
text-decoration: none;
/* shadow */
text-shadow: 0 0 5px #444;
}
8、input占位符
當我們給部分input類型的設置placeholder屬性的時候，有的時候需要修改其默認的樣式。
input::-webkit-input-placeholder{
color: green;
background-color: #F9F7F7;
font-size: 14px;
}
input::-moz-input-placeholder{
color: green;
background-color: #F9F7F7;
font-size: 14px;
}
input::-ms-input-placeholder{
color: green;
background-color: #F9F7F7;
font-size: 14px;
}
9、移動端可點擊元素去處默認邊框
在移動端瀏覽器上，當你點擊一個鏈接或者通過Javascript定義的可點擊元素的時候，會出現藍色邊框，說實話，這是很惡心的，怎么去掉呢?
-webkit-tap-highlight-color: rgba(255,255,255,0);
10、首字下沉
要實現類似word中首字下沉的效果可以使用以下代碼
element:first-letter{
float:left;
color:green;
font-size:30px;
}
11、小三角
.triangle{
/* 基礎樣式 */
border:solid 10px transparent;
}
/*下*/
.triangle.bottom{
border-top-color: green;
}
/*上*/
.triangle.top{
border-bottom-color: green;
}
/*左*/
.triangle.top{
border-right-color: green;
}
/*右*/
.triangle.top{
border-left-color: green;
}
12、屏蔽Webkit移動瀏覽器中元素高亮效果
在訪問移動網站時，你會發現，在選中的元素周圍會出現一些灰色的框框，使用以下代碼屏蔽這種樣式
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
13、文字兩邊的橫線
曾經我最討厭的設計，之前一直難以控制寬度，但在別人的項目中發現了很好的解決方法.
html
<div><span>文字</span></div>
css
div{
content: '';
display: block;
position: absolute;
width: 100%;
border-bottom: 1px solid #dfdfdf;
top: 50%;
}
