HTML&CSS

设置水平垂直居中 */ /* 方案一 */ /* display: flex; */ /* 更改主轴对齐方式 */

多行弹性元素对齐方式 align-content 默认值 stretch 平铺拉伸占满父容器高度 前提取消高度 flex-start 多行起点对齐

} /* 更改弹性元素排列顺序 默认order order属性 值越大 越靠后 */ .div1{ order: 3;

/* 默认父容器有剩余空间时不会放大 不会占满父容器剩余空间 */ /* flex-grow 默认值0 弹性元素默认不放大 */ flex-grow:

margin: 0 auto; /* 开启弹性盒布局 弹性元素沿着主轴方向排列 默认主轴就是水平轴 */ display: flex;

flex-basis 给弹性元素设置宽度 同时设置width和flex-basis ,flex-basis优先级高 */ /* .div2{ flex-basi

/* 设置弹性元素交叉轴对齐方式 */ align-items: center; } .parent>div{ widt

.child{ flex: 0 1 300px; height: 100px; border: 1px solid royalb

.parent{ width: 1090px; height: 38px; /* background-color: royal

.parent{ width: 1090px; height: 570px; margin: 0 auto; }

/* 过渡属性名称 */ transition-property: width,background-color; /* 过度持续时长 */

margin: 0; padding: 0; list-style: none; } ul{

div{ height: 200px; background-color: pink; text-align: center;

width: 960px; height: 200px; margin:30px auto; overflow

/* 2.给元素设置动画 */ /* 2.1设置动画名称 */ animation-name: move; /* 2.2设置

/* 1.定义动画关键帧 变形 平移 旋转 缩放 */ @keyframes transform { /* 开始状态 结束状态 过程 */

/* 扩张 收缩 */ @keyframes pound { from{ /* 没有动画效果 */

/* 轮播图片容器 一次显示的图片宽*/ div{ width: 1200px; height: 200px;

li:first-child{ /* 平移 transform*/ transform: translateX(200px) translateY(50

position: absolute; /* 形变中心点 百分比 50% 50% 像素单位200px 0