CSS小技巧收藏

最后更新于：2016-01-22 17:30

如下是我积累的一些经常使用的css代码，会不断更新，最新的代码会显示在最前面，同时我也会提供最新更新日期以便查阅。

连接样式

a:link { color: red; }
a:visted { color: purple; }

经过:link给未访问的连接设置样式，经过:visted给已被点击过的连接设置样式。这样能让用户区分他本身点击过的连接。

居中对齐

不少时候咱们须要把一个元素在其父级容器里水平、垂直居中对齐。如下我列出了经常使用的几种方法：

1.在知道子元素宽度与高度的状况下进行居中，采用位置定位：absolute + margin

.parent {
    position: relative;
}
.child {
    position: absolute;
    width: 100px;
    height: 60px;
    top: 50%;
    left: 50%;
    margin: -30px 0 0 -50px;
}

2.在不知道子元素高与宽的状况下，采用位置定位：absolute + transform

.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

3.采用flexbox进行居中对齐

.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}

选择某范围内的子元素

选择5-10的子元素

ul li:nth-child(n+5):nth-child(-n+10) {
    background-color: red;
}

演示地址：http://codepen.io/moyu/pen/KVvzbX

最佳适应图片

这段代码很是适用于给文章列表加缩略图的时候用，能最好的避免图片比例不协调的问题，统一排版。你能够随意更改width与height来查看效果。

.thumbnail {
    width: 200px;
    height: 150px;
    background-image: url("https://s.yimg.com/uy/build/images/sohp/inspiration/sage3.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

演示地址：http://codepen.io/moyu/pen/JGyKGQ

占满全屏

.fullScreen {
    width: 100vw;
    height: 100vh;
}

演示地址：http://lab.liuxinyu.me/fullbg/index.html

自动分章节

文章正文里咱们常常采用<h2>, <h3>, <h4>, <h5>这样的标签来分章，分节。这是一个很是不错的习惯，但经常只有字体粗细大小的不一样，在这里咱们为每一个章节加上1,2,3这样的标注。如下代码在.document容器内有效。(其余须要计数的模块也能够用这样的方法)

演示地址：http://codepen.io/moyu/pen/NxvrjX

自适应视频播放器

当在你本身的网站插入优酷这样的视频播放器后你会发现它的高宽都是固定的，并且你在用手机浏览的时候视频播放器还变形了，如下代码自动让播放器按16:9的比例显示并自适应各个设备。

CSS代码：

.media-wrap {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}
.media-wrap iframe,
.media-wrap embed,
.media-wrap object {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

HTML代码：

<div class="media-wrap">
<iframe height=498 width=510 src="http://player.youku.com/embed/XMTQzOTUyNjAyMA==" frameborder=0 allowfullscreen></iframe>
</div>