css技巧收集

1. 使用 :not() 为导航添加/取消边框

传统的方法为导航栏添加边框:

/* add border */
.nav li {
      border-right: 1px solid #666;
}

/* remove border */
.nav li:last-child {
      border-right: none;
}

用css的:not()实现:

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

减少了很多代码实现了相同的功能。

2. 垂直居中(任何元素)

html, body {
      height: 100%;
      margin: 0;
}

/*要设置垂直居中的元素*/
element {
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;
      display: -webkit-flex;
      display: flex;
}

3. 使用负的 nth-child 选取元素

使用负的 nth-child 在 1 到 n 之间选择元素:

li {
  display: none;
}
/* 使用负的 nth-child 在 1 到 n 之间的元素,选择第1到3个元素就是nth-child(-n+3) */
li:nth-child(-n+3) {
      display: block;
}使用 :not()来做:
li:not(:nth-child(-n+3)) {
    display: none;
}
 

4. 使用 Flexbox 来避免 Margin Hacks

在做多列布局的时候,可以通过 Flexbox 的 space-between 属性来避免nth-first-、 last-child 等 hacks:

.list {
      display: flex;
      justify-content: space-between;
}

.list .person {
      flex-basis: 23%;
}

这样,列之间的空白就会被均匀的填满。

上一篇:工具WinSCP:windows和Linux中进行文件传输


下一篇:【转】linux中inittab文件详解