第1章 CSS概述
1.1 CSS语法
选择器 {
属性:属性值;
}
- 声明：属性:属性值;
1.2 CSS的引入方式
1.2.1 内联样式(Inline style)
<p style=""></p>
1.2.2 内部样式表(Internal style sheet)
<head>
<style>
p {}
</style>
</head>
1.2.3 外部样式表(External style sheet)
HTML
<head>
<link rel="stylesheet" href="style.css">
</head>
CSS
/* style.css */
p {}
1.3 CSS的继承
第2章 CSS选择器
2.1 基本选择器
2.1.1 通配选择器
*{}
/* 选择所有元素 */
* {}
2.1.2 元素选择器
element {}
/* 选择所有 <p> 元素 */
p {}
2.1.3属性选择器
1 [attr] {}
- 表示带有以 attr 命名的属性的元素
/* 选择拥有 title 属性的元素 */
[title] {}
2 [attr=value] {}
- 表示带有以 attr 命名的属性，且属性值为 value 的元素
<a href="https://baidu.com">
/* 选择 href 属性值为 https://baidu.com 的元素 */
[href="https://baidu.com"] {}
3 [attr|=value] {}
- 表示带有以 attr 命名的属性的元素，属性值为 value 或是以 value- 为前缀（"-"为连字符，Unicode 编码为 U+002D）开头。
- 典型的应用场景是用来匹配语言简写代码（如 zh-CN，zh-TW 可以用 zh 作为 value）
<head lang="zh-CN">
</head>
/* 选择 lang 属性值以 zh- 为前缀开头的元素 */
[lang|="zh"] {}
4 [attr^=value] {}
- 表示带有以 attr 命名的属性，且属性值是以 value 开头的元素
<a href="https://baidu.com">
/* 选择 href 属性值以 http 开头的元素 */
[href^="http"] {}
5 [attr$=value] {}
- 表示带有以 attr 命名的属性，且属性值是以 value 结尾的元素
<a href="https://baidu.com">
/* 选择 href 属性值以 .com 结尾的元素 */
[href$=".com"] {}
6 [attr*=value] {}
- 表示带有以 attr 命名的属性，且属性值包含子串 value 的元素
<a href="https://baidu.com">
/* 选择 href 属性值包含 baidu 的元素 */
[href*="baidu"] {}
7 [attr~=value] {}
- 表示带有以 attr 命名的属性的元素，并且该属性是一个以空格作为分隔的值列表，其中至少有一个值为 value
<p class="logo article">
/* 选择 class 属性值中包含以空格分隔的 logo 的元素 */
[class~="logo"] {}
2.1.4 class选择器
.class_value {}
或
[class~=class_value] {}
/* 选择 class 属性值为 class1 的元素 */
.class1 {}
2.1.5 id选择器
#id_value {}
或
[id=id_value] {}
/* 选择 id 属性值为 id1 的元素 */
.id1 {}
2.2 分组选择器
2.2.1 选择器列表（并集选择器）
selector1, selector2 {}
/* 选择所有 A 和 B 元素 */
A, B {}
2.3 关系选择器
2.3.1 后代选择器
selector1 selector2 {}
/* 选择父元素A的后代元素B */
A B {}
2.3.2 子代选择器
selector1 > selector2 {}
/* 选择父元素A的子代元素B */
A > B {}
2.3.3 通用兄弟选择器
selector1 ~ selector2 {}
/* 选择在同一父元素下，元素A之后的兄弟元素B */
A ~ B {}
2.3.4 相邻兄弟选择器
selector1 + selector2 {}
/* 选择在同一父元素下，元素A之后的相邻兄弟元素B */
A + B {}
2.5 伪
2.5.1 伪类
selector:pseudo-class {}
- 伪类根据状态改变元素样式（前二类较为重要）
| 伪类（一） | 说明 |
|---|---|
| :link | 选择用户未访问的元素 |
| :visited | 选择用户已访问的元素 |
| :any-link | 选择用户未访问和已访问的元素 |
| :hover | 选择用户鼠标指针悬停的元素 |
| :active | 选择被用户正在激活的元素（用户按下按键和松开按键之间） |
| 伪类（二） | 说明 |
|---|---|
| :first-child | 选择一组兄弟元素中的第一个元素 |
| :first-of-type | 选择一组兄弟元素中其类型的第一个元素（每个类型的第一个） |
| :last-child | 选择一组兄弟元素中的最后一个元素 |
| :last-of-type | 选择一组兄弟元素中其类型的最后一个元素（每个类型的最后一个） |
| :nth-child() | 根据元素在兄弟组中的位置进行选择 |
| :nth-last-child() | 根据元素在一组兄弟元素中的位置进行选择，从末尾开始计算 |
| :nth-last-of-type() | 根据给定类型的元素在一组兄弟元素中的位置（从末尾开始计数）进行选择 |
| :nth-of-type() | 根据给定类型（标记名）的元素在一组兄弟元素中的位置进行选择 |
| :only-child | 选择没有任何兄弟的元素 |
| :only-of-type | 选择没有相同类型的兄弟元素 |
| 伪类（三） | 说明 |
|---|---|
| :focus | 选择获得焦点的元素（如表单输入）（当用户点击或触摸元素或通过键盘的 “tab” 键选择它时会被触发） |
| :focus-visible | 选择获得焦点的元素，且客户端(UA)的启发式引擎决定焦点应当可见（在这种情况下很多浏览器默认显示“焦点框”。） |
| :focus-within | 选择获得焦点的元素，或获得焦点的该元素的后代元素 |
| :default | 选择一组相关元素中的默认表单元素 |
| :indeterminate | 选择状态不确定的任何表单元素 |
| :in-range | 选择其当前值在由min和max属性指定的范围限制内的< input >元素 |
| :out-of-range | 选择其当前值在由min和max属性指定的范围限制外的< input >元素 |
| :valid | 选择内容验证成功的任何< input >或其他< form >元素 |
| :invalid | 选择内容无法验证的任何< input >或其他< form >元素 |
| :optional | 选择没有设置 required 属性的任何< input>、< select >或< textarea >元素 |
| :read-only | 选择用户不可编辑的元素（如 input 或 textarea ） |
| :read-write | 选择用户可编辑的元素 |
| :required | 选择设置了 required 属性的任何< input >、< select >或< textarea >元素 |
| 伪类（四） | 说明 |
|---|---|
| :first | 选择打印文档的第一页 |
| :left | 选择打印文档的所有左侧页面 |
| :right | 选择打印文档的所有右侧页面 |
| 伪类（五） | 说明 |
|---|---|
| :not() | 选择与选择器列表不匹配的元素 |
| :empty | 选择没有子元素的元素 |
| :defined | 选择任何已定义的元素 |
| :enabled | 选择任何被启用的元素（被激活（如选择、点击或接受文本输入）或获取焦点） |
| :disabled | 选择任何被禁用的元素（不能被激活（如选择、点击或接受文本输入）或获取焦点） |
| :host | 选择包含其内部使用的 CSS 的 shadow DOM 的根元素 |
| :host() | 从其 shadow DOM 中选择一个自定义元素 |
| :lang() | 选择相应语言的元素 |
| :picture-in-picture | 选择当前处于 picture-in-picture 模式的元素 |
| :root | 选择文档的树的根元素（表示< HTML >元素，与选择器HTML相同，只是它的特殊性更高） |
| :scope | 选择选择器要匹配的参考点的元素 |
| :target | 选择一个惟一的元素（目标元素），其id与URL的片段匹配 |
2.5.2 伪元素
selector::pseudo-element {}
- 伪元素用于为一个元素的特定部分应用样式
| 伪元素 | 说明 |
|---|---|
| ::after (:after) | 创建一个伪元素，作为所选元素的最后一个子元素 { content:" "} |
| ::before (:before) | 创建一个伪元素，作为所选元素的第一个子元素 { content:" "} |
| ::first-letter (:first-letter) | 选择块级元素的第一个字母（仅当前面没有其他内容（如图像或内联表）时） |
| ::first-line (:first-line) | 选择块级元素的第一行 |
| ::selection | 选择用户高亮显示的文档部分（例如在文本上单击并拖动鼠标） |
3 CSS样式属性
3.1 字体
3.1.1 font属性
font属性是以下属性的简写：
- font-style
- font-weight
- font-variant
- font-size
- line-height
- font-stretch
- font-family
使用以下命令指定 font 属性：
（1）1 个系统关键字值：caption, icon, menu, message-box, small-caption, status-bar
（2）2~7 个值：
- （必选）：
- < font-size >值
- < font-family >值 （必须最后指定）
- （可选）：
- < font-style >值 （只能在 font-size 之前）
- < font-weight >值 （只能在 font-size 之前）
- < font-variant >值 （只能在 font-size 之前、且只能指定 CSS2.1 中定义的值，即"normal"和"small-caps"）
- < line-height >值 （只能在 font-size 之后，用"/"分隔，如：“16px/3”）
- < font-stretch >值 （只能指定一个关键字值）
3.1.2 font-style属性
设置字体的样式是使用其 font-family 中的普通、斜体还是斜体。
font-style: normal; /* 选择分类为普通的字体。 */
font-style: italic; /* 选择分类为斜体的字体。
如果没有可用的斜体版本，则使用分类为倾斜(oblique)的版本。
如果两者都不可用，则样式是人工模拟的。 */
font-style: oblique; /* 选择分类为倾斜的字体。
如果没有可用的倾斜版本，则使用分类为斜体(italic)的版本。
如果两者都不可用，则样式是人工模拟的。 */
font-style: oblique 10deg; /* 选择分类为倾斜的字体，并另外指定文本倾斜的角度。
/* 1、如果所选字体系列中有一个或多个斜面可用，则选择与指定角度最接近的斜面。
2、如果没有斜切面可用，浏览器将通过将正常面倾斜指定的量来合成字体的斜切面。
3、有效值是-90度到90度（含90度）的度值。正值倾斜到行尾，负值倾斜到行首。
4、如果未指定角度，则使用14度的角度。
一般来说，对于14度或更大的请求角度，首选较大的角度；
否则，首选较小的角度（有关精确算法，请参阅spec的字体匹配部分）。 */
3.1.3 font-weight属性
设置字体的权重（或粗体）。可用的权重取决于当前设置的 font-family。
可以使用 1 个关键字值指定 font-weight 属性：
/* 关键字值 */
font-weight: normal; /* 正常字体。与400相同。 */
font-weight: bold; /* 粗体字体。与700相同。 */
/* 相对于父级的关键字值 */
/* 请注意，使用相对权重时，只考虑四种字体权重：细（100）、普通（400）、粗体（700）和粗（900）。
如果字体族具有更多的可用权重，则出于相对权重计算的目的，将忽略这些权重。 */
font-weight: lighter; /* 相对字体重量轻于父元素。 */
font-weight: bolder; /* 相对字体重量重于父元素。 */
/* 对应的相对权重 */
/* <number>关键字值 */ /* bolder */ /* lighter */
font-weight: 100; 400 100
font-weight: 200; 400 100
font-weight: 300; 400 100
font-weight: 400; /* normal */ 700 100
font-weight: 500; 700 100
font-weight: 600; 900 400
font-weight: 700; /* bold */ 900 400
font-weight: 800; 900 700
font-weight: 900; 900 700
如果给定的确切权重不可用，则使用以下规则确定实际渲染的权重：
- 如果给定的权重小于400，按降序查找小于目标的可用权重。如果未找到匹配项，请按升序查找大于目标的可用权重。
- 介于400和500之间（含400和500）：
- 按升序查找目标和500之间的可用权重。
- 如果找不到匹配项，按降序查找小于目标的可用权重。
- 如果找不到匹配项，按升序查找大于500的可用权重。
- 大于500，请按升序查找大于目标的可用权重。如果找不到匹配项，则按降序查找小于目标的可用权重。
3.1.4 font-variant属性
设置字体的所有字体变体。
font-variant 属性是以下属性的简写：
- font-variant-alternates
- font-variant-caps
- font-variant-east-asian
- font-variant-ligatures
- font-variant-numeric
3.1.5 font-size属性
设置字体的大小。更改字体大小也会更新字体大小相对< length >单位的大小，例如em、ex等。
使用以下方式之一指定 font-size 属性：
- 1 个< absolute-size >或< relative-size >关键字值
- 1 个< length >或< percentage >值（正值）
/* <absolute-size> 值 */ /* 绝对大小关键字，基于用户的默认字体大小（中等）。 */
font-size: xx-small;
font-size: x-small;
font-size: small;
font-size: medium;
font-size: large;
font-size: x-large;
font-size: xx-large;
font-size: xxx-large;
/* <relative-size> 值 */ /* 相对大小关键字。相对于父元素的字体大小，字体将变大或变小，
大致上是由用于分隔上述绝对大小关键字的比率决定的。 */
font-size: smaller;
font-size: larger;
/* <length> 值 */ /* 相对于父元素的字体大小 */
font-size: 12px;
font-size: 0.8em;
/* <percentage> 值 */ /* 相对于父元素的字体大小 */
font-size: 80%;
3.1.6 line-height属性
设置行盒子的高度。它通常用于设置文本行之间的距离。
在块级元素中，它指定元素中行盒子的最小高度。在非替换内联元素中，它指定用于计算行盒子高度的高度。
使用以下方式之一指定 line-height 属性：
- 1 个< number >值
- 1 个< length >值
- 1 个< percentage >值
- 关键字值 normal
/* 关键字值 */
line-height: normal; /* 取决于用户代理。桌面浏览器（包括Firefox）使用的默认值约为1.2，具体取决于元素的字体系列。 */
/* 无单位< number >值：使用此数字乘以元素的字体大小 */
line-height: 3.5; /* 在大多数情况下，这是设置行高和避免由于继承而产生意外结果的首选方法。 */
/* <length> 值 */
line-height: 3em;
/* <percentage> 值 */
line-height: 34%;
3.1.7 font-stretch属性
从字体中选择普通、压缩或扩展的面。
可以使用 1 个关键字或< percentage >值指定 font-stretch 属性（不允许负值）。
/* 关键字值 */ /* percentage */
font-stretch: ultra-condensed; 50%
font-stretch: extra-condensed; 62.5%
font-stretch: condensed; /* 压缩字体 */ 75%
font-stretch: semi-condensed; 87.5%
font-stretch: normal; /* 普通字体 */ 100%
font-stretch: semi-expanded; 112.5%
font-stretch: expanded; /* 扩展字体 */ 125%
font-stretch: extra-expanded; 150%
font-stretch: ultra-expanded; 200%
/* < percentage > 值 */ /* 50%~200%之间 */
font-stretch: 50%;
font-stretch: 100%;
font-stretch: 200%;
3.1.8 font-family属性
指定选定元素的一个或多个字体系列名称和/或通用系列名称的（由高到低）优先级列表。
font family属性列出一个或多个字体系列，用逗号分隔。每个字体系列指定为< family-name >或< generic-name >值。
下面的示例列出了两个字体系列，第一个带有< family-name >，第二个带有< generic-name >：
3.2 文本
3.2.1 text-align属性
设置块元素或表格单元格盒子的水平对齐方式。类似于垂直方向对齐，在水平方向上起作用。
使用以下方式之一指定 text-align 属性：
- 1 个关键字值
- 1 个< string >值（在这种情况下，另一个值默认为 right）
- 1 个关键字值和 1 个< string >值。
/* 关键字值 */
text-align: left;
text-align: right;
text-align: center;
text-align: justify;
text-align: justify-all;
text-align: start;
text-align: end;
text-align: match-parent;
/* 表格列中基于字符的对齐方式 */
text-align: ".";
text-align: "." center;
/* Block alignment values (Non-standard syntax) */
text-align: -moz-center;
text-align: -webkit-center;
3.3 背景
3.3.1 background属性
background 属性是以下属性的简写：
- background-attachment
- background-clip
- background-image
- background-origin
- background-repeat
- background-position
- background-size
- background-color
可以使用一个或用逗号分隔的多个背景层，指定 background 属性。
各层语法如下：
- 每一层可包含以下任何值的零次或一次出现：
- < attachment >
- < bg-image >
- < position >
- < bg-size > （只能在 position 之后，用"/"分隔，如：“center/80%”）
- < repeat-style >
- < box >值可以包括0、1或2次。如果包含一次，则设置 background-origin 和 background-clip。如果包含两次，则第一个引用将设置 background-origin ，第二个引用将设置 background-clip。
- < background-color >值只能包含在指定的最后一层中。
3.3.2 background-attachment属性
设置背景图像在视口中的位置是固定的，还是与其包含块一起滚动的。
background-attachment: scroll; /* 背景相对于元素本身是固定的，不随其内容滚动。
（它有效地附着到元素的边框。） */
background-attachment: fixed; /* 背景相对于视口是固定的。
即使元素有滚动机制，背景也不会随元素移动。
（这与 background-clip: text 不兼容。） */
background-attachment: local; /* 背景相对于元素的内容是固定的。
如果元素具有滚动机制，则背景随元素的内容滚动，
并且背景绘制区域和背景定位区域是相对于元素的可滚动区域，
而不是边框。 */
3.3.3 background-clip属性
设置元素的背景是延伸到其边框盒子、内边距盒子还是内容盒子下。
background-clip: border-box; /* 背景延伸到边框的外边缘（但在z顺序的边界下）。 */
background-clip: padding-box; /* 背景延伸到内边距的外边缘。 */
background-clip: content-box; /* 背景裁剪到内容盒子。 */
background-clip: text; /* 背景裁剪到前景文本。 */
3.3.4 background-image属性
设置元素上的一个或多个背景图像。
使用 1 个关键字 none 或多个< image >值（用逗号分隔）指定background-image属性：
background-image:
linear-gradient(blue, red),
url(test.jpg);
3.3.5 background-origin属性
设置背景的原点：从边框开始、在边框内部或在内边距内部。（请注意，当 background-attachment: fixed 时，background-origin 将被忽略。）
background-origin: border-box; /* 背景相对于边框定位 */
background-origin: padding-box; /* 背景相对于内边距定位 */
background-origin: content-box; /* 背景相对于内容定位 */
3.3.6 background-repeat属性
设置如何重复背景图像。背景图像可以沿水平和垂直轴重复，也可以完全不重复。
/* 单关键字值 */ /* 水平 | 垂直 */
background-repeat: repeat-x; repeat no-repeat
background-repeat: repeat-y; no-repeat repeat
background-repeat: repeat; repeat repeat
background-repeat: space; space space
background-repeat: round; round round
background-repeat: no-repeat; no-repeat no-repeat
/* 双关键字值：水平 | 垂直 */
background-repeat: repeat space;
background-repeat: repeat repeat;
background-repeat: round space;
background-repeat: no-repeat round;
| 关键字 | 说明 |
|---|---|
| repeat | 根据需要重复图像以覆盖整个背景图像绘制区域。如果最后一个图像不合适，它将被剪裁。 |
| space | 尽可能多地重复图像而不剪裁。第一个和最后一个图像固定在元素的任一侧，空白均匀地分布在图像之间。background-position 属性将被忽略，除非在不剪裁的情况下只能显示一个图像。使用 space 唯一情况是没有足够的空间显示一个图像。 |
| round | 当允许的空间增大时，重复的图像将拉伸（不留任何间隙），直到有空间（剩余空间>=图像宽度的一半）添加另一个图像。添加下一个图像时，所有当前图像都会压缩以留出空间。示例：原始宽度为260px的图像，重复三次，可能会拉伸到每次重复宽度为300px，然后再添加另一个图像。然后压缩到225px。 |
| no-repeat | 图像不重复（因此背景图像绘制区域不一定完全覆盖）。非重复背景图像的位置由 background-position 属性定义。 |
3.3.7 background-position属性
设置每个背景图像的初始位置。位置相对于背景原点设置的位置图层。
使用 1 个或多个< position >值，（用逗号分隔）指定 background-position 属性。
/* 关键字值 */
background-position: top;
background-position: bottom;
background-position: left;
background-position: right;
background-position: center;
/* <percentage> 值 */
background-position: 25% 75%;
/* <length> 值 */
background-position: 0 0;
background-position: 1cm 2cm;
background-position: 10ch 8em;
/* 多图像 */
background-position: 0 0, center;
/* 边缘偏移值 */
background-position: bottom 10px right 20px;
background-position: right 3em bottom 10px;
background-position: bottom 10px right;
background-position: top right 10px;
3.3.8 background-size属性
设置元素背景图像的大小。可以将图像保留为其自然大小、拉伸或约束以适合可用空间。
未被背景图像覆盖的空间将使用 background-color 属性填充，并且背景颜色将在具有透明度/半透明性的背景图像后面可见。
使用以下方式之一指定 background-size 属性：
- 1 个关键字值
- 1~2 个< length >、< percentage >或 auto 值（不允许负值）
- 要指定多个背景图像的大小，用逗号分隔每个图像的值。
/* 关键字值 */
background-size: contain; /* 在不剪切、不拉伸图像的情况下，尽可能大地缩放图像。 */
background-size: cover; /* 在不拉伸图像的情况下，尽可能大地缩放图像。
如果图像的比例与元素不同，则会垂直或水平地对其进行裁剪，不留任何空白。 */
/* < length >、< percentage >或 auto 值 */
/* 宽（高度为"auto"） */
background-size: 50%;
background-size: 3.2em;
background-size: 12px;
background-size: auto; /* 在相应方向上缩放背景图像，以保持其固有比例。 */
/* 宽 | 高 */
background-size: 50% auto;
background-size: 3em 25%;
background-size: auto 6px;
background-size: auto auto;
/* 多背景 */
background-size: auto, auto;
background-size: 50%, 25%, 25%;
background-size: 6px, auto, contain;
3.3.9 background-color属性
使用 1 个< color >值指定background-color属性：
/* 关键字值 */
background-color: red;
background-color: indigo;
/* 十六进制值 */
background-color: #bbff00; /* 完全不透明 */
background-color: #bf0; /* 完全不透明简写 */
background-color: #11ffee00; /* 完全透明 */
background-color: #1fe0; /* 完全透明简写 */
background-color: #11ffeeff; /* 完全不透明 */
background-color: #1fef; /* 完全不透明简写 */
/* RGB 值 */
background-color: rgb(255, 255, 128); /* 完全不透明 */
background-color: rgba(117, 190, 218, 0.5); /* 50% 透明 */
/* HSL 值 */
background-color: hsl(50, 33%, 25%); /* 完全不透明 */
background-color: hsla(50, 33%, 25%, 0.75); /* 75% 透明 */
/* 特殊关键字值 */
background-color: currentcolor;
background-color: transparent;
3.4 列表
3.4.1 list-style属性
list-style 属性是以下属性的缩写：
- list-style-image
- list-style-position
- list-style-type
使用 1~3 个值指定 list-style 属性。如果同时设置了 list-style-type 和 list-style-image，则当图像不可用时，使用 list-style-type 作为回退。
/* type */
list-style: square;
/* image */
list-style: url('../img/shape.png');
/* position */
list-style: inside;
/* type | position */
list-style: georgian inside;
/* type | image | position */
list-style: lower-roman url('../img/shape.png') outside;
/* 关键字值 */
list-style: none;
3.4.2 list-style-type属性
设置列表项元素的标记（如光盘、字符或自定义计数器样式）。
使用以下方式之一指定 list-style-type 属性：
- 关键字 none
- 1 个< custom-ident >值
- 1 个 symbols() 值
- 1 个< string >值
请注意：
- 某些类型需要安装合适的字体才能按预期显示。
- cjk-ideographic 与 trad-chinese-informal 完全相同；它的存在是遗留的原因。
/* 关键字值 */
list-style-type: none; /* 不显示项的标记 */
/* 部分类型列表 */
list-style-type: disc; /* 实心圆（默认值） */
list-style-type: circle; /* 空心圆 */
list-style-type: square; /* 实心正方形 */
list-style-type: decimal; /* 十进制数，从1开始 */
/* <string> 值 */
list-style-type: '-'; /* 指定的字符串用作项的标记 */
/* 与 @counter-style 规则匹配的标识符 */
list-style-type: custom-counter-style;
3.4.2 list-style-image属性
设置要用作列表项标记的图像。
使用 1 个关键字或< url >值指定list-style属性：
/* 关键字值 */
list-style-image: none; /* 不使用图像作为标记。
如果设置了此值，则将使用 list-style-type 中定义的标记 */
/* <url> 值 */
list-style-image: url('starsolid.gif'); /* 要用作标记的图像的地址 */
3.4.4 list-style-position属性
设置 ::marker 相对于列表项的位置。
list-style-position: inside; /* ::marker 是列表项内容中的第一个元素 */
list-style-position: outside; /* ::marker 在 主 块盒子外 */
3.5 表格
3.5.1 border-collapse属性
设置< table >中的单元格是共享边框还是单独边框。
折叠单元时，"inset"值的 border-style 的表现类似于沟，而"outset"类似于脊。
分隔单元格时，单元格之间的距离由 border-spacing 特性定义。
border-collapse: collapse; /* 相邻单元格具有共享边框（重叠的边框表呈现模型）。 */
border-collapse: separate; /* 相邻单元格有不同的边框（分隔的边框表呈现模型）。 */
3.5.2 border-spacing属性
设置相邻< table >单元格的边框之间的距离。此属性仅在 border-collapse 是"separate"的情况下适用。
border-spacing 值也沿表格的外边缘使用，其中表格边框与第一列/最后一列的单元格，或行，之间的距离，是表格上相关（左右或上下）border-spacing 和相关（上右下左）内边距的总和。
/* <length> 值 */
border-spacing: 2px;
/* 左右 | 上下 */
border-spacing: 1cm 2em;
3.5.3 caption-side属性
将表格的< caption >的内容放在指定的一侧。这些值与表的 writing-mode 有关。
caption-side: top; /* 标题盒子在表格上方。 */
caption-side: bottom; /* 标题盒子在表格下方。 */
3.5.4 empty-cells属性
设置没有可见内容的< table >单元格周围是否显示边框和背景。
empty-cells: show; /* 显示边框和背景 */
empty-cells: hide; /* 隐藏边框或背景。 */
3.5.5 table-layout属性
设置用于布局< table >单元格、行和列的算法。
/* 默认情况下，大多数浏览器使用自动表格布局算法。表格及其单元格的宽度将根据内容进行调整。 */
table-layout: auto;
/* 表格和列的宽度，由表格和列元素的宽度或第一行单元格的宽度设置。后续行中的单元格不影响列宽。 */
table-layout: fixed;
/*
在"fixed"布局方法下，一旦下载并解析了第一个表格行，就可以呈现整个表。
可以通过"auto"布局方法加快呈现时间，但随后的单元格内容可能不适合提供的列宽。
单元格使用 overflow 属性来确定是否剪切所有溢出的内容，但前提是表格的宽度确定；
否则，它们不会溢出单元格。*/
3.5.6 vertical-align属性
设置内联、内联块或表格单元格框的垂直对齐方式。
可以使用 1 个关键字或< length >或< percentage >值指定 vertical-align 属性：
/* 关键字值 */
vertical-align: baseline; /* 将单元格的基线与行中所有其他 基线对齐的单元格 的基线对齐。 */
vertical-align: sub;
vertical-align: super;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: middle; /* 将单元格的内边距盒子居中放置在行中。 */
vertical-align: top; /* 将单元格的顶部内边距边缘与行的顶部对齐。 */
vertical-align: bottom; /* 将单元格的底部内边距边缘与行的底部对齐。 */
/* <length> 值 */
vertical-align: -10em;
vertical-align: 4px;
/* <percentage> 值 */
vertical-align: 20%;
1018
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
