1.12 变形倾斜、动画属性以及弹性盒

最新推荐文章于 2024-07-09 15:59:19 发布

放歌于星辉

最新推荐文章于 2024-07-09 15:59:19 发布

阅读量147

点赞数 1

分类专栏： HTML 文章标签： css3 css html5

本文链接：https://blog.csdn.net/m0_65273419/article/details/122052355

版权

13 篇文章 0 订阅

订阅专栏

变形倾斜、动画属性以及弹性盒

（1）如果要加浏览器前缀的话

@-webkit-keyframes name{
		from{}
		to{}
	}

（2）不加浏览器前缀的时候

@keyframes 动画名{
		关键帧划分的时间
		from{}
		to{}
	}

@keyframes 动画名{
		关键帧
		0%{}
		……
		100%{}
	}

animation:动画名动画执行的时间动画延迟时间执行效果执行次数;

img / input / select / textarea / vidio / audio

块级格式化上下文,是一个独立渲染的区域

overflow: hidden/scroll/auto;
float: left/right
position: absolute/fixed
display: inline-block/table-caption(表格表头)/table-cell(表格单元格)/flex(弹性盒)/inline-flex(内联弹性盒)

形成弹性盒 display: flex;
子元素在主轴上的位置 justify-content:
- flex-start 默认值,主轴的起点
- flex-end 主轴的终点
- center 主轴的中心
- space-between 两端对齐
- space-around 中间是两端的2倍
- space-evenly 平均
子元素在交叉轴的位置 align-items:
- stretch 拉伸,默认值,需要把子项的高度去掉才能拉伸
- flex-start 交叉轴的起点
- flex-end 交叉轴的终点
- center 交叉轴居中
换行 flex-wrap:nowrap(默认不换行)/wrap(换行),弹性盒子元素宽超出父元素会被压缩
多行之间的位置(只针对多行) align-content:
- stretch 拉伸,默认值
- flex-start 整个盒子开始位置
- flex-end 整个盒子结束的位置
- center 整个盒子的中心
- space-between 整个盒子两端
- space-around 行和行中间的距离是两端2倍
- space-evenly 行和行的距离平均
主轴方向 flex-direction
- row 从左向右，默认值
- column 从上到下
- row-reverse 从右到左
- column-reverse 从下往上

单独调整某个子元素在交叉轴的位置 align-self:
- stretch 拉伸,默认值,需要把子项的高度去掉才能拉伸
- flex-start 交叉轴的起点
- flex-end 交叉轴的终点
- center 交叉轴居中
排序 order:数值;
- 默认理解为0
- 值越大，越靠后，可以为负数
子项压缩 flex-shrink:1(压缩)/0(不压缩)
- 如果子项不想被压缩，而且还不想换行时适用
子项放大 flex-grow:0(不放大)/数值;
- 要看父元素剩余的空间,值为1会把父元素剩余的空间全部都拿走
子项宽度 flex-basis:数字px;
复合写法：flex:子项放大(0) 子项压缩(1) 子项宽度(auto);
- flex:1;效果和flex-grow是等同的

父元素{
	display:flex;
	justify-content:center;
	align-items:center;
}

关注