弹性盒子，定位，动画、（笔记）

小汐

已于 2023-03-31 20:06:00 修改

阅读量174

点赞数 3

文章标签： css html 前端

于 2023-03-28 20:11:07 首次发布

本文链接：https://blog.csdn.net/weixin_58447501/article/details/129823679

版权

1，弹性盒子（更详细请点我头像看我发布的弹性盒子详细版）

1、弹性盒子：display: flex;
给父盒子加，如果是pc端页面布局，还是采用传统方式，如果是移动端或者是不考虑兼容的pc则采用flex	
pc端浏览器支持情况比较差，IE11或更低版本不支持flex或仅支持部分	

2、弹性盒子父项常见属性：
	（1）flex-direction：设置主轴的方向；属性：
			row				默认从左到右（常用）	
			row-reverse			从右到左
			column			从上到下（常用）
			column-reverse		从下到上
	
	（2）justify-content：设置主轴上的子元素排列方式；属性：
			flex-start			默认值从头开始如果主轴X轴，则从左到右（常用）
			flex-end			从尾部开始排序
			center				在主轴居中对齐（如果主轴是X轴则水平居中）（常用）
			space-around		平分剩余空间（常用）
			space-between		现两边贴边在平分剩余空间（重要）（常用）

	（3）flex-wrap：设置子元素是否换行；属性：
			nowrap 			不换行
			wrap 				换行

	（4）align-content：设置侧轴上的子元素的排列方式（多行）；属性：
			flex-start			默认值在侧轴的头部开始排序（常用）
			flex-end			在侧轴的尾部开始排列
			center				在侧轴中间显示（常用）
			space-around		子项在侧轴平分剩余空间（常用）
			space-between		子项在侧轴现分布在两头，在平分剩余空间（常用）
			stretch			设置子项元素高度平分父元素高度	（常用）

	（5）align-items：设置侧轴上的子元素排列方式（单行）；属性：
	（该属性是控制子项在侧轴（默认是y轴）上的排列方式  在子项为单项（单行）的时候使用）
			flex-start			从头部开始
			flex-end 			从尾部开始
			center 			居中显示 （最常用）
			stretch 			拉伸  （拉伸时子元素不能给高度）

	（6）flex-flow：复合属性；属性：
			flex-flow:row wrap;	相当于同时设置了 flex-direction 和 flex-wrap

3、弹性盒子子项常见属性：
	（1）flex子项目占的份数
		flex: 2;				flex 属性定义子项目分配剩余空间，用flex来表示占多少份数

	（2）align-self控制子项自己在侧轴的排列方式	（属性直接写 align-items的）
	align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。
	默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch。

	（3）order属性定义子项的排列顺序（前后顺序）
			order: -1;			数值越小，排列越靠前，默认为0。

2、定位（更详细请点我头像看我发布的定位详细版）

## 省略号 ##
	white-space:nowrap;强制一行
	overflow:hidden;溢出隐藏
	text-overflow:ellipsis;省略号
## overflow溢出 ##
	* overflow: hidden;溢出隐藏
	* overflow: visible;溢出可见（默认）
	* overflow: auto;自动：如果有溢出的内容，盒子会显示滚动条
	* overflow: scroll;内容被修剪，超出的内容可以通过滚动条查看
	* overflow-x: auto;内容超过指定宽度的时候显示滚动条（要加上强制一行才会有效果white-space: nowrap;）
	* overflow-y: auto;内容超过指定高度的时候显示滚动条
## visibility设置可见 ##
	* visibility: hidden;隐藏内容，但是占用空间
	* display: none;隐藏内容，但是不占用空间 
## 相对定位 ##
	position:relative;相对于它自己原来的位置来说
	注意：要与top、bottom、left、right联合使用
## 绝对定位 ##
	position:absolute;相对于浏览器来说

	注意：要与top、bottom、left、right联合使用
## 静态定位 ##
	position:static;默认
## 固定定位 ##
	position:fixed;生成固定定位的元素，相对于浏览器窗口进行定位
	注意：可与top、bottom、left、right联合使用

html：盒子、浮动、定位
父相子绝：父元素用相对定位，子元素用绝对定位

## 层叠顺序 ##
	z-index: 数值(不要加单位);
	* 数值为整数（负整数、0、正整数）
	* 数值越大，层叠级别越高

3、动画和3D动画（更详细请点我头像看我发布的2D动画和3的动画详细版）

