noham/knowledge-kit
1
0
Fork 0
mirror of https://github.com/NohamR/knowledge-kit.git synced 2026-05-25 04:17:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

update: image source

Browse Source
This commit is contained in:
杭城小刘
2024-02-23 15:58:55 +08:00
parent fb51939f76
commit 6e47061735
22 changed files with 783 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
Chapter2 - Web FrontEnd/2.45.md
View File

@@ -43,7 +43,7 @@ QA：
为了提高解析效率，浏览器会启动一个预解析器率先下载和解析 CSS
<img src="https://github.com/FantasticLBP/knowledge-kit/raw/master/assets/HTMLParse-CSSPreload.png" style="zoom:20%;">
<img src="https://github.com/FantasticLBP/knowledge-kit/raw/master/assets/HTMLParse-CSSPreLoad.png" style="zoom:20%;">
@@ -261,7 +261,7 @@ p {
都处于页面作者样式表中，选择器的权重也相同，但根据所处位置的不同，下面的样式声明会覆盖上面的值，最终采用 #0000ff。
<img src="https://github.com/FantasticLBP/knowledge-kit/raw/master/assets/CssStylePositionPriority.png" style="zoom:25%;">
<img src="https://github.com/FantasticLBP/knowledge-kit/raw/master/assets/CSSStylePositionPriority.png" style="zoom:25%;">
样式声明冲突的情况解决了
@@ -284,7 +284,7 @@ p {
只对类名为 container color 进行了设置，针对 p 标签没有任何的设置，但由于 color 可以继承，所以 p 就从最近的 div 继承了颜色。
<img src="https://github.com/FantasticLBP/knowledge-kit/raw/master/assets/CssStyleInherited.png" style="zoom:25%;">
<img src="https://github.com/FantasticLBP/knowledge-kit/raw/master/assets/CSSStyleInherited.png" style="zoom:25%;">
看另一个现象
@@ -302,7 +302,7 @@ p {
</div>
```
<img src="https://github.com/FantasticLBP/knowledge-kit/raw/master/assets/CssStyleDoubleInherited.png" style="zoom:25%;">
<img src="https://github.com/FantasticLBP/knowledge-kit/raw/master/assets/CSSStyleDoubleInherited.png" style="zoom:25%;">
这里继承了 container、innerContainer 2个的属性值，说了继承会选择更近的一个，innerContainer 胜出。
@@ -318,7 +318,7 @@ p {
</div>
```
<img src="https://github.com/FantasticLBP/knowledge-kit/raw/master/assets/CssStyleDefaultValue.png" style="zoom:25%;">
<img src="https://github.com/FantasticLBP/knowledge-kit/raw/master/assets/CSSStyleDefaultValue.png" style="zoom:25%;">
任何一个元素要在浏览器上渲染出来，必须具备所有的 css 属性值，但很多属性我们没有去设置，用户代理样式表中也没有设置，也无法从继承中拿到，因此最终都是使用默认值的。