常用样式汇总

---

title: 常用样式汇总
cover: /img/6.jpg

1.小手样式

cursor: pointer

2.垂直居中

使用flex布局

<div class="outer">
    <div class="inner"></div>
</div>

.outer {
    width: 300px;
    height: 300px;
    border: 1px solid red;
    display: flex;
    justify-content: center;
    align-items: center;
}

.inner {
    width: 200px;
    height: 200px;
    border: 1px solid black;
}

vertical-align属性

<div class="outer">
    <div class="inner"></div>
</div>

.outer {
    width: 300px;
    height: 300px;
    border: 1px solid red;
    display: table-cell;
    vertical-align: middle;
}

.inner {
    width: 200px;
    height: 200px;
    border: 1px solid black;
    margin: 0 auto;
}

绝对定位

<div class="outer">
    <div class="inner"></div>
</div>

.outer {
    width: 300px;
    height: 300px;
    border: 1px solid red;
    position: relative;
}

.inner {
    width: 200px;
    height: 200px;
    border: 1px solid black;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

after

<div class="outer">
    <div class="inner"></div>
</div>

.outer {
    width: 300px;
    height: 300px;
    border: 1px solid red;
    text-align: center;
}

.outer:after {
    width: 0;
    height: 100%;
    display: inline-block;
    vertical-align: middle;
    content: '';
}

.inner {
    width: 200px;
    height: 200px;
    border: 1px solid black;
    display: inline-block;
    vertical-align: middle;
}

3.vertical-align失效问题

vertical-align属性只对行内元素有效果，要想在块级元素失效先设置一下displayinline-block

4. css渐变

线性渐变-从上到下（默认）

#grad {
  background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
  background: linear-gradient(red, blue); /* 标准的语法 */
}

线性渐变-从左到右

#grad {
  background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */
  background: linear-gradient(to right, red , blue); /* 标准的语法 */
}

线性渐变 - 对角

#grad {
  background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(bottom right, red, blue); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(bottom right, red, blue); /* Firefox 3.6 - 15 */
  background: linear-gradient(to bottom right, red , blue); /* 标准的语法 */
}