1、动画
	（1）标签transition的属性：多个简写的方式为transition:动画名称1 1s, 动画名称2 2s,用逗号隔开
		同时使用多个转换，其格式为 `transform: translate() rotate() scale()`
		transition-property: all 时间s;			要过渡的属性（all代表所有属性，还可以是宽或高） [ˈprɒpəti] 所有的 
		transition-duration: 1s;				过度花费的时间 
		transition-delay: 1s;				动画延时的时间
		transition-timing-function: ease;		动画速度曲线属性有ease由快到慢(默认)，linear匀速，ease-in由慢到快，ease-in-out慢快慢，ease-in-out动画以底速度开始到结束，steps()指定了时间函数中的间隔数量(步数)
	（2）标签transform的属性：
		transform: rotate(度数);				旋转,单位是：deg，角度为正时，顺时针，角度为负时，逆时针
		transform-origin: x y;				设置元素旋转中心点, x 和 y 用空格隔开还可以给 x y ，设置像素或者方位名词(`top`、`bottom`、`left`、`right`、`center`  或   50px  50px)		
		transform: scale(n, m);				按比例缩放，可以设置转换中心点缩放默认以中心点缩放，而且不影响其他盒子
		transform: translate(x, y);				移动，x就是x轴上移动位置 y 就是y轴上移动位置 中间用逗号分隔
	（3）标签animation的属性：
		animation-name: 动画名称;			调用动画
   		animation-duration: 0.5s;			动画花费时长
		animation-timing-function: ease; 		动画速度曲线属性有ease由快到慢(默认)，linear匀速，ease-in由慢到快，ease-in-out慢快慢，ease-in-out动画以底速度开始到结束，steps()指定了时间函数中的间隔数量(步数)
		animation-delay: 2s;				动画等待多长时间执行
		animation-timing-function: steps(num)；	num:代表动画执行的步数 
		animation-iteration-count: infinite; 		规定动画播放次数 infinite: 无限循环 默认1 可以是数值  
		animation-direction: alternate;			是否逆行播放   要搭配播放次数
		animation-fill-mode: forwards;			盒子动画结束后，停在结束位置		
		animation-play-state: paused`;			暂停动画，规定动画是否暂停或者播放 ，经常和鼠标经过等其他配合，使用简写属性里面不包含
		简写方式：1、animation: 动画名称 2s linear;  /* 前面2个属性：动画名称 持续时间  一定要写 */
  		简写方式：2、animation: 动画名称 duration timing-function delay iteration-count direction fill-mode	 animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 起始与结束状态 
		简写方式：3、animation: move 2s ease 1s infinite ;	animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 ；
	（4）定义语法@keyframes格式：（只有这个可以让它动起来，里面可以加属性）
		@keyframes 动画名称 {
  			  0% {
     				width: 100px;
    				}
  			  100% {
       				 width: 200px
   				 }
			}
		- 0% 是动画的开始，100 % 是动画的完成，这样的规则就是动画序列
		- 在 @keyframs 中规定某项 CSS 样式，就由创建当前样式逐渐改为新样式的动画效果
		- 动画是使元素从一个样式逐渐变化为另一个样式的效果，可以改变任意多的样式任意多的次数
		- 用百分比来规定变化发生的时间，或用 `from` 和 `to`，等同于 0% 和 100%

2、3D	（动画属性是通用的也可以简写）（3D一般都用定位写的）（3D是在动画的基础加上新加移动的属性）
	（1）开启3D必须加下面的属性，这属性基本上都是给父元素加的
		transform-style: flat;				代表子元素不开启 3D 立体空间，默认的不开启，代码写给父级，但是影响的是子盒子
		transform-style: preserve-3d;			子元素开启3D立体空间，代码写给父级，但是影响的是子盒子
		perspective:"500px"				透视(单位px)，如果想要网页产生 `3D` 效果需要透视(理解成 `3D` 物体投影的 `2D` 平面上)，透视也称为视距，所谓的视距就是人的眼睛到屏幕的距离**透视需要写在被视察元素的父盒子上面**
	（2）标签transform的属性：
		transform: translateX(100px);			仅仅是在 x 轴上移动
  		transform: translateY(100px)：			仅仅是在 y 轴上移动
		transform: translateZ(100px)：			仅仅是在 z 轴上移动
		transform: translate3d(x, y, z)：			其中x、y、z 分别指要移动的轴的方向的距离，注意：x, y, z 对应的值不能省略，不需要填写用 0 进行填充
		transform: rotateX(45deg);			沿着 x 轴正方向旋转 45 度(X正数是往右走，负数是往左)
		transform: rotateY(45deg)；			沿着 y 轴正方向旋转 45 度(Y正数是往下走，负数是往上)
		transform: rotateZ(45deg)` 			沿着 z 轴正方向旋转 45 度(Z正数是往前走，负数是往后)
		transform: rotate3d(1, 1, 1, 45deg)` 		沿着自定义(x, y, z, deg)轴旋转 45 deg 为角度
	（3）维坐标系
		- x 轴：水平向右  -- **注意：x 轴右边是正值，左边是负值**
		- y 轴：垂直向下  -- **注意：y 轴下面是正值，上面是负值**
		- z 轴：垂直屏幕  --  **注意：往外边的是正值，往里面的是负值**