颜色

1、rgb

通过设置三原色的比例来合成不同的颜色，可以使用

# + 三个16进制数(例如黑色#000000)
rgb(r, g, b) $(0 \leq r, g, b \leq 255)$

2、HSL

rgb颜色表示方法不够直观，可以使用hsl(h, s, l)

H：色相(Hue)是色彩的基本属性，如红色、黄色等；取值范围是0-360
S：饱和度(Saturation)是指色彩的鲜艳程度，越高越鲜艳；取值范围0-100%
L：亮度(Lightness)指颜色的明亮程度；越高颜色越亮；取值范围是0-100%

3、 alpha透明度

更准确地说应该是不透明度，数值越低越透明，使用方法是在原有的颜色表示方法上添加额外的数，其中第一种取值0-255，后两种取值0-100%

#rrggbbaa
rgba(r, g, b, a)较新版浏览器使用rgb也行
hsla(h, s, l, a)

样式生效规则

1、选择器特异度

选择器的id、(伪)类、标签的数量越多，特异度越高，生效优先级也更高

	#	.	E
	id	(伪)类	标签
`#nav .list li a:link`	1	2	2
`.hd ul.links a`	0	2	2

所以如果两种选择器存在重复的样式，会优先渲染第一种的样式
同样的，可以利用该原理，设置某一类标签通用的样式，再增加特异度来设置特殊的标签样式

2、样式继承

某些属性会自动继承其父元素的计算值，除非显式指定一个值
一般来说，文字类的样式(如font-size, color)会继承，而模型类(如width)不会继承
也可以将样式属性设置inherit来使该样式强制继承

* {
    box-sizing: inherit;
}
/* 通过通配符选择器将所有标签的box-sizing样式设置为继承 */

html {
    box-sizing: border-box;
}
/* 因此设置某一标签的属性就可以将所有子树上的标签样式都设置 */

.some-widget {
    box-sizing: content-box;
}
/* 设置特殊的样式 */

3、初始值

css中每个样式都有初始值，在既没有手动设置样式、也没有继承自父类时，就会将该样式设为初始值
- background-color的初始值为transparent(即透明)
- margin-left的初始值为0(即无左外边距)
可以将样式设置为initial来强制重置为初始值
- background-color: initial;

4、tips

margin与padding的值设置百分数时，是相对于容器宽度的百分数
margin: auto;设置水平居中
当不同方向边框颜色不同时，连接处会沿对角线平分，此时将宽高与内边距都设置为0，就可以得到沿两条对角线分出来的四个三角形，此时再将其它方向边框宽度与颜色进行调整，就可以得到不同形状的三角形

排版

行级排版上下文

Inline Formatting Context(IFC)
只包含行级盒子的容器会创建一个IFC
IFC内的排版规则
- 盒子在一行内水平拜访
- 一行放不下时，换行显示
- text-align决定一个盒子在行内的垂直对齐
- 避开浮动(float)元素

块级排版上下文

Block Formatting Context(BFC)
某些容器会创建一个BFC
- 根元素
- 浮动、绝对定位、inline-block
- Flex子项和Grid子项
- overflow值不是visible的块盒
- display: flow-root;
BFC内的排版规则
- 盒子从上到下摆放
- 垂直margin合并
- BFC内盒子的margin不会与外面的合并
- BFC不会和浮动元素重叠

CSS课的一些小笔记 | 青训营笔记

颜色

1、rgb

2、HSL

3、 alpha透明度

样式生效规则

1、选择器特异度

2、样式继承

3、初始值

4、tips

排版

行级排版上下文

块级排版上下文