基础 | 这些年我用过的一些CSS技巧

1 负边距实现两边贴边的自适应布局

这个看起来是一个很普通的四列布局，但要求是自适应宽度大小，而且两边的图片还要和边缘对齐，图片和图片之间还有有相同的间隙，这样光把空间平分成4份是不够的，还要在外层的两边扩展出一些空间来，这里就用的负边距了以下是代码片段：

 当然，负边距的使用场景还有很多...

2 文字截取

这个文字后面跟了图标，要求文字多的时候显示省略号而文字后面的图标要一直显示，代码如下：

3 padding-top取代占位图片

之前对于这种自适应宽度的图片列表，如果在没有加载完的时候，图片区域是没有高度的，所以我们会设置一张等比例的占位图片，用占位图片撑起图片区域，但这样又多了一个图片请求，幸好有padding-top来帮忙，代码如下：

 这样做可以让图片区域即使在图片没有加载的情况下也能有高度，而且能自适应布局，感觉妥妥的。

4 自定义文件上传控件样式

这个是一个很古老的话题了，每个浏览器下面的文件上传控件都不一样且不能定义它的样式，我们为了它能好看一点可谓绞尽脑汁，估计透明法是使用最多的一种办法了，代码如下：

 但这个方法有个弊端，因为在某些浏览器下文件上传控件是没有办法定义大小的，当设计师把按钮设计的比较大和长的时候，点模拟按钮有可能点不到透明的文件上传控件。所以我认为以下方法是一个比较有效的解决方案（放弃ie6）：

 点击label的时候会触发文件上传控件的事件，不管按钮多大都能触发。

5 媒体查询写hack

之前在做一个活动时，要求在高级浏览器下面实现一些动画效果，使活动页面有更好的体验，当时使用了opacity属性让部分元素先隐藏，但由于ie9不支持动画，所有在ie9下面opacity的值不能等于0，想了很久都没有想到怎么写hack，于是在网上找了一下，找到一个媒体查询的hack，代码如下：

 其实使用媒体查询能写出很多hack来，但是个人觉得做页面要尽量做到少使用hack。

6 移动端不固定宽高元素水平垂直居中

这个也是老话题了，记得有次去某家公司面试还做不出来（没有JS根本不行），但这个在移动端使用flex布局就很容易实现了，以下是我们的一个浮层组件，无需JS，无论宽高怎么变都能保持浮层水平和垂直居中。

代码如下：

扫码下方二维码，

随时关注更多前端干货文章！

▼

微信：IMWebTech