按钮top加高的过渡效果

首先我们看看初始样式：

接着看看最终的样式：

接着看HTML的布局：

一个大的div包裹着三个小的div，三个小的div里面分别放着a标签，a标签里面包裹着文本；

然后看看这个大div的样式：

宽1122px，向左浮动，默认情况下，项目都排在一条线（又称“轴线”）上。Flex-wrap属性定义，如果一条轴线排不下，如何换行。Wrap换行第一行在上方，下边框：1px 实线 灰色；

大div里的三个小div共同的样式：

将它们变成行内块级元素，内边距：上下为0 左右35px，圆角：上5px 右5px下0 左0，背景颜色为灰粉，右外边距为10px，圆角：右上角和右下角为5px，字体大小为25px，文本居中，光标变成手指的样式；

三个div里面a标签的样式：

行高39px，字体颜色为黑色， 去下划线，设置元素的垂直对齐方式：下边，
transition：（选择全部的元素）line-height表示的是所有初始状态设置了样式的属性 transition-duration （过渡时间）0.3s该属性主要用于设置一个属性过渡到另一个属性所需的时间，即持续时间 transition-timing-function（过渡过程的样式）linear 即“缓冲函数”，指过渡效果的时间曲线；

现在就是鼠标移入时的样式变化：

当鼠标移入大div里面的小div时，或者移入到大div里面含“on”的类时，背景颜色变成红色；
当鼠标移入大div里面的小div的a标签时，或者移入到大div里面含“on”的类里面的a标签时，去下划线，字体颜色为白色，行高为46px，
transition：（选择全部的元素）line-height表示的是所有初始状态设置了样式的属性 transition-duration （过渡时间）0.3s该属性主要用于设置一个属性过渡到另一个属性所需的时间，即持续时间 transition-timing-function（过渡过程的样式）linear 即“缓冲函数”，指过渡效果的时间曲线；

（这里写“on”的类就是为了方便大家看最终样式，有一个对比，所以这里就在第一个小div里面加上了“on”的类，接着在写样式的时候也有将有“on”的类的效果写出来，你们在用这个小案例时，可不添加“on”的类）

总结：

初始样式的小div里a标签的行高为39px，然后设置了元素的垂直对齐方式：下边，所以只用在最终样式里写小div里a标签的行高为46px，就有元素高度向上添加的的效果；