弹性盒模型可以对一个元素的子元素进行自适应布局，更加灵活，可以实现传统布局实现不了的效果。常用的几个属性有：
display: flex：将元素设为弹性容器flex-direction：设置弹性容器的主轴方向justify-content：在弹性容器中对齐元素align-items：在弹性容器中对齐元素示例代码：
.container {
display: flex;
}
网格布局可以将页面分成网格，在每个网格中进行布局。常用的几个属性有：
display: grid：将元素设为网格容器grid-template-columns：设置网格列数和列宽grid-template-rows：设置网格行数和行高grid-gap：设置网格之间的间距示例代码：
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 100px 100px;
grid-gap: 10px;
}
过渡动画可以让元素在状态改变时平滑地进行过渡。常用的几个属性有：
transition-property：设置过渡的属性transition-duration：设置过渡的时间transition-timing-function：设置过渡的时间函数transition-delay：设置过渡的延迟时间示例代码：
.box {
background-color: red;
transition-property: background-color;
transition-duration: 1s;
transition-timing-function: ease-out;
}
.box:hover {
background-color: blue;
}
关键帧动画可以让元素根据时间线进行动画。常用的几个属性有：
@keyframes：定义关键帧动画animation-name：设置动画名称animation-duration：设置动画的总时间animation-timing-function：设置动画的时间函数animation-iteration-count：设置动画的播放次数animation-direction：设置动画播放的方向animation-delay：设置动画的延迟时间animation-fill-mode：设置动画结束状态示例代码：
.box {
animation-name: move;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
@keyframes move {
0% {
transform: translateX(0);
}
50% {
transform: translateX(50px);
}
100% {
transform: translateX(0);
}
}
以上是CSS3实用方法总结的简单介绍，仅仅提取了其中的部分内容作为示例说明。完整的攻略可以参考文章CSDN博客：CSS3实用方法总结(推荐)。
本文链接：http://task.lmcjl.com/news/15792.html