Skip to content

Commit 7fe74cc

Browse files
LinDaiDaiLinDaiDai
committed
doc: 每日一题增加题目
1 parent 6857fdf commit 7fe74cc

8 files changed

+1007
-720
lines changed

‎CSS/BFC.md

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
## BFC
2+
3+
### 什么是BFC
4+
5+
BFC全称 Block Formatting Context 即`块级格式上下文`，简单的说，BFC是页面上的一个隔离的独立容器，不受外界干扰或干扰外界
6+
7+
### 如何触发BFC
8+
9+
- `float`不为 none
10+
- `overflow`的值不为 visible
11+
- `position` 为 absolute 或 fixed
12+
- `display`的值为 inline-block 或 table-cell 或 table-caption 或 grid
13+
14+
### BFC的渲染规则是什么
15+
16+
- BFC是页面上的一个隔离的独立容器，不受外界干扰或干扰外界
17+
- 计算BFC的高度时，浮动子元素也参与计算（即内部有浮动元素时也不会发生高度塌陷）
18+
- BFC的区域不会与float的元素区域重叠
19+
- BFC内部的元素会在垂直方向上放置
20+
- BFC内部两个相邻元素的margin会发生重叠
21+
22+
### BFC的应用场景
23+
24+
- **清除浮动**：BFC内部的浮动元素会参与高度计算，因此可用于清除浮动，防止高度塌陷
25+
- **避免某元素被浮动元素覆盖**：BFC的区域不会与浮动元素的区域重叠
26+
- **阻止外边距重叠**：属于同一个BFC的两个相邻Box的margin会发生折叠，不同BFC不会发生折叠
27+

‎CSS/用CSS实现各种形状.md

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
## 用CSS实现各种形状
2+
3+
### 如何画扇形？
4+
5+
```css
6+
.sector {
7+
width: 0;
8+
height: 0;
9+
border: 100px solid red;
10+
border-color: red transparent transparent transparent;
11+
border-radius: 50%;
12+
}
13+
/*或者*/
14+
.sector {
15+
width: 100px;
16+
height: 100px;
17+
border: 100px solid transparent;
18+
border-top-color: red;
19+
box-sizing: border-box; /* 这步很重要 */
20+
border-radius: 50%;
21+
}
22+
```
23+
24+
**HTML代码：**
25+
26+
```html
27+
<div class="sector"></div>
28+
```
29+
30+
31+
32+
### 如何画三角形？
33+
34+
```css
35+
.triangle {
36+
width: 0;
37+
height: 0;
38+
border: 100px solid red;
39+
border-color: red transparent transparent transparent;
40+
}
41+
/*或者*/
42+
.triangle {
43+
width: 100px;
44+
height: 100px;
45+
border: 100px solid transparent;
46+
border-top-color: red;
47+
box-sizing: border-box;
48+
}
49+
```
50+
51+
**HTML代码：**
52+
53+
```html
54+
<div class="triangle"></div>
55+
```
56+
57+
58+
59+
### 圆？半圆？椭圆？
60+
61+
```css
62+
div {
63+
width: 100px;
64+
height: 100px;
65+
background-color: red;
66+
margin-top: 20px;
67+
}
68+
.box1 { /* 圆 */
69+
/* border-radius: 50%; */
70+
border-radius: 50px;
71+
}
72+
.box2 { /* 半圆 */
73+
height: 50px;
74+
border-radius: 50px 50px 0 0;
75+
}
76+
.box3 { /* 椭圆 */
77+
height: 50px;
78+
border-radius: 50px/25px; /* x轴/y轴 */
79+
}
80+
```
81+
82+
**HTML代码：**
83+
84+
```html
85+
<div class="box1"></div>
86+
<div class="box2"></div>
87+
<div class="box3"></div>
88+
```
89+

‎README.md

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,13 @@
1010

1111
## 文章目录
1212

