本文分享关于CSS应用中的一些小技巧， 如果有不对的地方，欢迎指出建议和意见。

Github项目地址：，欢迎fork和star，如果有更多的tips，也欢迎提交PR。

使用CSS来垂直居中一切元素

其实很简单, 使用下面的代码就让你的所有元素都垂直居中

html, body {  height: 100%;  margin: 0;}body {  display: -webkit-flex;  display: flex;  -webkit-align-items: center;    -ms-flex-align: center;    align-items: center;}

如果你的需求不只是垂直居中的话--比如你想要上下左右都居中, 那么, 可以看看我的另外一个项目:

使用CSS来制作箭头

如果使用CSS来画我们常用的箭头呢? 就像下面这样:

/* 向下的箭头 */.caret {    display: inline-block;    width: 0;    height: 0;    vertical-align: middle;        /* 如果需要向上的箭头的话, 就把border-top改为border-bottom */    border-top: 20px solid;    border-right: 20px solid transparent;    border-left: 20px solid transparent;}

使用CSS来让footer永远位于屏幕底部, 并随内容而拉伸

这是个困扰我很久的问题, 不过最终, 我还是找到了一个比较好的解决方案

假设你的html是下面这样写的:

我们要的效果是footer一直位于底部, 同时, 当内容的高度增加时, 他也会被内容给挤下去. 所以, 我们需要像下面这样定义CSS:

html {    height: 100%;}body {    position: relative;    min-height: 100%;    &:after {        display: block;        content: '';        height: 200px; /* 此处的高度必须和footer的高度相同 */    }}.footer {    position: absolute;    bottom: 0;    width: 100%;    height: 200px;}

使用CSS避免图片超出包含块

我们想要我们的大图放在我们的文章或者其他地方, 所以, 要避免这些图片超出内容, 怎么做呢?

img {    display: block;    max-width: 100%;    margin: 0 auto;}

使用CSS制作带有分割线的导航

制作一个带有分割线的横向导航, 可以使用CSS的:not和:last-child来实现

.nav li:not(:last-child) {    border-right: 1px solid #cccccc;}

使用CSS来通过动态计算设置元素的高度

不得不说, CSS3的calc属性真的很棒, 我们可以使用这个属性来动态计算一个元素的高度

当你使用calc来计算元素的高度的时候你要注意, 计算的高度是依赖于父级元素的高度的, 所以, 你需要先设置父级元素的高度

.container {    height: 100vh;  /* 使用vh这个单位来设置高度为100% */}.content {  width: 100%;    height: calc(100% - 150px);  background-color: #aaaaaa;}

使用CSS设置全屏图片

Set a full page image is so common for the website nowadays.

现在的很多网站都采用了全屏的图片, 那么, 这是怎么实现的呢? 有两种方法:

1. 设置全屏背景图

html {    background: url('the/path/to/your/image') no-repeat center center fixed;    -webkit-background-size: cover;    -moz-background-size: cover;    -o-background-size: cover;    background-size: cover;    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";}

2. 使用img标签的全屏图片

要使用img标签的话, 最好是将它放在一个div中

.bg {    position: fixed;    top: -50%;    left: -50%;    width: 200%;    height: 200%;}.bg img {    position: absolute;    top: 0;    left: 0;    right: 0;    bottom: 0;    margin: auto;    min-width: 50%;    min-height: 50%;}

使用CSS的BFC来清除浮动

使用BFC的特性来清除浮动是一个很常用的手段. 因为, 当计算BFC的高度的时候, 浮动元素也会参与计算.

.container {    width: 800px;    padding: 20px;    border: 1px solid #aaaaaa;    overflow: hidden; /* or set to auto */}

使用CSS来去除display为inline-block的li之间的间隙

当制作一个横向列表的时候, 我们一般设置li的display属性为inline-block

但是, 这样就有一个问题就是每两个li之间总是会有你不知道是什么的间隙

所以, 该怎么解决呢? 其实很简单, 设置ul的font-size为0, 再对li的字体大小进行单独设置就行了

ul {    font-size: 0;        /* 以下两句视不同情况而定 */    letter-spacing: -1px;    word-spacing: -1px;}ul li {    font-size: 16px;    letter-spacing: normal;    word-spacing: normal;}

使用CSS实现图片预加载

#preload-01 { background: url(http://domain.tld/image-01.png) no-repeat -9999px -9999px; }#preload-02 { background: url(http://domain.tld/image-02.png) no-repeat -9999px -9999px; }#preload-03 { background: url(http://domain.tld/image-03.png) no-repeat -9999px -9999px; }

使用CSS来避免闪烁

如果我们的内容在图片加载好之前渲染好的话, 我们可能会看到包含块被撑开的一个过程, 这个过程就叫做闪烁

所以,我们应该尽量避免这种现象, 通过margin/padding来实现

.container {    positiong: relative;    width: 100%;    max-height: 500px;    background-color: red;        /* 避免编边距折叠 */    overflow: hidden;}.container:after {    content: '';    display: block;    margin-top: 50%; /* 或者设置padding-top: 50%; */}

你应该能看到, 图片没有加载出来的时候, 内容也是有高度的.

使用CSS来制作图片加载失败的效果

在图片加载失败的时候, 使用CSS来让加载失败的图片显得更美观更友好

img:before {    content: "We're sorry, the image below is broken :(";  display: block;  margin-bottom: 10px;}img:after {    content: "(url: " attr(src) ")";  display: block;  font-size: 12px;}