1、对齐：center, justify, right, left(faulted)
<style>
h4 {
text-align: center;
}
p {
text-align: justify;
}
</style>
<h4>Today is a good day</h4>
<p>I'm doing perfect</p>
2、加粗：<p><strong>I'm learning coding</strong></p>
下划线：<u> </u>
强调：<em> </em>
删除线：<s> </s>
水平线：<hr> 自关闭标签
3、阴影 box-shadow？
4、透明度：opacity: 数字
在动画中会用到这个属性
5、大小写：text-transform
`text-transform: uppercase 全部大写 lowercase 全部小写 capitalize 首字母大写 inherit 继承 initial 默认值 none 不改变文字
6、字体
font-size 大小
font-weight 粗细
font-family 字体家族
7、行高：line-weight
8、伪类
a: hover {
color: red;
}
<a href="http://freecatphotoapp.com/" target="_blank">猫咪相册 App</a>
9、位置
相对位置（向下偏移 15 像素）：
h2 {
position: relative;
top: 15px;
}
绝对位置：
position: absolute 定位是元素的定位参照于最近的已定位父元素。
position: fixed 定位的参照物是浏览器的窗口。
浮动：
<style>
#left {
float: left;
width: 50%;
}
#right {
float: right;
width: 40%;
}
</style>
重叠元素的位置：
z-index 的取值是整数，数值大的元素优先于数值小的元素显示。
块级元素居中：
<style>
div {
background-color: blue;
height: 100px;
width: 100px;
margin: auto;
}
</style>
<div></div>
通过设置图片 display 属性为 block 来把它变成块级元素，然后添加 margin 属性居中。
10、缩放
p: hover {
transform: scale(2.1);
}
11、动画
animation 属性控制动画的外观， @keyframes 规则控制动画中各阶段的变化。
用偏移属性 right 、 left 、 top 和 bottom 可以用在动画规则里创建动作。
<style>
#example {
animation-name: rainbow; 动画名称
animation-duration: 10s; 动画循环的时间
animation-iteration-count: 3 动画循环的次数（infinite 永不停止）
animation-timing-function: linear 匀速 ease-out 高速开始低速结束 ease-in 低速开始高速结束 cubic-bezier (x1, y1, x2, y2) 贝塞尔曲线定义速度曲线
}
@keyframes rainbow {
0% {
background-color: blue;
top: 20px;
}
50% {
background-color: green;
top: 0px;
}
100% {
background-color: yellow;
top: 20px;
}
}
</style>
悬停时始终高亮：animation-fill-mode: forwards
<style>
button {
border-radius: 5px;
color: white;
background-color: #0F5897;
padding: 5px 10px 8px 10px;
}
button:hover {
animation-name: background-color;
animation-duration: 500ms;
/* add your code below this line */
animation-fill-mode: forwards;
/* add your code above this line */
}
@keyframes background-color {
100% {
background-color: green;
}
}
</style>
<button>注册</button>