css

cascading stylesheet
级联样式表

Level 版本

选择器

简单

属性选择器 [ ]

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

组合性选择器

伪元素

优先级/特异度 Specificity

样式来源

默认值策略 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 求值过程

一个令人疑惑的很皮的 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 求值详细过程

CSS 排版原理

盒模型

content-box:

border-box

height 100%(一般不用

padding 100%

margin 折叠

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

border:四条边不同颜色

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

视觉格式化模型

Viewport 视口

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

块级元素(Block-level Elements)

行内元素(Inline-level Elements)


“因为大佬比你知道的多”