Skip to content

Commit edaa54c

Browse files
sillencesillence
committed
css
1 parent 4f15a1d commit edaa54c

File tree

5 files changed

+326
-6
lines changed

5 files changed

+326
-6
lines changed

‎docs/_navbar.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
- [JS](/)
22
- [CSS](/css/README.md)
33
- [HTTP](/http/README.md)
4+
- [VUE](/vue/README.md)

‎docs/css/README.md‎

Lines changed: 243 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
2-
# CSS 题目 敬请期待
1+
# CSS 题目
32

43
题目和答案通过网络整理，如有错误欢迎 pr 修正。
54

@@ -9,21 +8,260 @@
98

109
查看其他分类题目
1110

12-
:purple_heart: [JAVASCRIPT](/)
11+
:purple_heart: [JAVASCRIPT](/)
1312
:heart: [HTTP](/http/README.md)
1413

1514
---
1615

16+
#### CSS 盒子模型 ？
17+
18+
<details><summary><b>答案</b></summary>
19+
<p>
20+
盒子组成: content padding border margin
21+
22+
- W3C 盒子模型 : width = content
23+
- IE 盒子模型 : width = content + padding + border
24+
25+
`box-sizing` 是 CSS3 的新的属性
26+
27+
box-sizing : content-box&emsp;&emsp;&emsp;&emsp;W3C 盒模型
28+
box-sizing : border-box&emsp;&emsp;&emsp;&emsp;IE 盒模型
29+
30+
</p>
31+
</details>
32+
33+
---
34+
35+
#### CSS position 的值 ？
36+
37+
<details><summary><b>答案</b></summary>
38+
<p>
39+
40+
- absolute
41+
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
42+
- fixed （老 IE 不支持）
43+
生成绝对定位的元素，相对于浏览器窗口进行定位。
44+
- relative
45+
生成相对定位的元素，相对于其正常位置进行定位。
46+
- static 默认值。没有定位，元素出现在正常的流中 （忽略 top, bottom, left, right z-index 声明）。
47+
- inherit 规定从父元素继承 position 属性的值。
48+
49+
</p>
50+
</details>
51+
52+
---
53+
54+
#### BFC 是什么 ？
55+
56+
<details><summary><b>答案</b></summary>
57+
<p>
58+
59+
BFC（块级格式化上下文），一个创建了新的 BFC 的盒子是独立布局的，盒子内元素的布局不会影响盒子外面的元素。在同一个 BFC 中的两个相邻的盒子在垂直方向发生 margin 重叠的问题
60+
BFC 是指浏览器中创建了一个独立的渲染区域，该区域内所有元素的布局不会影响到区域外元素的布局，这个渲染区域只对块级元素起作用
61+
62+
</p>
63+
</details>
64+
65+
---
66+
67+
#### CSS 选择符有哪些？哪些属性可以继承？
68+
69+
<details><summary><b>答案</b></summary>
70+
<p>
71+
72+
- 1.id 选择器（ # myid）
73+
2.类选择器（.myclassname）
74+
3.标签选择器（div, h1, p）
75+
4.相邻选择器（h1 + p）
76+
5.子选择器（ul < li）
77+
6.后代选择器（li a）
78+
7.通配符选择器（ \* ）
79+
8.属性选择器（a[rel = "external"]）
80+
9.伪类选择器（a: hover, li: nth - child）
81+
- 可继承： font-size font-family color, UL LI DL DD DT;
82+
- 不可继承 ：border padding margin width height ;
83+
84+
</p>
85+
</details>
86+
87+
---
88+
89+
#### CSS 优先级算法如何计算？ CSS3 新增伪类有那些？？
90+
91+
<details><summary><b>答案</b></summary>
92+
<p>
93+
94+
优先级为:
95+
!important > 行内样式 > id > class > tag
96+
97+
CSS3 新增伪类举例：
98+
p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
99+
p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
100+
p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
101+
p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。
102+
p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。
103+
:enabled、:disabled 控制表单控件的禁用状态。
104+
:checked，单选框或复选框被选中。
105+
106+
</p>
107+
</details>
108+
109+
---
110+
111+
#### CSS 清除浮动方法有哪些，比较好的是哪一种？
112+
113+
<details><summary><b>答案</b></summary>
114+
<p>
115+
116+
1.父元素的最后设置 `clear:both` (不推荐，增加了元素)
117+
118+
```html
119+
<div class="p">
120+
<div class="c"></div>
121+
<div class="c"></div>
122+
<div style="clear:both"></div>
123+
</div>
124+
```
125+
126+
2.伪元素，这里我们使用 `::after`。添加一个类 `clearfix::after` (推荐，浏览器支持好)
127+
128+
```html
129+
<div class="p fix">
130+
<div class="c"></div>
131+
<div class="c"></div>
132+
</div>
133+
<style>
134+
.clearfix::after {
135+
content: '.';
136+
display: block;
137+
height: 0;
138+
visibility: hidden;
139+
clear: both;
140+
}
141+
.clearfix {
142+
*zoom: 1; /* ie6-7 清除浮动方式 */
143+
}
144+
</style>
145+
```
146+
147+
3.父级 `overflow:hidden` (不推荐 ，不能和 position 配合使用，因为超出的尺寸的会被隐藏)
148+
4.父级 `div` 定义 `height` (不推荐 ，不灵活)
149+
5.父级 `div` 定义 `display:table` (不推荐 ，不灵活)
150+
151+
</p>
152+
</details>
153+
154+
---
155+
156+
#### CSS 如何实现垂直水平居中？
157+
158+
<details><summary><b>答案</b></summary>
159+
<p>
160+
161+
1.利用 `flexbox` 布局
162+
163+
```html
164+
<style>
165+
.flexbox {
166+
display: flex;
167+
justify-content: center; /* 水平居中 */
168+
align-items: center; /* 垂直居中 */
169+
}
170+
</style>
171+
```
172+
173+
2.利用绝对定位与 `transform`
174+
175+
```html
176+
<style>
177+
.parent {
178+
position: absolute;
179+
}
180+
.parent .children {
181+
position: absolute;
182+
top: 50%;
183+
left: 50%;
184+
-webkit-transform: translate(-50%, -50%);
185+
}
186+
</style>
187+
```
188+
189+
3.将父元素定位，子元素绝对定位，利用 `margin` 负值为子元素宽高的一半来实现。
190+
191+
```html
192+
<style>
193+
.parent {
194+
position: relative;
195+
background-color: #eee;
196+
height: 600px;
197+
width: 100%;
198+
}
199+
.parent .children {
200+
background-color: #751;
201+
width: 200px;
202+
height: 200px;
203+
position: absolute;
204+
top: 50%;
205+
left: 50%;
206+
margin: -100px 0 0 -100px;
207+
}
208+
</style>
209+
```
210+
211+
4.利用定位与 `margin:auto`
212+
213+
```html
214+
<style>
215+
.parent {
216+
width: 100%;
217+
height: 600px;
218+
background: #09c;
219+
position: relative;
220+
}
221+
.children {
222+
width: 100px;
223+
height: 100px;
224+
background-color: #eee;
225+
position: absolute;
226+
top: 0;
227+
left: 0;
228+
bottom: 0;
229+
right: 0;
230+
margin: auto;
231+
}
232+
</style>
233+
```
234+
235+
</p>
236+
</details>
237+
238+
---
239+
240+
#### CSS 中 `link` 和 `@import` 的区别是?？
241+
242+
<details><summary><b>答案</b></summary>
243+
<p>
244+
245+
- `link` 属于 html 标签，而 `@import` 是 CSS 中提供的
246+
- 在页面加载的时候，`link` 会同时被加载，而`@import` 引用的 CSS 会在页面加载完成后才会加载引用的 CSS
247+
- `@import` 只有在 ie5 以上才可以被识别，而 `link` 是 html 标签，不存在浏览器兼容性问题
248+
249+
</p>
250+
</details>
251+
252+
---
253+
17254
#### 如何找到失散已久的组织？
18255

