CSS技巧(一)

最实用的CSS技巧

能够避免工作中大部分的困扰

1. 使用 :not()

通常我们在给列表元素添加分割线的时候是这样做的：

ul li {
    border-top: 1px solid #DDD;
}

ul li:first-child {
    border-top: none;
}

如果你对兄弟选择器理解不错的话你可能会这么做：

ul li:first-child ~ li {
    border-top: 1px solid #DDD;
}

然而你会发现

第一种方式阅读简单，但是代码繁多

第二种方式写起来简单 但是语义不是那么的简单直接

使用:not()之后

ul li:not(:first-child) {
    border-top: 1px solid #DDD;
} 

是不是发现代码变得整洁了、易读了、语义更直接了？

2. 给body添加line-height

当你限定一个文本容器元素（display: block || inline-block）的高度时，往往会为它设置一个等高的line-height，而往往这种元素在页面中是很多的。

line-height属性值的百分比值的参照为该元素的font-size（自己的理解，认为不对的同学欢迎指出）。

现在，你不需要为每个文本容器元素添加line-height，只需要添加到body即可，它们 可以很容易的从body中继承

body {
    line-height: 1;
}

3. 使内容垂直居中（包含却不限于文字）

以往我在做垂直居中的时候有三种做法：

// 方法一
.table-cell {
    display: table-cell;
    vertical-align: center; 
}

// 方法二
.inline-block {
    display: inline-block;
    vertival-align: center;
}

// 方法三
.wrap {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.container {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

以上三种方法虽然可以实现，但是太蛋疼……

现在，简单的方法出现了，只需要为父容器设置如下属性即可

.wrap {
    -webkit-align-items: center;
    -ms-align-items: center;
    align-items: center;
    display: -webkit-flex;
    display: flex;

    height: 500px;
}

是不是很简单啊

有人说道在IE11中得小心使用，但是我并没有发现什么不妥的地方，如果哪位同学发现了IE11中的bug请分享出来，在此谢过。

4. 选择前几项

大家都知道选择奇数项和偶数项用:nth-child(2n+1)和:nth-child(2n)，但是如果要求选择前几项往往有人就无从下手了。

li:nth-child(-n+4) {
    color: red;
}

看上面的例子，:nth-child(-n+*)表示选择前*个项目。So easy!

:nth-child() 和 :nth-of-type()的区别这里不做详细描述了，不是很清楚的话可以去查查

5. 制作等宽的表格

大家在制作表格的时候肯定会发现：这货会自动调节！！！ 一般的时候我们其实也需要自动调节，这样使得表格看起来往往是那么的比较美观。但是，总有那么些个特殊需求，吐槽吐槽ing……记住下面的属性可以帮你不少忙的。

.calendar {
    table-layout: fixed;
}