13+
## 每日一题面试系列
14+
15+
- [每日一题-HTML篇](./每日一题/每日一题-HTML篇.md)
16+
- [每日一题-CSS篇](./每日一题/每日一题-CSS篇.md)
17+
- [每日一题-JS篇](./每日一题/每日一题-JS篇.md)
18+
- [每日一题-计算机网络篇](./每日一题/每日一题-计算机网络篇.md)
19+
1320
## HTML
1421

1522
- [HTML的基本结构](./HTML/HTML的基本结构.md)
@@ -23,8 +30,9 @@
2330
- [伪类](./CSS/伪类.md)
2431
- 水平垂直居中
2532
- 经典布局
26-
- BFC
33+
- [BFC](./CSS/BFC.md)
2734
- [【问】position-fixed什么时候会失效](./CSS/position-fixed什么时候会失效.md)
35+
- [用CSS实现各种形状](./CSS/用CSS实现各种形状.md)
2836

2937
## JavaScript
3038

@@ -130,7 +138,7 @@
130138

131139
### webpack
132140

133-
- [webpack教材及案例目录](./前端工程化/webpack/README.md)
141+
- [霖呆呆的webpack之路目录](./前端工程化/webpack/README.md)
134142

135143

136144

@@ -140,11 +148,16 @@
140148

141149
- [ShutdownHTTP系列-基础篇(1)](./计算机网络/ShutdownHTTP系列-基础篇(1).md)
142150
- [ShutdownHTTP系列-HTTP请求报文篇(2)](./计算机网络/ShutdownHTTP系列-HTTP请求报文篇(2).md)
151+
- [HTTPS面试问答](./计算机网络/HTTPS面试问答.md)
143152

144153
### TCP系列
145154

146155
- [适合初学者的TCP讲解](./计算机网络/适合初学者的TCP讲解.md)
147156

157+
### 跨域相关
158+
159+
- [JSONP原理及实现](./计算机网络/跨域/JSONP原理及实现.md)
160+
148161
## 浏览器工作原理
149162

150163
- [霖呆呆你来说说浏览器缓存吧](./浏览器工作原理/霖呆呆你来说说浏览器缓存吧.md)

‎每日一题/每日一题-CSS篇.md

