前端学习杂乱记录
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
文章目录
提示：以下是本篇文章正文内容，下面案例可供参考
一、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三个属性
- flex：auto => flex：1 1 auto
- flex：1 => flex：1 1 0
- flex：none => flex：0 0 auto
- flex：0 auto => flex：0 1 auto
flex：1 意味着该项目会按比例扩展以占据容器的剩余空间，并在容器空间不足时按比例缩小
三、JS
1. 逻辑中断
短路运算：在逻辑与（&&）和逻辑或（||）的操作中，如果左边的表达式已经能够确定整个表达式的结果，那么就不会再去计算右边的表达式。
2. 原型
每一个javascript对象(除null外)创建的时候，都会与之关联另一个对象，这个对象就是我们所说的原型，每一个对象都会从原型中“继承”属性。
- __proto__是实例指向原型的属性
- prototype是对象或者构造函数指向原型的属性
- constructor：每个原型都有一个constructor属性，指向该关联的构造函数。
https://blog.csdn.net/qq_34645412/article/details/105997336
原文地址：https://blog.csdn.net/erjia_/article/details/140553080
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！