Skip to content

Commit 9365c09

Browse files
webVueBlogwebVueBlog
committed
add
1 parent 92800d1 commit 9365c09

File tree

11 files changed

+237
-1
lines changed

11 files changed

+237
-1
lines changed

‎README.md

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,16 @@ https://github.com/webVueBlog/Leetcode
3535
- 268.[异步封装到类内部](./阶段九/异步封装到类内部.js)
3636
- 269.[class和await的结合](./阶段九/class和await的结合.js)
3737
- 270.[用reduce实现promise队列](./阶段九/用reduce实现promise队列.js)
38-
38+
- 271.[BFC](./阶段九/BFC.js)
39+
- 272.[重绘与重排](./阶段九/重绘与重排.js)
40+
- 273.[动画](./阶段九/动画.js)
41+
- 274.[inline-block](./阶段九/inline-block.js)
42+
- 275.[左固定右适应](./阶段九/左固定右适应.js)
43+
- 276.[三角形](./阶段九/三角形.js)
44+
- 277.[flex属性](./阶段九/flex属性.html)
45+
- 278.[visibility](./阶段九/visibility.js)
46+
- 279.[position](./阶段九/position.js)
47+
- 280.[清除浮动](./阶段九/清除浮动.js)
3948

4049
## 🧑🏻 阶段八
4150

‎阶段九/BFC.js

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
/**
2+
* 中文叫块级格式上下文，BFC 原理（BFC 的渲染规则）如下：
3+
1）在 BFC 这个元素的垂直方向的边距会发生重叠，即 BFC 内部的兄弟元素中间会发生边距重叠。
4+
解决方法，给某个兄弟元素增加一个父元素，给父元素创建一个 BFC，其他兄弟元素不会和这个新增的父元素发生边距重叠；
5+
2）BFC 区域不会与浮动元素 box 重叠，这就是用来清除浮动的原理。
6+
比如左边是浮动元素，右边是一个 div，如果两者高度不相等，整个布局就会坍塌，所以为这个 div 创建一个 BFC，就能得到我们想要的布局；
7+
3）BFC 在页面是一个独立的容器，外面的元素不会影响里面的元素，反之亦然；
8+
4）计算 BFC 高度时，浮动元素也会参与计算。这就是在浮动元素父元素上增加 overflow:hidden 会将浮动元素计算入内，而不会使父元素高度坍塌或者背景颜色显示不出来的原因。
9+
创建 BFC 的方式：
10+
11+
1）只要 overflow 值不为 visible（默认值），就创建了 BFC；
12+
2）float 值不为 none （默认值），只要设置了浮动，就创建了 BFC；
13+
3）position 值不为 static（默认值）或者是 relative，就创建了 BFC；
14+
4）将 display 值设置为 inline-box 或者是 table-cell（只要跟 table 相关的那几个），就创建了 BFC。
15+
对应的内联元素的格式化上下文叫 IFC。 */
16+
17+
/**形成 BFC 的条件
18+
五种:
19+
浮动元素，float 除 none 以外的值 定位元素，position(absolute，fixed)
20+
display 为以下其中之一的值 inline-block，table-cell，table-caption overflow 除了 visible 以外的值(hidden，auto，scroll)
21+
HTML 就是一个 BFC
22+
23+
BFC 的特性:
24+
内部的 Box 会在垂直方向上一个接一个的放置。 垂直方向上的距离由 margin 决定
25+
bfc 的区域不会与 float 的元素区域重叠。
26+
计算 bfc 的高度时，浮动元素也参与计算
27+
bfc 就是页面上的一个独立容器，容器里面的子元素不会影响外面元素。 */

‎阶段九/flex属性.html

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8+
<title>Document</title>
9+
</head>
10+
11+
<body>
12+
<style>
13+
.father {
14+
width: 100%;
15+
height: 500px;
16+
background-color: aqua;
17+
display: flex;
18+
flex-wrap: wrap;
19+
align-items: center;
20+
justify-content: space-between;
21+
flex-direction: row;
22+
}
23+
24+
.father .children {
25+
width: 10%;
26+
margin-left: 20px;
27+
height: 50px;
28+
background-color: blueviolet;
29+
}
30+
31+
.chilren2 {
32+
order: -1;
33+
}
34+
35+
.chilren6 {
36+
flex-grow: 1;
37+
}
38+
39+
.chilren4 {
40+
align-self: flex-end;
41+
}
42+
</style>
43+
<div class="father">
44+
<div class="children chilren1">1</div>
45+
<div class="children chilren2">2</div>
46+
<div class="children chilren3">3</div>
47+
<div class="children chilren4">4</div>
48+
<div class="children chilren5">5</div>
49+
<div class="children chilren6">6</div>
50+
</div>
51+
</body>
52+
53+
</html>

‎阶段九/inline-block.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
//相邻的两个inline-block节点为什么会出现间隔，该如何解决
2+
3+
/**是换行符引起的间隔问题，间隙为 4px。
4+
* 消除间隙的方法：
5+
* 1）去掉换行符；
6+
* 2）对父元素添加 font-size:0，将字体大小设置为 0，换行符也会为 0px，从而消除间隙，再为 inline-block 元素设置我们需要的字体大小；
7+
* 3）将 inline-block 的 margin-right/left 设置为 -4px；
8+
* 4）将父元素的 letter-spacing 或 word-spacing 设置为 -4px，这两个属性会增加或减少字符间隔。word-spacing 对中文无效
9+
* inline-block 还有两个问题：即不同高度的两个 inline-block 顶部不对齐，以及 inline-block 底部多出几像素（多出空白）。
10+
* 解决方法是为 inline-block 元素设置 vertical-align:top。设置元素的垂直对齐方式 */

