前端日记 - 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字节。