最近在git上看到了这样一个文件https://github.com/chokcoco/iCSS，关于css实现的一些很不错的样式，所以准备自己总结一下自己项目中用到的一些样式。
一、怎么使用CSS让图片水平垂直都居中
在前端开发时我们有时需要让图片显示在页面的中间位置，但是究竟应该怎么用代码实现呢？其实很简单哦
第一步：在页面中加载一张图片
效果如下
然后分别给图片和图片的父元素加载样式
效果图
另一种方法：
通过display:table-cell与vertical-align结合
看布局
css样式
最后的效果
二、改变 input file的默认样式
我们在做input文本上传的时候，html自带的上传按钮比较丑，如何对其进行美化呢？
input file上传按钮的美化思路是，先把之前的按钮透明度opacity设置为0,然后，外层用div包裹，就实现了美化功能。
利用jquery的代码实现如下
html布局
js
部分代码
css部分重点是css部分
在vue中的使用，可以通过数据绑定来实现上传文件名称的改变，这里不再多说！
三、移动端1px边框的实现
在高清屏幕上，border-width:1px;并不是最小边框，移动端浏览器可以显示的最小颗粒比css中1px还要小
首先看一下在移动端效果对比
具体是通过css实现，代码如下：
html结构
四、vertical-align的使用
w3c官网说明：vertical-align 属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。（重点1：行内元素；重点2：单元格内）
vertical-align是为了对齐文本和紧邻文本的元素。尽管如此，你也能在不同场景下使用vertical-align去进行灵活细微的元素对齐工作，而且你并不需要知道元素的具体尺寸。
深入了解原因可参考：https://www.jianshu.com/p/71a03b8f6eb6
使用vertical-align的前提条件
vertical-align用于对齐行内级元素。行内级元素的display属性是如下值中的一种：
inline
inline-block
inline-table
行内元素垂直居中或者顶部对齐，底部对齐（以顶部对齐为例）
为了避免由于元素之间莫名产生的空隙，特别设置父元素的font-size的值为0
首先看一下要达到的效果图（左大图与右边文字顶部对齐，另外两个小图片与同一行的文字也是顶部对齐，但是看图貌似是中部对齐，所以可以通过调整右边文字的行高实现真正的顶部对齐）
首先看html代码
看css布局
1.左边大图与右边的布局
2.右边小图跟标题部分的布局
3.最下边icon跟说明部分的布局
对于以上情景的总结如下：
1.vertical-align属性适用于非块级元素；
2.同一行内的俩元素，一行元素有固定高度的话，另一个要有等值的行高，然后给其中一个或者多个元素设置vertical-align属性，若效果不明显可以通过调整行高来微调；
3.如果布局是<p><img><span>内容内容</span></p>可参照w3c官网来学习。
五、给父元素设置font-size=0属性
问题的根源是 inline（a标签默认是display:inline） 和 inline-block (.list 设置的是 display:inline-block) 是内联布局，既然是内联那么就会受空白区域的影响。
这是像素级还原设计稿很有用的设置，因为元素节点有文本节点，在缩进代码时会占据宽度，这么说不好理解，演示如下：
HTML
css
理论上box下面的三个div都是30px，刚好在一行显示，但是实际效果是这样的：
这就是上文说到的原因，我们在box下添加 font-size:0; 再看看效果
总结：
1、可以看到这才是我们想要的结果，因此在实际开发中，为了更好的还原设计稿，在父元素很有必要设置font-size:0，避免莫名其妙的间距。
2、这种情况的另一种解决方式：去掉空白部分。（不采用，例子如下：）
六、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）对元素的是行内元素还是块级元素不做要求。
3、对text-overflow:ellipsis,和white-space做一下解释
（1）text-overflow:ellipsis
text-ellipsis是一个特殊的样式，有关解释是这样的，text-overflow属性仅是注解，当文本溢出时是否显示省略标记，并不具备其他的样式属性定义。要实现溢出时产生省略效果还需要定义：强制文本在一行内显示（white-space:no-wrap）及溢出内容为隐藏（overflow:hidden）,只有这样才能实现溢出本文显示省略号的效果
简单理解就是要把文本限制在一行，肯定这一行的宽度是有限制的（width），并且你的溢出部分要隐藏起来（overflow:hidden）,然后出现省略号（text-overflow:ellipsis）;
(2)white-space
white-space属性声明建立布局过程中如何处理元素中的空白（这里的空白符应该指我们用键盘敲入的空格或回车，因为用 或
无论white-space设置什么都会有空格或回车。）
下面w3c上white-space可能的值：
normal默认，空白会被浏览器忽略
pre空白会被浏览器保留，其行为方式类似HTML中的<pre>标签为止
nowrap 文本不会换行，文本会在同一行上继续，直到遇到<br>为止。
pre-wrap保留空白符序列，但是正常的进行换行。
prw-line 合并空白符序列，但是保留换行符；
inherit 规定应该从父元素集成white-space属性的值
七、纯CSS正方形自适应9宫格图片布局
先看效果图
CSS部分
重点是：给image的符合子相对定位,height设置为0，height设置为0，依然可以撑开的黑魔法就是下边的padding，黑魔法的时刻就是将padding-top或者padding-bottom设置为跟盒子宽度一样,w3c也提过，当我们给padding设置100%的时候，是相对盒子的宽度设置的百分比，也就是保证了padding值跟盒子的宽度是一致的，所以这个盒子看起来就是一个宽高相等的容器。
然后给图片设置绝对定位，宽度和高度都为100%最终效果完美。
布局
注意点：由于图片在拉伸或者压缩知乎会变形，所以要给img标签添加属性：object-fit:cover属性，防止图片变形。
八、清除浮动(最常用的方式)
父容器使用伪类:after跟zoom
这种方式是最推荐的，目前大多数大型网站都是使用这种方式清除浮动，浏览器兼容好，不会出现什么奇怪的问题。
zoom是IE专有属性，可解决ie6,ie7浮动问题，IE8以上和非IE浏览器才支持伪类:after。
缺点就是代码比较多，需要伪类:after跟zoom一起使用才能兼容所有主流浏览器。
但推荐使用，可将改样式定义为公共样式，减少代码量
clearfixf:after{
display：block；
height：0；
content:'.';
visibility:hidden;
clear:both;
}
clearfix:{
zoom:1
}
代码如下：
实现效果