Lines changed: 203 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,203 @@
1+
## 每日一题-CSS篇
2+
3+
### CSS选择器优先级
4+
5+
- !import
6+
- 内联 1000
7+
- ID 100
8+
- 类选择器/伪类选择器/属性选择器 10
9+
- 元素选择器/关系选择器/伪元素选择器 1
10+
- 通配符 *
11+
- 继承
12+
- 原始
13+
14+
15+
16+
### CSS3新特性
17+
18+
- transition：过渡
19+
- transform: 旋转、缩放、移动或倾斜
20+
- animation: 动画
21+
- gradient: 渐变
22+
- box-shadow: 阴影
23+
- border-radius: 圆角
24+
- word-break: normal|break-all|keep-all; 文字换行(默认规则|单词也可以换行|只在半角空格或连字符换行)
25+
- text-overflow: 文字超出部分处理
26+
- text-shadow: 水平阴影，垂直阴影，模糊的距离，以及阴影的颜色。
27+
- box-sizing: content-box|border-box 盒模型
28+
- 媒体查询 `@media screen and (max-width: 960px) {}`还有打印`print`
29+
30+
31+
32+
### 文字单超出显示省略号
33+
34+
```css
35+
div {
36+
width: 200px;
37+
overflow: hidden;
38+
white-space: nowrap;
39+
text-overflow: ellipsis;
40+
}
41+
```
42+
43+
44+
45+
### 文字多行超出显示省略号
46+
47+
```css
48+
div {
49+
width: 200px;
50+
display: -webkit-box;
51+
-webkit-box-orient: vertical;
52+
-webkit-line-clamp: 3;
53+
overflow: hidden;
54+
}
55+
```
56+
57+
该方法适用于WebKit浏览器及移动端。
58+
59+
**跨浏览器兼容方案：**
60+
61+
```css
62+
p {
63+
position:relative;
64+
line-height:1.4em;
65+
/* 3 times the line-height to show 3 lines */
66+
height:4.2em;
67+
overflow:hidden;
68+
}
69+
p::after {
70+
content:"...";
71+
font-weight:bold;
72+
position:absolute;
73+
bottom:0;
74+
right:0;
75+
padding:0 20px 1px 45px;
76+
}
77+
```
78+
79+
80+
81+
### 页面变灰
82+
83+
```css
84+
body {
85+
filter: grayscale(100%); /* 百分比或者 0~1 */
86+
}
87+
```
88+
89+
90+
91+
### CSS中可继承的属性
92+
93+
可继承的只有：颜色、文字、字体间距、行高对齐方式，列表样式。
94+
95+
所有元素可继承：visibility和cursor。
96+
97+
内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。
98+
99+
块状：text-indent和text-align。
100+
101+
列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。
102+
103+
104+
105+
### 如何画扇形？
106+
107+
```css
108+
.sector {
109+
width: 0;
110+
height: 0;
111+
border: 100px solid red;
112+
border-color: red transparent transparent transparent;
113+
border-radius: 50%;
114+
}
115+
/*或者*/
116+
.sector {
117+
width: 100px;
118+
height: 100px;
119+
border: 100px solid transparent;
120+
border-top-color: red;
121+
box-sizing: border-box; /* 这步很重要 */
122+
border-radius: 50%;
123+
}
124+
```
125+
126+
127+
128+
### 如何画三角形？
129+
130+
```css
131+
.triangle {
132+
width: 0;
133+
height: 0;
134+
border: 100px solid red;
135+
border-color: red transparent transparent transparent;
136+
}
137+
/*或者*/
138+
.triangle {
139+
width: 100px;
140+
height: 100px;
141+
border: 100px solid transparent;
142+
border-top-color: red;
143+
box-sizing: border-box;
144+
}
145+
```
146+
147+
148+
149+
### 圆？半圆？椭圆？
150+
151+
```css
152+
div {
153+
width: 100px;
154+
height: 100px;
155+
background-color: red;
156+
margin-top: 20px;
157+
}
158+
.box1 { /* 圆 */
159+
/* border-radius: 50%; */
160+
border-radius: 50px;
161+
}
162+
.box2 { /* 半圆 */
163+
height: 50px;
164+
border-radius: 50px 50px 0 0;
165+
}
166+
.box3 { /* 椭圆 */
167+
height: 50px;
168+
border-radius: 50px/25px; /* x轴/y轴 */
169+
}
170+
```
171+
172+
173+
174+
### 什么是BFC
175+
176+
BFC全称 Block Formatting Context 即`块级格式上下文`，简单的说，BFC是页面上的一个隔离的独立容器，不受外界干扰或干扰外界
177+
178+
### 如何触发BFC
179+
180+
- `float`不为 none
181+
- `overflow`的值不为 visible
182+
- `position` 为 absolute 或 fixed
183+
- `display`的值为 inline-block 或 table-cell 或 table-caption 或 grid
184+
185+
### BFC的渲染规则是什么
186+
187+
- BFC是页面上的一个隔离的独立容器，不受外界干扰或干扰外界
188+
- 计算BFC的高度时，浮动子元素也参与计算（即内部有浮动元素时也不会发生高度塌陷）
189+
- BFC的区域不会与float的元素区域重叠
190+
- BFC内部的元素会在垂直方向上放置
191+
- BFC内部两个相邻元素的margin会发生重叠
192+
193+
### BFC的应用场景
194+
195+
- **清除浮动**：BFC内部的浮动元素会参与高度计算，因此可用于清除浮动，防止高度塌陷
196+
- **避免某元素被浮动元素覆盖**：BFC的区域不会与浮动元素的区域重叠
197+
- **阻止外边距重叠**：属于同一个BFC的两个相邻Box的margin会发生折叠，不同BFC不会发生折叠
198+
199+
可以参考这里：
200+
201+
作者：写代码像蔡徐抻
202+
链接：https://juejin.im/post/5e8b261ae51d4546c0382ab4
203+

0 commit comments

Comments
 (0)