本文是本人在工作期間，總結(jié)到的對css的一些積累，或者是經(jīng)驗，希望能夠幫助到讀者，求個贊~~~
2018-05-17 更新 補充8
2017-12-20 更新 15
1.還在為盒子寬度增加margin或者padding而煩惱嗎，趕緊把盒子設(shè)置為IE盒子模型吧，以前w3c還認(rèn)為他們的盒子模型比IE好，歷史證明IE終于硬了一把了~,讓你遠(yuǎn)離煩惱
*,*:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
2.當(dāng)用塊級盒子包裹圖片事，圖片底部會出現(xiàn)間隙，可以讓圖片也變成塊級原始來避免這個間距
eg:
<div><img src="..."/><div>
div img{display:block}
3.當(dāng)在谷歌瀏覽或其他瀏覽器中，點擊登錄過的input的話，選中input會出現(xiàn)黃色的背景,可以用你任何想要的顏色陰影來覆蓋那個黃色背景，這里我假設(shè)用白色
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset !important;
}
4.清除浮動
.clearfix{zoom:1;}
.clearfix:after{
content:"";
display: block;
visibility: hidden;
clear: both;
overflow: hidden;
line-height:0;
}
5.在知道高度的情況下，單行文字垂直居中,假設(shè)需要在高度為30px的盒子里，文字垂直居中
.hei30{
height:30px;
line-height:30px
}
但是在移動端上，確實有偏差，可以使用flex來解決這個問題，具體
.flex_line_v{
display:-webkit-flex;
display:flex;
height:30px;
-webkit-align-items:center;
align-items:center;
}
6.單行超出顯示省略號
.ep{
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
display: block;
}
7.n行內(nèi)文字超出顯示省略號
.ep_n{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: n; //n表示想要幾行內(nèi)顯示
overflow: hidden;
}
實例圖片是n=3
Android UC瀏覽器只支持display: box語法。而iOS UC瀏覽器則支持兩種方式（同一家公司的瀏覽器，由于平臺不一樣，支持程度還不一樣。
-webkit-line-clamp使用了WebKit的CSS擴展屬性，該方法適用于WebKit瀏覽器及移動端,還有，可能你會想，既然可以display:box,那可以用display:flex，代替嗎？但是確實不行，說明他們兩個在某些情況下確實表現(xiàn)不一樣，有待研究了。知道的讀者可以跟我說下哈~
8.不想在拖拽的時候，文字被選中
.no-select{
-moz-user-select:none;
-webkit-user-select:none;
user-select:none;
}
9.當(dāng)你有很多列表，有時候需要對特殊列表進(jìn)行操作，例如，
<div class="box">
<div><div>
<div><div>
<div><div>
<div><div>
<div><div>
<div><div>
<div>
.box{width:900px;}
.box div{
width:280px;
margin-right:30px;
float:left;
}
我想讓.box里面的div一行顯示3個，所以需要讓box里面3倍數(shù)的div的margin-right為0，這時候可以用css3提供的:nth-child(n)
.box div:nth-child(3n){margin-right:0;}
注意這里的n的值為1開始，有人說，我單獨為特殊div添加類名也是可以啊，但是，但是，后臺要嵌入程序，那肯定保持結(jié)構(gòu)一致的，哈，你想用js去判斷？大哥能用css的情況下，就不要麻煩js啦，（你非要用我也阻止不了你?。?，你懂的~，還有另外一種實現(xiàn)思路，大家請看
.box{
width:930px;
margin:0 -15px;
}
.box div{
width:280px;
margin-left:15px;
margin-right:15px;
}
還有一種就是使用flex,萬能布局方案，手機端任意用，pc端就看各位權(quán)衡咯~//但效果還是杠杠的。
具體使用哪一種都有利弊吧，怎么權(quán)衡就是大家思考的問題啦~
10.三角標(biāo)的做法
類似于三角標(biāo)的做法，幫助大家理解下，假設(shè)，我們設(shè)置一個盒子的寬，高度都為0,那么我們直接給這個盒子10px的邊框，分別用不同顏色寫出，可以很清楚的看出來，如果我們想要那個方向的三角標(biāo)，就可以把其他方向三角標(biāo)的邊框顏色設(shè)置為透明，就可以搞定了，類似的直角三角標(biāo)，等等，可以根據(jù)數(shù)學(xué)知識算出來~~
.eg{
width:0;
height:0;
border-left:20px solid orange;
border-top:20px solid yellow;
border-right:20px solid green;
border-bottom:20px solid pink;
}
<div class="eg"></div>
11.移動端1px太粗解決方案
各位小伙伴是不是遇到過，當(dāng)我們用1px solid #ddd，這個1px顯得很粗，跟微信的那些分割線對比起來的話，這個元素是DPR的原因啦，具體可以參考移動web開發(fā)之像素和DPR;
那解決的方案呢，有很多種，這里推薦兩種解決方案。
第一鐘媒體查詢方案：
eg:
.border { border: 1px solid #999 }
@media screen and (-webkit-min-device-pixel-ratio: 2) {
.border { border: 0.5px solid #999 }
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
.border { border: 0.333333px solid #999 }
}
第二種 利用縮放進(jìn)行壓縮
eg:div下需要個1px的下邊框
<div class="div"></div>
.div{position:relative;}
.div:after{
content:"";
position:absolute;
left:0;
width:100%;
height:1px;
-webkit-transform:scaleY(.5);
transform:scaleY(.5);
bottom:0;
}
當(dāng)需要垂直方向的邊框線（比如，左邊框線或右邊框線，也是同樣道理，就壓縮X了）也是同樣思路。
12.::selection 可設(shè)置文字被選擇時的樣式
::selection {
background: #FE6E66;
color: #FFF;
}
13.使用字體圖標(biāo)的解決方案
每做一個項目，都會用到圖標(biāo)，如果老是使用圖片，那對網(wǎng)頁多少會有影響，所以，我推薦兩個解決方案。
第一個是 Iconfont-阿里巴巴矢量圖標(biāo)庫
用法也非常簡單，可以去官網(wǎng)看一下試一下，看到哪個圖標(biāo)就加上哪個圖標(biāo)，還可以添加項目成員，并且在小程序項目也可以用到，居家必備良品，非常推薦，關(guān)鍵是國產(chǎn)的，中文那是必須的~國產(chǎn)萬歲。
第二個是Font Awesome
這個是國外的開源字體庫，也有中文版本的，已經(jīng)給出連接了，那圖標(biāo)也是相當(dāng)給力，用法簡單，和阿里巴巴類似~不過并且不斷再更新，也很給力，風(fēng)格很統(tǒng)一。
14.調(diào)試元素不同狀態(tài)樣式影響
有時候，我們發(fā)現(xiàn)，自己去自定義表單的時候，會出現(xiàn)那些藍(lán)色的外邊框，但是卻不知道怎么不要這些，其實這些事瀏覽器自帶的樣式，這不過比較隱晦，還有bootstrap的默認(rèn)樣式也有，具體代碼是
input[type="file"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focus {
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
outline （輪廓）是繪制于元素周圍的一條線，位于邊框邊緣的外圍，可起到突出元素的作用。和邊框類似，但是輪廓線不會占據(jù)空間，也不一定是矩形。如下圖，我們需要先調(diào)試出是那部分影響的，可以使用谷歌瀏覽器進(jìn)行調(diào)試，
打開開發(fā)者工具，選中需要調(diào)試的目標(biāo)，如下圖
可以有不同狀態(tài)的切換，依次選中的話，可以很方便的知道是什么樣式影響了，谷歌開發(fā)工具是調(diào)試?yán)鳎赡軇傞_始我們不是很熟悉，所以很多問題都沒有用這個來調(diào)試解決，希望能給到讀者（大神繞路~）提醒有這個功能哈
15.使用display:flex;需要對文字盡行顯示一行并且超出的的是顯示省略號的坑
首先我們來看下背景,先不寫瀏覽器兼容前綴啦，原諒我懶...
css
.wrap{display: flex;width:800px;margin-left: auto;margin-right: auto;}
.other_box{width:80px;height:80px;background:gold;}
.box{display: flex;flex:1;width:100%;}
.box_l{width:80px;height:80px;background:orange;}
.box_r{flex:1;background:pink;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
html
<div class="wrap">
<div class="other_box">我只是一段文字</div>
<div class="box">
<div class="box_l">我只是一段文字</div>
<div class="box_r">
在事件處理程序中調(diào)用 event.preventDefault() 或 event.stopPropagation() 是非常常見的需求。
盡管我們可以在方法中輕松實現(xiàn)這點，但更好的方式是：方法只有純粹的數(shù)據(jù)邏輯，而不是去
處理 DOM 事件細(xì)節(jié)。
</div>
</div>
</div>
故事是這樣的，我用flex的時候，要保證box_r里面的文字單行顯示并且文字超出顯示省略號
當(dāng)然啦，不知道出什么問題，結(jié)果就成了這樣了，莫慌~
解決方案呢，比較簡單粗暴的就是在box添加overflow:hidden,也就是在你嵌套的需要做這種處理的外面的盒子添加overflow:hidden。這種解決方案只能視你需求而定啦，原因我也不清楚，只知道這樣可以解決，等我查明真相，我會公布出來，知道的小伙伴也可以告訴我哈。。。
16、在移動端，在iOS的瀏覽器中，如果寫一個有點擊事件的按鈕，這個按鈕如果沒有添加cursor:pointer;有時候是點擊不了的，但是在安卓上是沒有問題的。為了讓按鈕的點擊事件能夠觸發(fā)，可以添加cursor:pointer
未完，待續(xù)哦，爭取每周都加入新東西（可能有些東西我沒加上的，很基礎(chǔ)的那種，如果想要了解，小伙伴們可以百度下哈）一本正經(jīng)的求個贊~
原創(chuàng)文章，轉(zhuǎn)載請注明出處，謝謝歡迎一起討論交流
歡迎訪問我的個人網(wǎng)站zhengyepan
在線兼容性查詢caniuse.com
