前端学习杂乱记录

news2024/9/20 14:04:21

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

一、Html
二、CSS
- 1. BFC布局
- 2. 定位总结
- 3. 动画
- - 1. transform变换
  - 2. transition过渡
  - 3. @keyframes 和 animation
- 3. 伸缩盒模型：flex布局
三、JS
- 1. 逻辑中断
- 2. 原型

提示：以下是本篇文章正文内容，下面案例可供参考

一、Html

二、CSS

1. BFC布局

BFC(block formatting context)块级格式化上下文，他是页面中的一块渲染区域，并且有一套属于自己的渲染规则，BFC 是一个独立的布局环境，具有BFC特性的元素可以看作是隔离的独立容器，容器里面的元素不会在布局上影响到外面的元素。

触发BFC：

浮动元素
定位元素：绝对定位元素、固定定位元素（absolute、fixed）
非块级盒子的块级容器：display:inline-block，flex，table，table-cell、table-caption、inline-table、inline-flex、grid、inline-grid
overflow 值不为visiable 的块级盒子：overflow:hidden、auto、scroll
display:flow-root【新属性，BFC创建新方式，没有任何副作用，注意浏览器兼容】

使用场景

清除浮动：overflow:hidden（浮动塌陷,包含块没有设置高度或者是自适应的时候、包含块就不能撑起来，变成塌陷的状态。）
防止浮动文字环绕
解决边距重叠问题：根据 BFC 的定义，两个元素只有在同一BFC 内，才有可能发生垂直外边距的重叠，包括相邻元素、嵌套元素。
- 对于相邻元素，只要给它们加上 BFC 的外壳，就能使它们的 margin 不重叠；
- 对于嵌套元素，只要让父级元素触发 BFC（比如给父级加overflow：hidden)，就能使父级 margin 和当前元素的 margin 不重叠。

参考地址：https://juejin.cn/post/6991867254803529765

2. 定位总结

定位	参考点	是否脱离文档流
relative	自己原来的位置	×
absolute	包含块（第一个有定位属性的父元素）	√
fixed	视口	√
sticky	最近的拥有滚动机制的祖先元素	×

固定定位和绝对定位后，元素变成定位元素：默认宽高由内容撑开，且依旧可以设置宽高。

3. 动画

1. transform变换

transform 属性允许你对元素进行旋转、缩放、倾斜或移动等转换。

/* 将元素顺时针旋转45度 */
.element {
  transform: rotate(45deg);
}

其他常见的 transform 函数：

translate(x, y)：移动元素
scale(x, y)：缩放元素
skew(x, y)：倾斜元素

位移配合定位可实现水平垂直居中：

.box{
position : absolute;
left : 50%;
top : 50%;
transform : translate(-50%,-50%);
}

变换原点：transform-origin
元素变换时默认是元素的中心。transform-origin可以设置变换的原点。
修改变换原点对位移没有影响，但是对旋转缩放会产生影响。
如果提供两个值，第一个是横坐标第二个是纵坐标。
如果只有一个值，另一个默认为50%。

3D变换的首要操作：父元素必须开启3D空间。

2. transition过渡

transition 属性用于控制元素状态变化时的过渡效果，例如在鼠标悬停时改变颜色、大小等。

.element {
  background-color: lightblue;
  transition: background-color 0.5s ease-in-out;
}

.element:hover {
  background-color: lightgreen;
}

当你将鼠标悬停在 .element 上时，背景色将会在 0.5 秒内平滑地变为 lightgreen

transition-property：定义哪个属性需要过渡：none，all，某个属性名（值为数字或值能转为数字的属性能过渡，否则不支持过渡）（常见属性：颜色、长度、百分比、z-index、opacity、2D转换属性、3D转换属性、阴影）
transition-duration：设置过渡的持续时间
transition-delay：设置开始过渡的延迟时间
transition-timing-function：设置过渡的类型
– ease：平滑过渡
– linear：线性过渡
– ease-in：慢→快
– ease-out：快→慢
– ease-in-out：慢→快→慢

3. @keyframes 和 animation

keyframes 允许你定义一个动画序列，并通过 animation 属性将动画应用到元素上。@keyframes 定义了不同时间点的样式，animation 属性控制动画的持续时间、次数等。

/* 定义旋转和缩放的动画 */
@keyframes rotateScale {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(180deg) scale(1.5);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}

/* 将动画应用到元素 */
.animated-box {
  width: 100px;
  height: 100px;
  background-color: lightcoral;
  animation: rotateScale 2s infinite ease-in-out;
}

animation-name：给元素执行具体的动画
animation-duration：设置动画所需时间
animation-delay：设置延迟时间
animation-timing-function：设置动画类型
animation-iteration-count：指定动画播放次数（number，infinite无限循环）
animation-direction：指定动画方向（normal、reverse、alternate、alternate-reverse）
animation-fill-mode：设置动画外的状态（forward、backwards）
animation-play-state：设置动画的播放状态（running、paused）

3. 伸缩盒模型：flex布局

伸缩容器：开启了flex的元素
伸缩项目：伸缩容器的子元素自动成为伸缩项目。无论原来是哪种元素，一旦成为伸缩项目都会“块状化”。

flex-direction：主轴方向
- row：从左向右（默认）
- row-reverse：从右向左
- column：主轴方向垂直从上到下
- column-reverse：从下到上
flex-wrap：换行方式
- nowrap：不换行（默认值）
- wrap：换行
- wrap-reverse：反向换行
flex-flow：上述两个的复合属性，无顺序要求。
justify-content：主轴对齐方式
- flex-start：起点对齐
- flex-end：终点对齐
- center：居中
- space-between：均匀分布，两端对齐
- space-around：均匀分布，两端距离是中间的一半
- space-evenly：均匀分布，两端距离是中间一致
align-item：侧轴对齐方式（一行） ：flex-start、flex-end、center、baseline（伸缩项目第一行文字基线对齐）、stretch（伸缩项目未设置高度，将占满整个容器的高度。默认值）
align-content：侧轴对齐方式（多行）

flex实现水平垂直居中

父容器开启flex布局，使用 justify-content 和 align-item 实现水平垂直居中

.outer{
	width:400px;
	height:400px;
	display:flex;
	justify-content:center;
	align-item:center;
}

父容器开启 flex 布局，随后子容器 margin: auto

.outer{
	width:400px;
	height:400px;
	display:flex;
}
.inner{
	wigth:100px;
	height:100px;
	margin:auto;
}

伸缩性：

flex-basis：主轴的基准长度，会让宽或高失效，默认值为auto。
flex-grow：伸缩项目的放大比例，默认为0，
- 若所有伸缩项目 flex-grow：1：将等分剩余空间。
- 若三个伸缩项目的flex-grow值分别为1、2、3，则分别瓜分到1/6、2/6、3/6的空间。
flex-shrink：伸缩项目的压缩比例，默认为1，即如果空间不足则该项目会缩小。

flex复合属性：复合flex-grow、flex-shrink、flex-basis三个属性