参考
MDN web docs
https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Getting_started
W3school CSS 参考手册
https://www.w3school.com.cn/cssref/index.asp
速查
Complete CSS Cheat Sheet
https://websitesetup.org/css3-cheat-sheet/
所有内容以原文为基准（英语） 中文翻译存在语义差异
什么是 CSS
Cascading Style Sheets (CSS) 是一门指定文档该如何呈现给用户的语言。
文档 是信息的集合，它使用一门 标记语言 作为结构。
CSS 可以用于给文档添加样式 —— 比如改变标题和链接的颜色及大小。它也可用于创建布局 —— 比如将一个单列文本变成包含主要内容区域和存放相关信息的侧边栏区域的布局。它甚至还可以用来做一些特效，比如动画。查看本段内容中所给出的特定案例。
HTML——骨架
CSS——皮囊
JS——复杂动作
CSS究竟是怎么工作的
浏览加载网页的简化版本：
- 浏览器载入HTML文件（比如从网络上获取）。
- 将HTML文件转化成一个DOM（Document Object Model），DOM是文件在计算机内存中的表现形式。
- 浏览器会拉取该HTML相关的大部分资源，比如嵌入到页面的图片、视频和CSS样式。JavaScript则会稍后进行处理…
- 浏览器拉取到CSS之后会进行解析，根据选择器的不同类型（比如element、class、id等等）把他们分到不同的“桶”中。浏览器基于它找到的不同的选择器，将不同的规则（基于选择器的规则，如元素选择器、类选择器、id选择器等）应用在对应的DOM的节点中，并添加节点依赖的样式（这个中间步骤称为渲染树）。
- 上述的规则应用于渲染树之后，渲染树会依照应该出现的结构进行布局。
- 网页展示在屏幕上（这一步被称为着色）。
如果一个浏览器在解析你所书写的CSS规则的过程中遇到了无法理解的属性或者值，它会忽略这些并继续解析下面的CSS声明。
层叠和继承(Cascade and inheritance)
css代表层叠样式表，理解第一个词cascading很重要— cascade 的表现方式是理解CSS的关键。
cascade, 和它密切相关的概念是 specificity，决定在发生冲突的时候应该使用哪条规则。
这里也有继承的概念，也就是在默认情况下，一些css属性继承当前元素的父元素上设置的值，有些则不继承。
哪些属性属于默认继承很大程度上是由常识决定的。
Which properties are inherited by default and which aren’t is largely down to common sense.
对于层叠来说，共有三种主要的样式来源：
- 浏览器对HTML定义的默认样式。
- 用户定义的样式。
- 开发者定义的样式，可以有三种形式：
中文文档语义有出入 参见原文 理解含义即可
1.定义在外部文件（External stylesheet 外链样式/外部样式表）
将CSS编写在扩展名为.css 的单独文件中，并从link 元素引用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My CSS experiment</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Hello World!</h1>
<p>This is my first CSS example</p>
</body>
</html>
h1 {
color: blue;
background-color: yellow;
border: 1px solid black;
}
p {
color: red;
}
2.在页面的头部定义（Internal stylesheet 内联样式/内部样式表）：通过这种形式定义的样式只在本页面内生效。
内部样式表是指不使用外部CSS文件，而是将CSS放在HTML文件标签里的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My CSS experiment</title>
<style>
h1 {
color: blue;
background-color: yellow;
border: 1px solid black;
}
p {
color: red;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This is my first CSS example</p>
</body>
</html>
3.定义在特定的元素身上（Inline styles 行内样式）：这种形式多用于测试，可维护性较差。
内联样式表存在于HTML元素的style属性之中。其特点是每个CSS表只影响一个元素：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My CSS experiment</title>
</head>
<body>
<h1 style="color: blue;background-color: yellow;border: 1px solid black;">Hello World!</h1>
<p style="color:red;">This is my first CSS example</p>
</body>
</html>
对于继承来说，子元素继承父元素。
优先级，从高到低依次为：网页开发者定义的样式、用户定义的样式、浏览器的默认样式。
对继承的元素来说，子元素自身的样式优先级高于从父级继承来的样式。
CSS 另外提供了一个 !important 关键字，用户可以通过使用这个关键字使自己定义的样式覆盖掉开发者定义的样式。
- 控制继承
CSS 为控制继承提供了四个特殊的通用属性值。每个css属性都接收这些值。
inherit
设置该属性会使子元素属性和父元素相同。实际上，就是 “开启继承”.
initial
设置属性值和浏览器默认样式相同。如果浏览器默认样式中未设置且该属性是自然继承的，那么会设置为 inherit 。
unset
将属性重置为自然值，也就是如果属性是自然继承那么就是 inherit，否则和 initial一样
revert
只有很少的浏览器支持
选择器（Selectors）
- 类型选择器([Type]/[Tag name] selector)
指向了所有HTML元素
/* {} 花括号中的部分称为声明 declaration */
p {
color: blue;
}
strong {
color: red;
text-decoration: underline;
}
- 类选择器（Class selector）
通过设置元素的 class 属性，可以为元素指定类名。类名由开发者自己指定。 文档中的多个元素可以拥有同一个类名。
在写样式表时，类选择器是以英文句号（.）开头的。
.test {
color: #ff4800;
}
.key {
color: green;
}
/* 指向特定的元素/标签 */
h1.highlight {
background-color: pink;
}
- ID选择器（ID selector）
通过设置元素的 id 属性为该元素制定ID。ID名由开发者指定。每个ID在文档中必须是唯一的。
在写样式表时，ID选择器是以#开头的。
#test {
color: navy;
}
/* 指向特定的元素/标签 */
h1#heading {
color: rebeccapurple;
}
- 标签属性选择器(Attribute selector)
匹配规则较复杂 详参 Attribute selector
这组选择器根据一个元素上的某个标签的属性的存在以选择元素的不同方式：
a[title] {
color: navy;
}
或者根据一个有特定值的标签属性是否存在来选择：
a[href="https://example.com"]
{
color: navy;
}
如果多于一个规则指定了相同的属性值都应用到一个元素上，CSS规定拥有更高确定度的选择器优先级更高。ID选择器比类选择器更具确定度, 而类选择器比标签选择器（tag selector）更具确定度。
你也可以将多个选择器组合起来构成更确定的选择器。
比如，选择器.key 选中所有class属性为 key的元素. 选择器 p.key 选中所有class属性为key的p元素。
除了class 和 id，你还可以用方括号的形式指定其他属性。比如，选择器 [type=‘button’] 选中所有 type 属性为 button 的元素。
- 伪类选择器与伪元素（Pseudo-classes selectors and pseudo-elements）
有很多伪类和伪元素 参考列表（scroll to bottom）
伪类（pseudo-class）是加在选择器后面的用来指定元素状态的关键字。比如，:hover 会在鼠标悬停在选中元素上时应用相应的样式。
伪类就是开头为冒号的关键字
:pseudo-class-name
.test :hover {
font-size: large;
}
伪元素(pseudo-element)以类似方式表现，不过表现得是像你往标记文本中加入全新的HTML元素一样，而不是向现有的元素上应用类。
伪元素开头为双冒号 ::
::pseudo-element-name
一些早期的伪元素曾使用单冒号的语法，所以你可能会在代码或者示例中看到。现代的浏览器为了保持后向兼容，支持早期的带有单双冒号语法的伪元素。
伪元素，选择一个元素的某个部分而不是元素自己。例如，::first-line是会选择一个元素（下面的情况中是p）中的第一行(第一行的长度视窗口可容纳的大小而定)，即使单词/字符的数目改变，它也只会选中第一行。类似span包在了第一个被格式化的行外面，然后选择这个span。
p::first-line {
font-size: large;
}
伪类和伪元素组合
选择一个article元素里面的第一个p元素的第一行。
伪类和伪元素（pseudo-elements）不仅可以让你为符合某种文档树结构的元素指定样式，插入元素，还可以为符合某些外部条件的元素指定样式：浏览历史(比如是否访问过 (:visited)， 内容状态(如 :checked ), 鼠标位置 (如:hover).
- 基于关系的选择器(Combinators)
在其他选择器之间和其他选择器与文档内容的位置之间建立了一种有用的关系。
They combine other selectors in a way that gives them a useful relationship to each other and the location of content in the document.
常见的基于关系的选择器
| 选择器 | 选择的元素 |
|---|---|
| A E 后代选择器 (Descendant combinator) 用单个空格（ ）字符——组合两个选择器 | 元素A的任一后代元素E (后代节点指A的子节点，子节点的子节点，以此类推) |
| A > E 子代关系选择器(Child combinator) | 元素A的直系后代【direct child】E(不在外层嵌套其他元素) |
| B + E 邻接兄弟(Adjacent sibling combinator) | 元素B的相邻兄弟元素E(同父级元素&&同等级&&相邻) |
| B ~ E 通用兄弟(General sibling combinator) | 元素B后面的拥有共同父元素的兄弟元素E（同父级元素&&同等级） |
你还可以使用星号（*）【全局选择器】来表示”任意元素“。
- 选择器参考表(Reference table of selectors)
| 选择器 | 示例 | 学习教程(From MDN) |
|---|---|---|
| 类型选择器(Type selector) | h1 { } | Type selectors |
| 通配选择器(The universal selector ) | * { } | The universal selector |
| 类选择器(Class selectors) | .box { } | Class selectors |
| ID选择器(ID selectors) | #unique { } | ID selectors |
| 标签属性选择器(Attribute selectors) | a[title] { } | Attribute selectors |
| 伪类选择器(Pseudo-classes) | p:first-child { } | Pseudo-classes |
| 伪元素选择器(Pseudo-elements) | p::first-line { } | Pseudo-elements |
| 后代选择器(Descendant combinator) | article p | Descendant combinator |
| 子代选择器(Child combinator) | article > p | Child combinator |
| 相邻兄弟选择器(Adjacent sibling) | h1 + p | Adjacent sibling |
| 通用兄弟选择器(General sibling) | h1 ~ p | General sibling |
资源顺序(Source order)
如果你有超过一条规则，而且都是相同的权重，那么最后面的规则会应用。可以理解为后面的规则覆盖前面的规则，直到最后一个设置的样式。
h1 {
color: red;
}
/* 此条生效 */
h1 {
color: yellow;
}
样式中的 优先级(Specificity)
Class 选择器的优先级高于继承样式
ID 选择器优先级高于 Class 选择器
内联样式的优先级高于 ID 选择器
!important 的优先级最高
/** !important。用于修改特定属性的值， 能够覆盖普通规则的层叠。 */
.test {
color: yellow !important;
}
本质上，不同类型的选择器有不同的分数值，把这些分数相加就得到特定选择器的权重，然后就可以进行匹配。
一个选择器的优先级可以说是由四个部分相加 (分量)，可以认为是个十百千 — 四位数的四个位数：
- 千位： 如果声明在 style 的属性（内联样式）则该位得一分。这样的声明没有选择器，所以它得分总是1000。
- 百位： 选择器中包含ID选择器则该位得一分。
- 十位： 选择器中包含类选择器、属性选择器或者伪类则该位得一分。
- 个位：选择器中包含元素、伪元素选择器则该位得一分。
在进行计算时不允许进行进位。
通用选择器 (*)，组合符 (+, >, ~, ’ ')，和否定伪类 (:not) 不会影响优先级。
- !important
用于修改特定属性的值， 能够覆盖普通规则的层叠。
覆盖 !important 唯一的办法就是另一个 !important 具有 相同优先级 而且顺序靠后，或者更高优先级。
!important 改变了层叠的常规工作方式 除了非常情况不要使用
注释
CSS注释以/* 开始，以 */结束。
/* style for initial letter C in first paragraph */
.carrot {
color: orange;
text-decoration: underline;
font-style: italic;
}
选择器列表(Selector lists)
当很多元素具有相同的样式时，你就需要定义一个选择器列表，组内用逗号分隔。这样声明的样式就会应用到组内所有的选择器上。
这条规则将 h1, h2, 和 h3 匹配到的元素设置为相同颜色。
/* color for headings */
/* formatted by Prettier - Code formatter( VS Code extension) */
h1,
h2,
h3 {
color: navy;
}
盒模型(CSS box model)
块级盒子（Block box） 和 内联盒子（Inline box）
Block and inline boxes
这两种盒子会在页面流（page flow）和元素之间的关系方面表现出不同的行为:
一个被定义成块级的（block）盒子会表现出以下行为:
- 盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大数情况下意味着盒子会和父容器一样宽
- 每个盒子都会换行
- width 和 height 属性可以发挥作用
- 内边距（padding）, 外边距（margin） 和 边框（border） 会将其他元素从当前盒子周围“推开”
除非特殊指定，诸如标题(h1等)和段落p默认情况下都是块级的盒子。
如果一个盒子对外显示为 inline，那么他的行为如下:
- 盒子不会产生换行。
- width 和 height 属性将不起作用。
- 垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于 inline 状态的盒子推开。
- 水平方向的内边距、外边距以及边框会被应用而且也会把其他处于 inline 状态的盒子推开。
用做链接的 a 元素、 span、 em 以及 strong 都是默认处于 inline 状态的。
我们通过对盒子display 属性的设置，比如 inline 或者 block ，来控制盒子的外部显示类型。
补充: 内部和外部显示类型(Inner and outer display types)
如上所述， css的box模型有一个外部显示类型，来决定盒子是块级还是内联。
同样盒模型还有内部显示类型，它决定了盒子内部元素是如何布局的。默认情况下是按照 正常文档流 布局，也意味着它们和其他块元素以及内联元素一样(如上所述).
但是，我们可以通过使用类似 flex 的 display 属性值来更改内部显示类型。 如果设置 display: flex，在一个元素上，外部显示类型是 block，但是内部显示类型修改为 flex。 该盒子的所有直接子元素都会成为flex元素，会根据 弹性盒子（Flexbox ）规则进行布局
CSS box model
完整的 CSS 盒模型应用于块级盒子，内联盒子只使用盒模型中定义的部分内容。模型定义了盒的每个部分 —— margin, border, padding, and content —— 合在一起就可以创建我们在页面上看到的内容。为了增加一些额外的复杂性，有一个标准的和替代的盒模型。
CSS中组成一个块级盒子需要:
** Content box: 这个区域是用来显示内容，大小可以通过设置 width 和 height.
** Padding box: 这个区域是用来显示内容，大小可以通过设置 width 和 height.
** Border box: 这个区域是用来显示内容，大小可以通过设置 width 和 height.
** Margin box: 这个区域是用来显示内容，大小可以通过设置 width 和 height.
标准盒模型(The standard CSS box model)
在标准模型中，如果你给盒设置 width 和 height，实际设置的是 content box。 padding 和 border 再加上设置的宽高一起决定整个盒子的大小。
.box {
width: 350px;
height: 150px;
margin: 25px;
padding: 25px;
border: 5px solid black;
}
如果使用标准模型
宽度 = 410px (350 + 25 + 25 + 5 + 5)，高度 = 210px (150 + 25 + 25 + 5 + 5)，padding 加 border 再加 content box。
替代盒模型(The alternative CSS box model)
使用这个模型，所有宽度都是可见宽度，所以内容宽度是该宽度减去边框和填充部分。使用上面相同的样式得到 (width = 350px, height = 150px).
默认浏览器会使用标准模型。如果需要使用替代模型，您可以通过为其设置 box-sizing: border-box 来实现。 这样就可以告诉浏览器使用 border-box 来定义区域，从而设定您想要的大小。
.box {
box-sizing: border-box;
}
如果你希望所有元素都使用替代模式，而且确实很常用，设置 box-sizing 在 html 元素上，然后设置所有元素继承该属性。
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
- 外边距(Margin)
外边距是盒子周围一圈看不到的空间。它会把其他元素从盒子旁边推开。 外边距属性值可以为正也可以为负。设置负值会导致和其他内容重叠。无论使用标准模型还是替代模型，外边距总是在计算可见部分后额外添加。
我们可以使用margin属性(border/padding同理)一次控制一个元素的所有边距，或者每边单独使用等价的普通属性控制：
上右下左 逆时针
外边距折叠(Margin collapsing)
如果你有两个外边距相接的元素，这些外边距将合并为一个外边距，即最大的单个外边距的大小。
<div class="container">
<p class="one">I am paragraph one.</p>
<p class="two">I am paragraph two.</p>
</div>
.container {
border-color: royalblue;
border-style: solid;
border-width: 5px;
}
.one {
margin-bottom: 50px;
}
.two {
margin-top: 20px;
}
有许多规则规定了什么时候外边距会折叠，什么时候不会折叠。
折叠规则：
mastering margin collapsing
- 边框(Border)
边框是在边距和填充框之间绘制的。如果正在使用标准的盒模型，边框的大小将添加到框的宽度和高度。如果使用的是替代盒模型，那么边框的大小会使内容框更小，因为它会占用一些可用的宽度和高度。
用 border 属性给元素四周指定统一的边框。在属性值中指定边框的宽度（通常是以显示到屏幕上的像素为单位）， 样式， 还有颜色。
也可以通过设置样式为 none 或 hidden 来明确地移除边框，或者设置边框颜色为 transparent 来让边框不可见，后者不会改变布局。
- 内边距(Padding)
内边距位于边框和内容区域(content)之间。与外边距不同，不能有负数量的内边距，所以值必须是0或正的值。应用于元素的任何背景都将显示在内边距后面，内边距通常用于将内容推离边框。
以上所有的方法都完全适用于块级盒子。部分属性也可以应用于内联盒子，例如由span元素创建的那些内联盒子。
使用display: inline-block
display有一个特殊的值，它在内联和块之间提供了一个中间状态。这对于以下情况非常有用:不希望一个项切换到新行，但希望它可以设定宽度和高度，并避免上面看到的重叠。
一个元素使用 display: inline-block，实现我们需要的块级的部分效果：
–设置width 和height 属性会生效。
–padding, margin, 以及border 会推开其他元素。
但是，它不会跳转到新行，如果显式添加width 和height 属性，它只会变得比其内容更大。
<div class="container">
<p>
I am a paragraph and this is a <span>span</span> inside that paragraph. A
span is an inline element and so does not respect width and height.
</p>
</div>
.container {
border-color: royalblue;
border-style: solid;
border-width: 5px;
}
span {
margin: 20px;
padding: 20px;
width: 80px;
height: 50px;
background-color: lightblue;
border: 2px solid blue;
display: inline-block;
}
- 颜色
内边距总是跟元素的背景色一样，所以当你设置背景色时，你会发现背景色在元素本身和内边距上都生效了。外边距总是透明的。
(调整距离的时候需要特别注意 在设置了特殊背景色的前提下 用margin调整位置会导致多出的部分没有背景色)
背景样式(Background && Border)
处理不同方向的文本(Writing mode)
溢出(Overflow)
CSS尽力减少“数据损失”
CSS tries to avoid “data loss”
只要有可能，CSS就不会隐藏你的内容，隐藏引起的数据损失通常会造成困扰。
Wherever possible, CSS does not hide content. This would cause data loss.
避免多出的内容不可见
overflow的默认值为visible，这就是我们的内容溢出的时候，我们在默认情况下看到它们的原因。
- overflow: hidden
隐藏掉溢出。这可能会很自然地让东西消失掉，所以只应该在判断隐藏内容不会引起问题的时候这样做。
<div class="box">
This box has a height and a width. This means that if there is too much
content to be displayed within the assigned height, there will be an overflow
situation. If overflow is set to hidden then any overflow will not be visible.
</div>
<p>This content is outside of the box.</p>
.box {
border: 1px solid #333333;
width: 200px;
height: 100px;
overflow: hidden;
}
- overflow: scroll （横&&纵）
- overflow-y: scroll （单纵）
- overflow-x: scroll （单横）
浏览器总会显示滚动条，即使没有足够多引起溢出的内容。
<div class="box">
This box has a height and a width. This means that if there is too much
content to be displayed within the assigned height, there will be an overflow
situation. If overflow is set to hidden then any overflow will not be visible.
</div>
<p>This content is outside of the box.</p>
.box {
border: 1px solid #333333;
width: 200px;
height: 100px;
overflow: scroll;
}
- overflow: auto
让滚动条在有比盒子所能装下更多的内容的时候才显示
此时由浏览器决定是否显示滚动条。桌面浏览器一般仅仅会在有足以引起溢出的内容的时候这么做。
值与单位(Values and units)
长度(Length)
- 绝对长度单位(Absolute length units)
| 单位（Unit） | 名称(Name) | 等价换算(Equivalent to) |
|---|---|---|
| cm | 厘米(Centimeters) | 1cm = 96px/2.54 |
| mm | 毫米(Millimeters) | 1mm = 1/10th of 1cm |
| Q | 四分之一毫米(Quarter-millimeters) | 1Q = 1/40th of 1cm |
| in | 英寸(Inches) | 1in = 2.54cm = 96px |
| pc | 十二点活字(Picas) | 1pc = 1/16th of 1in |
| pt | 点(Points) | 1pt = 1/72th of 1in |
| px | 像素(Pixels) | 1px = 1/96th of 1in |
- 相对长度单位(Relative length units)
| 单位(Unit) | 相对于(Relative to) |
|---|---|
| em | 在 font-size 中使用是相对于父元素的字体大小，在其他属性中使用是相对于自身的字体大小，如 width Font size of the parent, in the case of typographical properties like font-size, and font size of the element itself, in the case of other properties like width. |
| ex | 字符“x”的高度 x-height of the element’s font. |
| ch | 数字“0”的宽度 The advance measure (width) of the glyph “0” of the element’s font. |
| rem | 根元素的字体大小 Font size of the root element. |
| lh | 元素的line-height Line height of the element. |
| vw | 视窗宽度的1% 1% of the viewport’s width. |
| vh | 视窗高度的1% 1% of the viewport’s height. |
| vmin | 视窗较小尺寸的1% 1% of the viewport’s smaller dimension. |
| vmax | 视图大尺寸的1% 1% of the viewport’s larger dimension. |
- em&&rem
到底什么是em???[没有全拼]
css em what-does-css-measurement-unit-em-actually-stand-for
https://stackoverflow.com/questions/15827038/what-does-css-measurement-unit-em-actually-stand-for
概括地说，在排版属性中 em 单位的意思是“父元素的字体大小”。带有ems类的ul内的li元素从它们的父元素中获取大小。因此，每一个连续的嵌套级别都会逐渐变大，因为每个嵌套的字体大小都被设置为1.3em—是其父嵌套字体大小的1.3倍。
To recap, the em unit means “my parent element’s font-size” in the case of typography. The li elements inside the ul with a class of ems take their sizing from their parent. So each successive level of nesting gets progressively larger, as each has its font size set to 1.3em — 1.3 times its parent’s font size.
概括地说，rem单位的意思是“根元素的字体大小”。(“根em”的rem标准。)ul内的li元素和一个rems类从根元素(html)中获取它们的大小。这意味着每一个连续的嵌套层都不会不断变大。
To recap, the rem unit means “The root element’s font-size”. (rem stands for “root em”.) The li elements inside the ul with a class of rems take their sizing from the root element (html). This means that each successive level of nesting does not keep getting larger.
<div class="box">
<ul class="ems">
<li>One</li>
<li>Two</li>
<li>
Three
<ul>
<li>Three A</li>
<li>
Three B
<ul>
<li>Three B 2</li>
</ul>
</li>
</ul>
</li>
</ul>
<ul class="rems">
<li>One</li>
<li>Two</li>
<li>
Three
<ul>
<li>Three A</li>
<li>
Three B
<ul>
<li>Three B 2</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
html {
font-size: 16px;
}
.box {
border: 1px solid #333333;
}
.ems li {
font-size: 1.3em;
}
.rems li {
font-size: 1.3rem;
}
百分比(Percentage)
在许多情况下，百分比与长度的处理方法是一样的。百分比的问题在于，它们总是相对于其他值设置的。例如，如果将元素的字体大小设置为百分比，那么它将是元素父元素字体大小的百分比。如果使用百分比作为宽度值，那么它将是父值宽度的百分比。
In a lot of cases, a percentage is treated in the same way as a length. The thing with percentages is that they are always set relative to some other value. For example, if you set an element’s font-size as a percentage it will be a percentage of the font-size of the element’s parent. If you use a percentage for a width value, it will be a percentage of the width of the parent.
数字(Number)
有些值接受数字，不添加任何单位。接受无单位数字的属性的一个例子是不透明度属性（opacity ），它控制元素的不透明度(它的透明程度)。此属性接受0(完全透明)和1(完全不透明)之间的数字。
函数（Function）
calc()函数。这个函数使您能够在CSS中进行简单的计算。
<div class="wrapper">
<div class="box">My width is calculated.</div>
</div>
.wrapper {
width: 400px;
}
.box {
width: calc(20% + 100px);
}
使用calc()使框宽为20% + 100px。20%是根据父容器.wrapper的宽度来计算的，因此如果宽度改变，它也会改变。
布局(Layout)
Flex 布局教程：语法篇
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
CSS Grid 网格布局教程
http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html
CSS 定位详解
http://www.ruanyifeng.com/blog/2019/11/css-position.html
正常布局流(Normal Flow)
正常布局流(normal flow)是指在不对页面进行任何布局控制时，浏览器默认的HTML布局方式。
块级元素按照基于其父元素的书写顺序(默认值: horizontal-tb)的块流动方向(block flow direction)放置 — 每个块级元素会在上一个元素下面另起一行，它们会被设置好的margin 分隔。在英语，或者其他水平书写、自上而下模式里，块级元素是垂直组织的。
内联元素的表现有所不同 — 它们不会另起一行；只要在其父级块级元素的宽度内有足够的空间，它们与其他内联元素、相邻的文本内容（或者被包裹的）被安排在同一行。如果空间不够，溢出的文本或元素将移到新的一行。
- 文档结构
页面标记语言通常都会有公共标签来创建结构。例如, 在 HTML 中你可以使用 div元素来创建结构。（块级元素包裹）
- 文本布局
text-align
内容对齐。 可以使用下面几个值： left, right, center, justify。
text-indent
指定内容缩进。
这两个属性可以应用于任何文本类内容，不只是纯文本。
需要注意的是，它们会被元素的子元素继承， 所以需要在子元素中将它们关闭，以免出现意想不到的效果。
- 浮动
float
强制元素靠左或靠右。 这是控制元素位置和大小的简单方法。
可以使用 clear 属性来避免其它元素受到浮动效果的影响。
ul,
#numbered {
float: left;
}
h3 {
clear: left;
}
- 位置
为一个元素指定 position 属性为以下值之一，来设置其位置。
CSS 定位详解
http://www.ruanyifeng.com/blog/2019/11/css-position.html
relative
通过为元素指定一个值，元素相对于其原来位置移动。也可以使用margin来达到同样的效果。
fixed
为元素指定相对于窗口的确切位置 。即使文档的其它元素出现滚动，元素位置仍然不变
absolute
为元素指定相对于其父元素的确切位置。只有在父元素使用 relative, fixed or absolute 时才有效。你可以为任何父元素指定 position: relative;因为它不会产生移动。
static
默认值。当明确要关闭位置属性时使用。
sticky
sticky跟前面四个属性值都不一样，它会产生动态效果，很像relative和fixed的结合：一些时候是relative定位（定位基点是自身默认位置），另一些时候自动变成fixed定位（定位基点是视口）。
@规则
一个 at-rule 是一个CSS 语句，以at符号开头, ‘@’ (U+0040 COMMERCIAL AT), 后跟一个标识符，并包括直到下一个分号的所有内容, ‘;’ (U+003B SEMICOLON), 或下一个CSS块，以先到者为准。
最常见的 @rules 之一是@media，它允许使用 媒体查询 来应用CSS，仅当某些条件成立(例如，当屏幕分辨率高于某一数量，或屏幕宽度大于某一宽度时)。
body {
background-color: pink;
}
@media (min-width: 30em) {
body {
background-color: blue;
}
}
媒体查询(Media Query)
仅在浏览器和设备的环境与你指定的规则相匹配的时候CSS才会真的被应用。
文本样式
font
- 字体
使用 font-family 属性指定文本的字体。
- 字号
使用font-size 属性指定字体的大小。
你可使用系统内置的值来设置字号，比如small,medium和large。你也可以使用相对父元素字号大小的值来设置，比如：smaller,larger,150%或1.5em。1“em”等于1个字母“m”的宽度（相对于父元素字号大小）;因此1.5em就是1.5倍的父元素字号大小。
如果有必要你也可以指定一个实际的大小，比如14px(14像素)应用于显示设备或14pt(14点)应用于打印设备。但是实际大小不能应用于视力受损用户的设备上，因为这些设备不支持指定实际的值。一个比较容易实现的策略是给顶级的文档元素指定一个系统内置的值如medium，然后再给它的子元素设置个相对值。
- 行高
使用 line-height 属性指定文本的行间距。
(在指定了区域大小的情况下 可以通过此属性调整文字间距以控制字体不超出所在标签的范围)
- 装饰
单独的 text-decoration就可以为文本指定其他风格，比如underline或line-through。你也可以把值设置成none，把这些风格取消掉。
- 其他属性
使用font-style: italic;指定文本为斜体;
使用 font-weight: bold;指定文本加粗;
使用 font-variant: small-caps;指定文本为小型大写字母;
(caps capital letters的缩写)
颜色
color
background-color
CSS2支持17种名字的颜色。
eg: black red yellow
可以使用代表红，绿，蓝三个颜色的16进制数字来表示。16进制数字的范围0-9，a-f。其中a-f代表的数值就是10-15
eg: #000 #fff
要得到浏览器能够呈现的所有的颜色，你就得使用两个16进制来表示（也就是6位）
eg: #000000 #ffffff
还能够通过RGB值（0-255或者是百分比值），来得到颜色
eg:rgb(128, 0, 0)
还可以使用RGBA颜色——它们的工作方式与RGB颜色完全相同 但是有第四个值表示颜色的alpha通道，它控制不透明度。
eg:rgba(255, 255, 0, 0.5)
背景色可以设置 transparent 属性来移除掉所有的颜色，呈现出父元素的背景色
内容
content
- 文本内容
CSS可以在元素的前后插入文本：在选择器的后面加上::before 或者 ::after 。在声明中，指定 content 属性，并设置文本内容。
/* 下面这条规则在所有类名包含 ref的元素前面加上 Reference: */
.ref::before {
font-weight: bold;
color: navy;
content: "Reference: ";
}
- 图片内容
可以通过将content 属性值设置为某个图片的URL，可以将图片插到元素的前面或后面。
/* 下面这条规则在所有类名包含glossary的a标签后面
插入一个空格和一个图标： */
a.glossary::after {
content: " " url("../images/glossary-icon.gif");
}
将图片设置成元素的背景图：将 background 的值设为图片的URL。这是同时设置背景颜色，背景图，图片如何重复等的快捷写法。
/* 这条规则通过指定图片URL设置特定元素的背景
no-repeat表示背景图只出现一次，不重复*/
#sidebar-box {
background: url("../images/sidebar-ground.png") no-repeat;
}
列表
list-style
使用list-style属性来指定列表项标记的样式。
你的CSS中的选择器可以选中列表项 (比如, li)。也可以选中列表项的父节点 (比如, ul)。此时列表项会继承父节点的样式。
- 无序列表
CSS 有三种标记样式：
disc circle square
/* 下面的规则为不同类的列表项指定了不同的标记： */
li.open {list-style: circle;}
li.closed {list-style: disc;}
(“li” → list-item)
<ul>
<li class="open">Lorem ipsum</li>
<li class="closed">Dolor sit</li>
<li class="closed">Amet consectetuer</li>
<li class="open">Magna aliquam</li>
<li class="closed">Autem veleum</li>
</ul>
- 有序列表
在有序列表中，每个列表项都被标记了不同的序号。
用list-style 属性指定标记样式：
decimal lower-roman upper-roman lower-latin upper-latin
/* 指定类名包含info的<ol> 元素的列表项用大写字母标序 */
ol.info {
list-style: upper-latin;
}
539
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