19256
<details><summary><b>答案</b></summary>
20257
<p>
21258

22-
&nbsp;&nbsp;&nbsp;&nbsp;扫描下方二维码:point_down::point_down:关注“前端女塾”
259+
&nbsp;&nbsp;&nbsp;&nbsp;扫描下方二维码:point_down::point_down:关注“前端女塾”
23260

24261
![logo](https://imgs.solui.cn/wx/640.gif ':size=262x224')
25262
关注公众号：回复“加群”即可加 前端仙女群
263+
26264
</p>
27265
</details>
28266

29-
---
267+
---

‎docs/http/README.md‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,24 @@
1414

1515
---
1616

17-
#### Http 2.0 和 Http 1.1 的区别？
17+
#### http1 和http2 有什么区别，http2优势？
1818

1919
<details><summary><b>答案</b></summary>
2020
<p>
21+
22+
相对于HTTP1.0，HTTP1.1的优化：
23+
缓存处理：多了Entity tag，If-Unmodified-Since, If-Match, If-None-Match等缓存信息（HTTTP1.0 If-Modified-Since,Expires）
24+
带宽优化及网络连接的使用
25+
错误通知的管理
26+
Host头处理
27+
长连接：HTTP1.1中默认开启Connection：keep-alive，一定程度上弥补了HTTP1.0每次请求都要创建连接的缺点。
28+
相对于HTTP1.1，HTTP2的优化：
29+
HTTP2支持二进制传送（实现方便且健壮），HTTP1.x是字符串传送
30+
HTTP2支持多路复用
31+
HTTP2采用HPACK压缩算法压缩头部，减小了传输的体积
32+
HTTP2支持服务端推送
33+
你能说说缓存么
34+
2135
</p>
2236
</details>
2337

‎docs/javascript/README.md‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,30 @@ var func = (a, b) => {
8686
`null` 是一个很特殊的对象,最为常见的一个用法就是作为参数传入(说明该参数不是对象)
8787
设置为 `null` 的变量或者对象会被内存收集器回收
8888

89+
</p>
90+
</details>
91+
92+
---
93+
94+
#### 开发中用到了哪些 ES6 的新特性？
95+
96+
<details><summary><b>答案</b></summary>
97+
<p>
98+
99+
1. `let` (声明变量) `const` (声明常量,常量不能修改的量)
100+
2. `class` (创建类)
101+
3. `import/export` (基于 ES6 的模块规范创建导入/导出模块(文件/组件))
102+
4. `new Set` (数组去重)
103+
5. `Symbol`(唯一的值) `var a = Symbol('sunnie')`
104+
6. `...ary` (展开运算符、剩余运算符)
105+
7. `${}` 模板字符串
106+
8. 解构赋值 `let {a} = obj; let [b] = ary`
107+
9. `for of` 循环
108+
10. `()=>{}` 箭头函数
109+
11. 数组新增方法：`flat、find、findIndex`
110+
12. 对象新增方法： `Object.assign() Object.values() Object.keys() Object.create()`
111+
112+
89113
</p>
90114
</details>
91115

‎docs/vue/README.md‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
2+
# VUE 题目 敬请期待
3+
4+
题目和答案通过网络整理，如有错误欢迎 pr 修正。
5+
6+
题目可能不会按顺序添加，不要直接拉到最后哦，多看几遍吧，温故而知新。
7+
8+
答案被折叠，点击即可查看答案。:heart:
9+
10+
查看其他分类题目
11+
12+
:purple_heart: [JAVASCRIPT](/)
13+
:heart: [HTTP](/http/README.md)
14+
:purple_heart: [CSS](/css/README.md)
15+
16+
---
17+
18+
#### VUE 如何实现双向绑定？
19+
20+
<details><summary><b>答案</b></summary>
21+
<p>
22+
23+
&nbsp;&nbsp;&nbsp;&nbsp;扫描下方二维码:point_down::point_down:关注“前端女塾”
24+
25+
![logo](https://imgs.solui.cn/wx/640.gif ':size=262x224')
26+
关注公众号：回复“加群”即可加 前端仙女群
27+
</p>
28+
</details>
29+
30+
---
31+
#### 如何找到失散已久的组织？
32+
33+
<details><summary><b>答案</b></summary>
34+
<p>
35+
36+
&nbsp;&nbsp;&nbsp;&nbsp;扫描下方二维码:point_down::point_down:关注“前端女塾”
37+
38+
![logo](https://imgs.solui.cn/wx/640.gif ':size=262x224')
39+
关注公众号：回复“加群”即可加 前端仙女群
40+
</p>
41+
</details>
42+
43+
---

0 commit comments

Comments
 (0)