‎阶段九/position.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
/**
2+
* static:无特殊定位，对象遵循正常文档流。top，right，bottom，left等属性不会被应用。
3+
* relative:对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。 而其层叠通过z-index属性定义。
4+
* absolute:对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。
5+
* fixed:对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现 滚动条时，对象不会随着滚动。而其层叠通过z-index属性定义。
6+
* sticky:具体是类似 relative 和 fixed，在 viewport 视口滚动到阈值之前应用 relative，滚动到阈值之后 应用 fixed 布局，由 top 决定。 */

‎阶段九/visibility.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
/**
2+
visibility:设置 hidden 会隐藏元素，但是其位置还存在与页面文档流中，不会被删除，所以会触发 浏览器渲染引擎 的 重绘
3+
display:设置了 none 属性会隐藏元素，且其位置也不会被保留下来，所以会触发 浏览器渲染引擎的回流 和 重绘。
4+
opacity:会将元素设置为透明，但是其位置也在页面文档流中，不会被删除，所以会触发 浏览器渲染引擎 的 重绘 */

‎阶段九/三角形.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
/**三角形实现原理：宽度width为0；height为0；
2+
* （1）有一条横竖边（上下左右）的设置为border-方向：长度 solid red，这个画的就是底部的直线。其他边使用border-方向：长度 solid transparent。
3+
* （2）有两个横竖边（上下左右）的设置，若斜边是在三角形的右边，这时候设置top或bottom的直线，和右边的斜线。若斜边是在三角形的左边，这时候设置top或bottom的直线，和左边的斜线。
4+
*
5+
* #triangle-up {
6+
width: 0;
7+
height: 0;
8+
border-left: 50px solid transparent;
9+
border-right: 50px solid transparent;
10+
border-bottom: 100px solid red;
11+
}
12+
*/

‎阶段九/动画.js

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
/**animation 是以下属性的简写方式：
2+
1）animation-name 动画名称
3+
2）animation-duration 动画持续的时间
4+
3）animation-timing-function = ease(默认) | ease-in | ease-out | ease-in-out | linear | cubic-bezier 定义了动画的播放速度曲线
5+
4）animation-direction = normal | reverse| alternate| alternate-reverse 播放方向
6+
5）animation-delay 延迟时间
7+
6）animation-iteration-count = infinite | number 播放次数
8+
7）animation-fill-mode = none | forwards | backwards | both 播放后保持动画第一帧或者最后一帧样式
9+
8）animation-play-state = running | paused 控制动画运行或暂停
10+
通常在 JS 端使用该属性object.style.animationPlayState=”paused”来暂停动画 */
11+
12+
// transition 是 CSS 提供的在更改 CSS 属性时，控制动画速度的方法，其可以让属性变化成为一个持续一段时间的过程，而不是立即生效。
13+
14+
/**transition 是以下属性的简写方式：
15+
1）transition-property 监听的 CSS 属性，也可以是 all
16+
2）transition-duration 规定完成过渡效果需要多少秒或毫秒
17+
3）transition-timing-function = ease(默认) | ease-in | ease-out | ease-in-out | linear | cubic-bezier 定义了动画的播放速度曲线
18+
4）transition-delay 延迟执行时间
19+
*/
20+
21+
/**animation、transition、transform、translate 这几个属性要搞清楚:
22+
animation:用于设置动画属性，他是一个简写的属性，包含6个属性 transition:用于设置元素的样式过度，和animation有着类似的效果，
23+
但细节上有很大的不同 transform:用于元素进行旋转、缩放、移动或倾斜，和设置样式的动画并没有什么关系
24+
translate:translate只是transform的一个属性值，即移动，除此之外还有 scale 等 */

‎阶段九/左固定右适应.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
//左 float，然后右 margin-left(右边自适应)
2+
//右 float，margin-right
3+
//BFC +
4+
// .aside {
5+
// width: 300px;
6+
// float: left;
7+
// background: yellow;
8+
// }
9+
// .main {
10+
// overflow: hidden;
11+
// background: aqua;
12+
// }

‎阶段九/清除浮动.js

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
/**
2+
* 不清除浮动会发生高度塌陷:浮动元素父元素高度自适应(父元素不写高度时，子元素写了浮动后，父元素会发生高度塌陷)
3+
* clear清除浮动(添加空div法)在浮动元素下方添加空div,并给该元素写css样式: {clear:both;height:0;overflow:hidden;}
4+
* 给浮动元素父级设置高度
5+
* 父级同时浮动(需要给父级同级元素添加浮动) 父级设置成inline-block，其margin: 0 auto居中方式失效 给父级添加overflow:hidden 清除浮动方法
6+
* 万能清除法 after伪类 清浮动(现在主流方法，推荐使用)
7+
.float_div:after{
8+
content:".";
9+
clear:both;
10+
display:block;
11+
height:0;
12+
overflow:hidden;
13+
visibility:hidden;
14+
}
15+
.float_div{
16+
zoom:1 } */

0 commit comments

Comments
 (0)