字母大小写
- text-transform 值：
capitalize 英文拼音的首字母大写
uppercase 英文拼音字母全大写
lowercase 英文拼音字母全小写
文字超出省略号
- text-overflow 值：
clip：不显示省略标记（...），而是简单的裁切；
ellipsis：当对象内文本溢出时显示省略标记（...）。
css 过渡和动画
transition-delay: 1s;
transition-duration: 2s;
transition-property: height;
transition-timing-function: ease;
transition: 1s 2s height ease;
animation
animation 可以帮我们实现复杂的动画，使用animation我们首先要定义动画过程，也就是关键帧
@keyframes rainbow {
0% { background: #coo; }
50% { background: orange; }
100% { background: yellowgreen; }
}
绑定动画
div:hover {
animation: 1s raindow;
}
当鼠标悬停在div元素上时，会产生名为rainbow的动画效果，持续时间为哦1s，动画只播放一次。加入infinite关键字，可以让动画无限次播放；
div:hover {
animation: 1s rainbow infinite;
}
也可以指定动画播放次数，比如3次：
div:hover {
animation: 1s ranibow 3;
}
animation-fill-mode
动画结束以后，会立即从结束状态跳回到起始状态。如果想让动画保持在结束状态，需要使用animation-fill-mode属性。
div:hover {
animation: 1s rainbow forwards;
}
animation-fill-mode可以使用下列值
- none：默认值，回到动画没开始时的状态
- forwards：让动画停留在结束状态
- backwards：让动画回到第一帧的状态
- both: 根据animation-direction（见后）轮流应用forwards和backwards规则
animation-direction
动画循环播放时，每次都是从结束状态跳回到起始状态，在开始播放。animation-direction属性，可以改变这种行为
animation-direction
简写：
div:hover {
animation: 1s 2s rainbow infinite forwards alternate ;
}
分写：
div:hover {
animation-duration: 1s;
animation-delay: 2s;
animation-name: rainbow;
animation-timing-function: linear; /* ease */
animation-iteration-count: 3; /* infinte */
animation-fill-mode:forwards; /* none forwards backwards both */
animation-direction: normal; /* normal reverse alternate alternate-reverse */
}
垂直水平居中
<style>
html,body {
position: relative;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
div {
position: absolute;
width: 50%:
height: 50%;
transform: translate(-50%,50%);
background-color: #333;
}
</style>
或者用负margin也行。
自适应固定宽高比
html,body {
position: relative;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
.img-ct {
width: 50%;
height: 0;
padding-bottom: 25%; // 父元素宽度的25%，宽高比2:1
}
