前端日记 - 2019年1月11日

引入css,选择器权重,主流浏览器及其内核

想法

又到周五了。

再一次被实验室被打断施法,告辞。

笔记

CSS (cascading style sheet) 层叠样式表

  1. 引入css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!-- 1. 行间样式 -->
<div style="
width: 100px;
height: 100px;
"></div>

<!-- 2. 页面级css -->
<head>
<!-- 这里的type可写可不写 -->
<style type="text/css">
div {
width: 100px;
height: 100px;
}
</style>
</head>

<!-- 3. 外部css文件 -->
<head>
<link rel="stylesheet" type="text/css" href=".css">
</head>

当浏览器解析到head标签里的link下载css时,会起一个线程下载css,所以html和css文件是同时(async)下载的(异步加载)。

选择器

优先级:!important > 行间样式 > id > class = 属性选择器 > 标签选择器 > 通配符

属性选择器:[id](有id属性的标签)、[id=""](id值=””的标签)

当优先级一致时,按出现顺序来。

css选择器权重

1
2
3
4
5
6
Infinity - !important
1000 - 行间样式
100 - id
10 - class|属性|伪类
1 - 标签|伪元素
0 - 通配符

权重的值其实是256进制(不同内核不一样)。

其他

面经:当今主流浏览器及其内核?

IE、Firefox、Chrome、Safari、Opera

主流浏览器必须有自我研发的内核,浏览器分为两部分:shell、内核

shell:外壳,操作类的展示页面

内核:

1
2
3
4
5
IE      - trident
Firefox - Gecko
Chrome - Webkit -> blink
Safari - Webkit
Opera - presto

开发时间评估

评估开发时间的时候一般是 开发周期 X 3 或 3.5,现在想想以前在京东接需求的时候那叫一个积极啊……真的是太新人了,还好没出什么问题。

表达能力很重要

如果想把一个东西表达清楚,需要反复练习很多遍。

有趣:256个class选择器可以干掉1个id选择器

但在现在的chrome、safari都已修复,可能class类名存储已经改成了16字节。