居中对齐
inline元素
.container{
height: 50px;
text-align: center; // 水平居中
line-height: 50px; // 垂直居中
}
block元素
水平居中，知道宽度，左右margin为auto
.item{
width: 100px;
margin: auto;
}
定位元素
知道元素尺寸
.container{
position: relative;
}
.item{
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
}
不知道元素尺寸
.container{
position: relative;
}
.item{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
不知道元素尺寸，另一种写法
.container{
position: relative;
}
.item{
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
flex布局居中
inline或是block都可以
.container{
display: flex;
justify-content: center;
align-items: center;
}
清除浮动
.clearfix::after{
content: "";
display: table;
clear: both;
}
CSS 的transition和animation有何区别？
transition 是过渡，从一种状态过渡到另一个状态
animation 是动画，可以定义多个关键帧，在多个关键帧的状态间变化
