css

cascading stylesheet
级联样式表

Level 版本

  • CSS Level 1（废弃
  • CSS Level 2 (CSS 2.2 完整规范)
  • CSS Level 3（在 2.2 的基础上增加新模块特性
    • Color Module Level 3
    • Selectors Level 3
    • Media Queries
    • Fonts Level 3

选择器

简单

  • 通配 *
  • 标签 E
  • 类 .class
  • id #id

属性选择器 [ ]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* 具有某个属性 */
[disabled]

/* 属性为指定的值 */
[type="checkbox"]

/* 属性值包含某个字符串 */
[href*="example"]

/* 属性值以某个字符串开头 */
[href^="http:"]

/* 属性值以某个字符串结束 */
[href$="jpg"]

/* 属性值以空格分割后包含某个字符串 */
[lang~＝"zh-cn"]/* class选择器的实现机制 */

伪类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/* 动态性伪类，根据状态选择 */
a:link    { ... }       /* 未访问过的链接 */
a:visited { ... }       /* 已访问过的链接 */

a:hover   { ... }       /* 鼠标移到链接上的样式 */
a:active  { ... }       /* 鼠标在连接上按下时的样式 */
a:focus   { ... }       /* 获得焦点时的样式 */

input:disabled { ... }  /* 禁用时的样式 */
input:checked { ... }   /* 选中时的样式 */
                        /*利用:checked来做某些toggle组件状态转换*/

/* 结构性伪类 */
:first-child
:last-child
:nth-child(2n+1)

:first-of-type
:last-of-type
div:nth-of-type(2n+1)   /*对nth-child()增加类型限制*/

:empty

组合性选择器

  • 后代 E F
  • 父子 E>F
  • 兄弟 E~F
  • 相邻兄弟 E+F

伪元素

  • ::before
  • ::after
  • ::first-letter
  • ::first-line

优先级/特异度 Specificity

  • !important > 内联 > id > （伪）类 > （伪）元素
  • 覆盖：同样优先级：后面写的覆盖前面写的
  • 复合选择器：从优先级高的选择器 的 数量 开始比较

样式来源

  • 页面开发者
  • 用户设置（浏览器可以指定一个本地 CSS 文件，打开所有页面时自动加载
  • 浏览器预设
  • 优先级： 开发者 > 用户设置 > 浏览器预设
  • 加了!important 的优先级：用户 important > 开发者 important > 开发者 > 用户设置 > 浏览器预设

默认值策略 Defaulting

继承

某些属性若不指定值，会自动继承父元素的 ！！！【计算值】

显示继承

1
2
3
4
5
6
7
8
9
10
html {
    box-sizing: border-box;
}
* {
    box-sizing: inherit;
    /* 优点是有某一块都要设置为content-box时，只需要设置其最外层元素，不需要全设置 */
}
#xxx {
    box-sizing: content-box;
}

初始值 initial

  • CSS 中，每个属性都有一个初始值
  • background-color 的初始值为 transparent
  • margin-left 的初始值为 0，font-size 是 16px，line-height 是 1.2，但根据 font-family 而不同
  • 可以显式重置为初始值，比如 background-color: initial
  • 可以上 mdn 查初始值

CSS 求值过程

一个令人疑惑的很皮的 CSS 求值例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<article>
    <h1>卡尔斯巴德洞窟</h1>
    <p>
        卡尔斯巴德洞窟（Carlsbad Caverns）是美国的一座国家公园，
        位于新墨西哥州东南部。游客可以通过天然入口徒步进入，也可以
        通过电梯直接到达230米的洞穴深处。
    </p>
</article>

<style>
    body {
        margin: 0;
    }
    article {
        line-height: 150%;
    }
    h1 {
        font-size: 40px; /*最终实际的line-height值为24px*/
    }
    p {
        font-size: 14px; /*最终实际的line-height值为24px*/
    }
</style>

<style>
    body {
        margin: 0;
    }
    article {
        line-height: 1.5;
    }
    h1 {
        font-size: 40px; /*最终实际的line-height值为60px*/
    }
    p {
        font-size: 14px; /*最终实际的line-height值为21px*/
    }
</style>

<!--
    原因：
    设为150%时，子元素继承前，父元素的line-height=150%会先被计算（resolving），得到一个绝对值，被计算为16px(默认的font-size值)*1.5=24px，子元素继承到的值是24px

    设为1.5时，子元素继承前，父元素在执行resolving时，1.5是绝对值，不会被转换，所以子元素继承到值1.5，后面再根据自己的font-size*1.5计算line-height

    总结：子元素继承到的是父元素的 计算值（一个绝对值）
-->

CSS 求值详细过程

  • filtering：有效选择器 有效属性值 符合 media ，筛选出所有声明值 Declared Values
  • cascading：选出优先级最高的一条声明，得到层叠值 Cascaded Value
  • defaulting：当层叠值为空时，用 继承 | 初始值，得到指定值 Specified Value
  • resolving：将相对值、关键字转化为绝对值，如 em 转换为 px，%被转换为 px，相对路径转换为绝对路径，得到计算值 Computed Value
  • formatting:将计算值进一步转换，比如百分比、关键字转换为绝对值，得到使用值 Used Value
  • constraining：将小数像素转为整数，得到实际值

CSS 排版原理

盒模型

content-box：

  • margin
  • border
  • padding
  • content（width height）

border-box

  • margin
  • border （width = border + padding + content_width）
  • padding
  • content

height 100%（一般不用

  • 高度百分数，是相对于父元素的高度
  • 若父元素无高度，则百分比高度不生效
  • 用 vw vh 设置相对于屏幕的百分比高度，100vh 即 100%屏幕高度

padding 100%

  • padding 百分比值，不论是 padding top、left，都是相对于父元素宽度
  • 应用：做固定宽高比的盒子.

margin 折叠

上下相邻元素的间距会取其 margin 中较大值。

border：四条边不同颜色

  • 实际相邻的 border 交界处，是斜切的。
  • 当元素的 width height 为 0 时，会得到四个三角形

background: repeating-conic-gradient(black 0 60deg, yellow 0 120deg);

视觉格式化模型

Viewport 视口

浏览器的可视区域，所有元素都在 viewport 内

块级元素(Block-level Elements)

  • 会被格式化成块状的元素
  • 例如 p、div、section 等
  • 将 display 设置为 block、list-item、table 会使元素变为块级

行内元素(Inline-level Elements)

  • 不会为其内容生成块级框
  • 让其内容分布在多行中
  • display 设置为 inline、inline-block、inline-table 会使元素变为行级
“因为大佬比你知道的多”