最近在git上看到了這樣一個文件https://github.com/chokcoco/iCSS，關于css實現的一些很不錯的樣式，所以準備自己總結一下自己項目中用到的一些樣式。愛掏網 - it200.com
一、怎么使用CSS讓圖片水平垂直都居中
在前端開發時我們有時需要讓圖片顯示在頁面的中間位置，但是究竟應該怎么用代碼實現呢？其實很簡單哦
第一步：在頁面中加載一張圖片
效果如下
然后分別給圖片和圖片的父元素加載樣式
效果圖
另一種方法：
通過display:table-cell與vertical-align結合
看布局
css樣式
最后的效果
二、改變 input file的默認樣式
我們在做input文本上傳的時候，html自帶的上傳按鈕比較丑，如何對其進行美化呢？
input file上傳按鈕的美化思路是，先把之前的按鈕透明度opacity設置為0,然后，外層用div包裹，就實現了美化功能。愛掏網 - it200.com
利用jquery的代碼實現如下
html布局
js
部分代碼
css部分重點是css部分
在vue中的使用，可以通過數據綁定來實現上傳文件名稱的改變，這里不再多說！
三、移動端1px邊框的實現
在高清屏幕上，border-width:1px;并不是最小邊框，移動端瀏覽器可以顯示的最小顆粒比css中1px還要小
首先看一下在移動端效果對比
具體是通過css實現，代碼如下：
html結構
四、vertical-align的使用
w3c官網說明：vertical-align 屬性定義行內元素的基線相對于該元素所在行的基線的垂直對齊。愛掏網 - it200.com允許指定負長度值和百分比值。愛掏網 - it200.com這會使元素降低而不是升高。愛掏網 - it200.com在表單元格中，這個屬性會設置單元格框中的單元格內容的對齊方式。愛掏網 - it200.com（重點1：行內元素；重點2：單元格內）
vertical-align是為了對齊文本和緊鄰文本的元素。愛掏網 - it200.com盡管如此，你也能在不同場景下使用vertical-align去進行靈活細微的元素對齊工作，而且你并不需要知道元素的具體尺寸。愛掏網 - it200.com
深入了解原因可參考：https://www.jianshu.com/p/71a03b8f6eb6
使用vertical-align的前提條件
vertical-align用于對齊行內級元素。愛掏網 - it200.com行內級元素的display屬性是如下值中的一種：
inline
inline-block
inline-table
行內元素垂直居中或者頂部對齊，底部對齊（以頂部對齊為例）
為了避免由于元素之間莫名產生的空隙，特別設置父元素的font-size的值為0
首先看一下要達到的效果圖（左大圖與右邊文字頂部對齊，另外兩個小圖片與同一行的文字也是頂部對齊，但是看圖貌似是中部對齊，所以可以通過調整右邊文字的行高實現真正的頂部對齊）
首先看html代碼
看css布局
1.左邊大圖與右邊的布局
2.右邊小圖跟標題部分的布局
3.最下邊icon跟說明部分的布局
對于以上情景的總結如下：
1.vertical-align屬性適用于非塊級元素；
2.同一行內的倆元素，一行元素有固定高度的話，另一個要有等值的行高，然后給其中一個或者多個元素設置vertical-align屬性，若效果不明顯可以通過調整行高來微調；
3.如果布局是
內容內容
五、給父元素設置font-size=0屬性
問題的根源是 inline（a標簽默認是display:inline） 和 inline-block (.list 設置的是 display:inline-block) 是內聯布局，既然是內聯那么就會受空白區域的影響。愛掏網 - it200.com
這是像素級還原設計稿很有用的設置，因為元素節點有文本節點，在縮進代碼時會占據寬度，這么說不好理解，演示如下：
HTML
css
理論上box下面的三個div都是30px，剛好在一行顯示，但是實際效果是這樣的：
這就是上文說到的原因，我們在box下添加?font-size:0;?再看看效果
總結：
1、可以看到這才是我們想要的結果，因此在實際開發中，為了更好的還原設計稿，在父元素很有必要設置font-size:0，避免莫名其妙的間距。愛掏網 - it200.com
2、這種情況的另一種解決方式：去掉空白部分。愛掏網 - it200.com（不采用，例子如下：）
六、CSS控制文字只顯示規定行數，超出部分顯示省略號
1、單行文字超出部分顯示省略號
可以實現超出部分顯示省略號的效果的元素必須是：(1)配置為inline-block或block的元素，或者默認為block的div、p元素;(2)強制不換行white-space:no-wrap；（3）固定寬度；（4）超出部分隱藏 overflow:hidden；（5）超出部分以‘...’結尾text-overflow:ellipsis
2、多行文字超出部分顯示省略
（1）將對象作為彈性伸縮盒子模型顯示display：-webkit-box;(2)從上到下垂直排列子元素，設置伸縮盒子的子元素排列方式 -webkit-box-orient:vertical;(3)-webkit-line-clamp:2,這個屬性不是css的規范屬性，結合上邊兩個屬性，表示顯示的行數（4）超出部分隱藏；（5）超出部分'...'顯示；（6）對元素的是行內元素還是塊級元素不做要求。愛掏網 - it200.com
3、對text-overflow:ellipsis,和white-space做一下解釋
（1）text-overflow:ellipsis
text-ellipsis是一個特殊的樣式，有關解釋是這樣的，text-overflow屬性僅是注解，當文本溢出時是否顯示省略標記，并不具備其他的樣式屬性定義。愛掏網 - it200.com要實現溢出時產生省略效果還需要定義：強制文本在一行內顯示（white-space:no-wrap）及溢出內容為隱藏（overflow:hidden）,只有這樣才能實現溢出本文顯示省略號的效果
簡單理解就是要把文本限制在一行，肯定這一行的寬度是有限制的（width），并且你的溢出部分要隱藏起來（overflow:hidden）,然后出現省略號（text-overflow:ellipsis）;
(2)white-space
white-space屬性聲明建立布局過程中如何處理元素中的空白（這里的空白符應該指我們用鍵盤敲入的空格或回車，因為用?或
無論white-space設置什么都會有空格或回車。愛掏網 - it200.com）
下面w3c上white-space可能的值：
normal默認，空白會被瀏覽器忽略
pre空白會被瀏覽器保留，其行為方式類似HTML中的
標簽為止nowrap 文本不會換行，文本會在同一行上繼續，直到遇到
為止。愛掏網 - it200.compre-wrap保留空白符序列，但是正常的進行換行。愛掏網 - it200.com
prw-line 合并空白符序列，但是保留換行符；
inherit 規定應該從父元素集成white-space屬性的值
七、純CSS正方形自適應9宮格圖片布局
先看效果圖
CSS部分
重點是：給image的符合子相對定位,height設置為0，height設置為0，依然可以撐開的黑魔法就是下邊的padding，黑魔法的時刻就是將padding-top或者padding-bottom設置為跟盒子寬度一樣,w3c也提過，當我們給padding設置100%的時候，是相對盒子的寬度設置的百分比，也就是保證了padding值跟盒子的寬度是一致的，所以這個盒子看起來就是一個寬高相等的容器。愛掏網 - it200.com
然后給圖片設置絕對定位，寬度和高度都為100%最終效果完美。愛掏網 - it200.com
布局
注意點：由于圖片在拉伸或者壓縮知乎會變形，所以要給img標簽添加屬性：object-fit:cover屬性，防止圖片變形。愛掏網 - it200.com
八、清除浮動(最常用的方式)
父容器使用偽類:after跟zoom
這種方式是最推薦的，目前大多數大型網站都是使用這種方式清除浮動，瀏覽器兼容好，不會出現什么奇怪的問題。愛掏網 - it200.com
zoom是IE專有屬性，可解決ie6,ie7浮動問題，IE8以上和非IE瀏覽器才支持偽類:after。愛掏網 - it200.com
缺點就是代碼比較多，需要偽類:after跟zoom一起使用才能兼容所有主流瀏覽器。愛掏網 - it200.com
但推薦使用，可將改樣式定義為公共樣式，減少代碼量
clearfixf:after{
display：block；
height：0；
content:'.';
visibility:hidden;
clear:both;
}
clearfix:{
zoom:1
}
代碼如下：
實現效果
