《CSS权威指南下册》学习笔记

最新推荐文章于 2024-09-28 15:35:33 发布

Leon_Chenl

最新推荐文章于 2024-09-28 15:35:33 发布

阅读量756

点赞数 12

分类专栏： Web前端书籍学习笔记文章标签： css 学习笔记

本文链接：https://blog.csdn.net/Leon_Chenl/article/details/139102589

版权

Web前端书籍学习笔记专栏收录该内容

10 篇文章 0 订阅

订阅专栏

文章目录

第10章浮动及其形状

10.1 浮动

float

取值：left | right | none
初始值：none
适用于：所有元素
继承性：否
动画性：否

10.1.1 浮动的元素

浮动的元素脱离常规的文档流，不过对布局仍有影响。

10.1.2 浮动详解

不管元素是什么类型，浮动后得到的都是块级框(block)。

浮动元素规则：

浮动元素的左右外边界不能超过容纳块的左右内边界。
如果向左浮动一个元素，而左侧已经有浮动的元素，那么后浮动的元素将靠紧前面浮动元素的右外边界。
左浮动元素的右外边界不能再右浮动元素的左边界的右侧。右浮动元素的左外边界不能在左浮动元素的右外边界的左侧。
浮动元素的顶边不能比父元素的内顶边高。
浮动元素的顶边不能比前方任何一个浮动元素或块级元素的顶边高。
浮动元素的顶边不能高于文档源码中出现在浮动元素之前的元素生成的框体所在的行框的顶边。
左浮动元素的左边如果还有一个向左浮动的元素，那么它的右外边界不能在容纳块右边界的右侧。
浮动元素必须放在尽可能高的位置上。
左浮动元素必须尽量向左移动，右浮动元素必须尽量向右移动。

10.1.3 具体行为

浮动元素的后代也浮动。

10.1.4 浮动元素与内容重叠

行内框与浮动元素重叠时，其边框、背景和内容都在浮动元素“之上”渲染。
块级框与浮动元素重叠时，其边框和背景在浮动元素“背后”渲染，而内容在浮动元素“之上”渲染。

10.2 清除浮动

clear

取值：left | right | both | none
初始值：none
适用于：块级元素
继承性：否
动画性：否

10.3 浮动形状

10.3.1 定位形状

shape-outside

取值：none | [ <basic-shape> || <shape-box> ] | <image>
初始值：none
适用于：浮动元素
继承性：否
动画性：<basic-shape>

第11章定位

11.1 基本概念

11.1.1 定位的类型

position

取值：static | relative | sticky | absolute | fixed
初始值：static
适用于：所有元素
继承性：否
动画性：否

static

正常生成元素框。块级元素生成矩形框，位于文档流中；行内元素生成一个或多个行框，随父元素流动。
relative

元素框偏移一定的距离。元素的形状与未定位时一样，而且元素所占的空间也与正常情况下相同。
absolute

元素框完全从文档流移除，相对容纳块定位。定位后生成的都是块级框。
fixed

元素框的行为类似于absolute，不过容纳块是视区自身。
sticky

元素一开始留在常规的文档流中，达到触发粘滞的条件时，从常规的文档流中移除。不过在常规文档流中占据的空间得以保留。

11.1.2 容纳块

11.2 偏移属性

top left right bottom

取值：<length> | <percentage> | auto
初始值：auto
适用于：定位元素
继承性：否
动画性：<length> | <percentage>

11.3 宽度和高度

11.3.1 设定宽度和高度

定位元素不强制要求设置宽高度。

可以通过偏移属性自动设置width和height。

11.3.2 限制宽度和高度

min-width, min-height

取值：<length> | <percentage>
初始值：0
适用于：除非置换行内元素和表格元素之外的所有元素
继承性：否
动画性：是

max-width, max-height

取值：<length> | <percentage> | none
初始值：none
适用于：除非置换行内元素和表格元素之外的所有元素
继承性：否
动画性：<length> | <percentage>

11.4 内容溢出和裁剪

11.4.1 溢出

overflow

取值：visible | hidden | scroll | auto
初始值：visible
适用于：块级元素和置换元素
继承性：否
动画性：否

11.5 元素的可见性

visibility

取值：visible | hidden | collapse
初始值：visible
适用于：所有元素
继承性：是
动画性：否

11.6 绝对定位

11.6.1 绝对定位元素的容纳块

11.6.2 绝对定位元素的位置和尺寸

11.6.3 自动确定边界的位置

11.6.4 非置换元素的位置和尺寸

11.6.5 置换元素的位置和尺寸

11.6.6 Z轴上的位置

z-index

取值：<integer> | auto
初始值：auto（相当于0）
适用于：定位元素
继承性：否
动画性：是

备注：子元素不能拿在父元素背后绘制。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

11.7 固定定位

11.8 相对定位

在相对定位中，元素从常规的位置移开，但其占据的空间并没有消失。

11.9 粘滞定位

postions: sticky

第12章弹性盒布局

12.1 弹性盒基础

12.2 弹性容器

12.2.1 flex-direction属性

定义容器的主轴方向
flex-direction

取值：row | row-reverse | column | column-reverse
初始值：row
适用于：弹性容器
继承性：否
动画性：否

12.2.2 其他书写方向

弹性布局的主轴会随着书写模式的改变而改变，所以在不同语言的情况下建议修改书写模式。

12.2.3 换行

flex-wrap

取值：nowrap | wrap | wrap-reverse(在上面换行)
初始值：nowrap
适用于：弹性容器
继承性：否
动画性：否

12.2.4 定义弹性流

flex-flow

取值：<flex-direction> || <flex-wrap>
初始值：row nowrap
适用于：弹性容器
继承性：否
动画性：否

12.5 调整内容

控制一行里的弹性元素在主轴上如何分布
justify-content

取值：flex-start | flex-end | center | space-between | space-around | space-evenly
初始值：flex-start
适用于：弹性容器
继承性：否
动画性：否

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

12.6 对齐元素

align-items

取值：normal | flex-start | flex-end | center | baseline | stretch
初始值：noraml
适用于：弹性容器
继承性：否
动画性：否

normal
这个关键字的效果取决于我们处在什么布局模式中：
在绝对定位的布局中，对于被替代的绝对定位盒子，这个效果和start?的效果的一样；对于其他所有绝对定位的盒子，这个效果和stretch的效果一样。
在绝对定位布局的静态位置上，效果和stretch一样。
对于那些弹性项目而言，效果和stretch一样。
对于那些网格项目而言，效果和stretch一样，除了有部分比例或者一个固定大小的盒子的效果像start。
这个属性不适用于会计盒子和表格。

12.6.1 起边、终边和居中对齐

12.6.2 基线对齐

12.7 align-self属性

align-self

取值：auto | flex-start | flex-end | center | baseline | stretch
初始值：auto
适用于：弹性元素
继承性：否
动画性：否

12.8 对齐内容

align-content

取值：flex-start | flex-end | center | space-between | space-around | space-evenly | stretch
初始值：stretch
适用于：分为多行显示的弹性容器
继承性：否
动画性：否

align-content属性各可用值下弹性元素行的溢出方向

12.9 弹性元素

12.9.1 弹性元素是什么

弹性容器的子代。

12.9.2 弹性元素的特性

弹性元素的margin不折叠；float和clear属性对弹性元素不起作用。

绝对定位

如果absolut弹性容器的子元素，与绝对定位普通元素一样，将从文档流中移除。

绝对定位的弹性容器的子元素既受弹性容器的justify-content值影响，也受自身align-self的影响。

12.9.3 最小宽度

如果弹性元素溢出，给弹性元素设置min-width: 0;可以防止溢出，但是自身宽度将变小。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

12.10 适用于弹性元素的属性

12.11 flex属性（强烈建议使用）

flex

取值：[ <flex-grow> <flex-shrink>? || <flex-basis> ] | none
初始值：0 1 auto
适用于：弹性元素
继承性：否
动画性：参见各单独属性

12.12 flex-grow属性

定义有多余的空间时是否允许弹性元素增大，以及允许增大且有多余的空间时，相对其他同辈弹性元素以什么比例增大。

flex-grow

取值：<number>
初始值：0
继承性：否
动画性：是

12.12.1 在flex属性中设定增长因子

如果弹性元素的默认width为100px，但是如果把弹性基准设置为0%，那么width将被覆盖掉。

12.13 flex-shrink属性

flex-shrink

取值：<number>
初始值：1
适用于：弹性元素
继承性：否
动画性：是

12.13.1 根据宽度和缩减因子按比例缩小

缩小比例 = 缺少的空间 / ((宽度1*缩减因子1)+…+(宽度N*缩减因子N))

12.13.3 响应式弹性布局

main {
    display: flex;
    box-sizing: border-box;
    border-bottom: 0.5rem solid;
  } 
  nav {
    order: -1;
    flex: 0 1 200px;
    min-width: 150px;
  } 
  article {
    flex: 1 2 600px;
  } 
  aside {
    flex: 0 1 200px;
    min-width: 150px;
  }

12.14 flex-basis属性

flex-basis

取值：content | [<length> | <percentage>]
初始值：auto
适用于：弹性元素
百分数：相对于主轴尺寸弹性容器计算
继承性：否
动画性：<width>

12.14.2 自动确定弹性基准

设为auto，如果width或height的值长度，弹性基准就等于那个长度；而如果width和height也是auto，那么弹性基准回落为content。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

12.14.3 默认值

flex-basis: auto;取决于内容的宽度。

12.14.4 长度单位

如果同时设置了flex-basis和width，弹性基准的优先级比width高。

min-width、max-width、min-height和max-height属性不会被忽略。

12.14.5 零基准

基准为0时，弹性容器的全部空间用于分配。

12.15 flex简写属性

常见的弹性值

flex: initial相当于flex: 0 1 auto根据width或height属性确定弹性元素的尺寸，而且允许缩小。
flex: auto相当于flex: 1 1 auto根据width或height属性确定弹性元素的尺寸，但是元素是完全弹性的，可以缩小也可以增大。
flex: none相当于flex: 0 0 auto根据width或height属性确定弹性元素的尺寸，元素没有弹性，不能缩小或增大。
flex: <number>相当于flex: <number> 0 0把弹性元素的增长因子设为<number>指定的数，同时把shrink设为0，把basis也设为0。这意味着，width或height的值相当于最小尺寸，弹性元素在有多余的空间时将增大。

默认情况下，弹性元素缩小的程度不会比内容里最长的单词或固定尺寸的元素小。

12.16 order属性

对弹性元素排序
order

取值：<integer>
初始值：0
适用于：弹性元素以及弹性容器中绝对定位的子元素
继承性：否
动画性：是

第13章栅格布局

13.1 创建栅格容器

栅格框与块级容器的区别：

浮动的元素不会打乱栅格布局。
栅格容器的外边距不与其后代的外边距折叠。

不能用在栅格容器和栅格元素的css属性

所有column属性都被忽略。
::first-line和::first-letter被忽略。
float和clear属性被忽略。
vertilcal-align对栅格元素不起作用。

13.2 基本的栅格术语

栅格轨道（grid track）
栅格单元（grid cell）
栅格区域（grid area）

13.3 放置栅格线

grid-template-rows, grid-template-columns

取值：none | <track-list> | <auto-track-list>
初始值：none
适用于：栅格容器
百分数：grid-template-rows的百分数相对栅格容器的块级轴计算，grid-template-columns相对行内轴计算
继承性：否
动画性：否

13.3.1 宽度固定的栅格轨道

#gird {
  display: grid;
  grid-template-columns: 200px 50% 100px;
}

#grid {
		display: grid;
    grid-template-columns: [start col-a] 200px [col-b] 50% [col-c] 100px [stop end last];
}

#grid {
  	grid-template-columns: [start col-a] 200px [col-b] 50% [col-c] 100px [stop end last];
    grid-template-rows: [start masthead] 3em [content] 80% [footer] 2em [stop end];
}

13.3.2 弹性栅格轨道fr

#grid {
 grid-template-columns: 1fr 1fr 1fr 1fr;
 grid-template-rows: 1fr;
}

每个列的宽度和轨道中最宽的宽度相等。

#gallery {
 display: grid;
 grid-template-columns: max-content max-content max-content max-content;
 grid-template-rows: max-content max-content max-content;
}

13.3.3 根据轨道中的内容适配fit-content

#thefollowing {
display: grid;
grid-template-columns: repeat(3, fit-content(50ch));
}

13.3.4 重复栅格线auto-fill/auto-fit

.grid {
 display: grid;
 width: auto;
 height: 15em;
 grid-template-columns: repeat(3, 2.5em 1fr 1fr);
 grid-template-rows: 1fr;
}

.grid {
 grid-template-rows: repeat(auto-fill, [top] 5em [bottom]);
 border: 1px solid;
 margin-right: 3em;
 grid-row: 2;
}

对于auto-fit，没有栅格元素的轨道将被剔除。

13.3.5 栅格区域grid-template-areas

grid-template-areas

取值：none | <string>
初始值：none
适用于：栅格容器
继承性：否
动画性：否

.grid {
 display: grid;
 grid-template-areas: "h h h h"
	"l c c r"
	"l f f f";
 grid-template-rows: repeat(3,3em);
}

不标注其它的单元

.grid {
 display: grid;
 grid-template-areas: 
 "header  header  header  header"
		"left    ...     ...     right"
		"footer  footer  footer  footer";
 grid-template-rows: repeat(3,3em);
}

定义每个栅格轨道尺寸

.grid {
 display: grid;
 grid-template-areas: "header  header  header  header"
		"left    ...     ...     right"
		"footer  footer  footer  footer";
 grid-template-columns: 1fr 20em 20em 1fr;
 grid-template-rows: 40px 10em 3em;
}

13.4 在栅格中附加元素

13.4.1 使用列线和行线

grid-row-start,grid-row-end,grid-column-start,grid-column-end

取值：auto | <custom-ident> | <integer> && <custom-ident>? ] | [ span && [<integer> || <custom-ident> ]]?
初始值：auto
适用于：栅格元素和绝对定位的元素（前提是容纳块为栅格容器）
继承性：否
动画性：否

.grid {
 display: grid;
 width: 50em;
 height: 25em;
 grid-template-row: repeat(5, 5em);
 grid-template-columns: repeat(10, 5em);
}
.box01 {
 grid-row-start: 2;
 grid-row-end: 4;
 grid-column-start: 2;
 grid-column-end: 4;
}
.box02 {
 grid-row-start: 1;
 grid-row-end: span 2;
 grid-column-start: 5;
 grid-column-end: span 5;
}
.box03 {
 grid-row-start: 4;
 grid-column-start: 6;
}

#grid {
 display: grid;
 grid-template-rows: repeat(5, [R] 4em);
 grid-template-columns: 2em repeat(5, [col-A] 5em [col-B] 5em) 2em;
}
.one {
 grid-row-start: R 2;
 grid-row-end: 5;
 grid-column-start: col-B;
 grid-column-end: span 2;
}
.two {
 grid-row-start: R;
 grid-row-end: span R 2;
 grid-column-start: col-A 3;
 grid-column-end: span 2 col-A;
}
.three {
 grid-row-start: 4;
 grid-column-start: col-A -2;
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

#grid {
 display: grid;
 grid-template-areas: 
 "header   header  header  header"
		"leftside content content rightside"
		"leftside footer  footer  footer";
}
#masthead {
 grid-row: header;
 grid-column: header / header;
}
#sidebar {
 grid-row: 2 / 4;
 grid-column: leftside / span 1;
}
#main {
 grid-row: content / content;
 grid-column: content;
}
#navbar {
 grid-row: rightside / 3;
 grid-column: rightside;
}
#footer {
 grid-row: 3 / span 1;
 grid-column: footer / footer;
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

13.4.2 行和列的简写属性

grid-row,grid-column

取值：<grid-line> [/ <grid-line>]?
初始值：auto
适用于：栅格元素和绝对定位的元素（前提是容纳块为栅格容器）
继承性：否
动画性：否

如果值提供一个名称，那么第二个值也是名称，如果只提供一个数字，那么第二个值被设为auto。

grid-row: 2;
grid-row: 2 / auto;

grid-column: header;
grid-column: header / header;

#grid {
 display: grid;
 grid: "header header"
		"sidebar content" 5em
		"footer footer" / 25% 75%;
}
#header {
 grid-row: header;
 grid-column: header;
}
#footer {
 grid-row: footer;
 grid-column: footer-start / footer-end;
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

Tip:最好不要使用相同的名称命名栅格区域和栅格线。

13.4.3 隐式栅格

如果栅格元素超出了显式定义的栅格，浏览器会再创建栅格线，这些称为隐式栅格。

#grid {display: grid;
grid-template-rows: 2em 2em; grid-template-columns: repeat(6, 4em);
}
	.box01 {grid-column: 1; grid-row: 1 / 4;}
	.box02 {grid-column: 2; grid-row: 3 / span 2;}
	.box03 {grid-column: 3; grid-row: span 2 / 3;}
	.box04 {grid-column: 4; grid-row: span 4 / 5;}
	.box05 {grid-column: 5; grid-row: span 6 / 5;}
	.box06 {grid-column: 6; grid-row: -1 / span 3;}
	.box07 {grid-column: 7; grid-row: span 3 / -1;}

13.4.5 使用区域

grid-area

取值：<grid-line>[/<grid-line> ]{0, 3}
适用于：栅格元素和绝对定位的元素（前提是容纳块为栅格容器）
继承性：否
动画性：否

备注：一个值的时候，如果是栅格线的名称，四个值都是那个名称；如果是数字，余下的都设为auto。四个值的时候，分别是row-start column-start row-end column-end。

#grid {width: 54em; grid-template-rows: repeat(3,7em);}
#grid {
display: grid;
grid-template-areas:
 "header   header  header  header"
 "leftside content content rightside"
 "leftside footer  footer  footer";
}
#masthead {grid-area: header;}
#sidebar {grid-area: leftside;}
#main {grid-area: content;}
#navbar {grid-area: rightside;}
#footer {grid-area: footer;}

13.4.6 栅格元素重叠

栅格元素会重叠。

13.5 栅格流

grid-row-flow

取值：[ row | column ] || dense
初始值：row
适用于：栅格容器
继承性：否
动画性：否

#grid {grid-template-columns: repeat(3,15em); grid-template-rows: repeat(2,4em);}
	#grid {display: grid; width: 45em; height: 8em;
		grid-auto-flow: column;}
	#grid li {grid-row: auto; grid-column: auto;}

让元素尽量靠紧

.grid {display: inline-grid;
	grid-template-columns: repeat(4, 80px);
	grid-template-rows: repeat(4, 80px);
	grid-auto-columns: 80px;
	grid-auto-rows: 80px;
	vertical-align: top;
	margin-right: 5em;
}
#g1 {grid-auto-flow: row dense;}
#g2 {grid-auto-flow: dense column;}

13.6 自动增加栅格线

grid-auto-rows, grid-auto-columns

取值：<track-breadth> | minmax( <track-breadth>,<track-breadth> )
初始值：atuo
适用于：栅格容器
备注：<brack-breadth>代表<length>|<percentage>|<flex>|min-content|max-content|auto
继承性：否
动画性：否

.grid {display: inline-grid; vertical-align: top; margin-right: 3em;
		grid-template-rows: 120px 120px; grid-template-columns: 120px 120px;}
	#g1 {grid-auto-rows: 120px;}

13.7 grid简写属性

grid

取值：none | subgrid | [ <grid-template-rows> / <grid-template-columns> ] | [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <track-list> ]? | [ <grid-auto-flow> [ <grid-auto-rows>[ / <grid-auto-columns>]?]?]]
适用于：栅格容器
继承性：否
动画性：否

13.8 释放栅格空间

13.8.1 栏距

row-gap, column-gap

取值：<length> | <precentage>
初始值：0
适用于：栅格容器
继承性：否
动画性：是

.grid {display: grid;
		grid-template-rows: 5em 5em; grid-template-columns: 15% 1fr 1fr;
		grid-column-gap: 1em;}

简写

grid-gap

取值：<grid-row-gap> <grid-column-gap>

13.8.2 栅格元素与盒模型

.grid {display: grid;
		grid-template-rows: repeat(2, 100px); grid-template-columns: repeat(2, 200px);}
	.box02 {margin: 25px;}
	.box03 {margin: -25px 0;}

栅格布局也可以实现垂直居中，通过设置有宽高的栅格元素margin: auto就可以了。

#grid {display: grid; width: 700px; height: 400px;
		grid-template-rows: repeat(3, 100px); grid-template-columns: repeat(5, 100px);}
	.exel {grid-row: 2 / 5; grid-column: 2 / 7; position: relative;}
	.exel i {
		position: absolute;
		top: 1em; bottom: 15%;
		left: 35px; right: 1rem;}

13.9 栅格的对齐方式

属性	适用于
justify-self	栅格元素
justify-items	栅格容器
justify-content	栅格容器
align-self	栅格元素
align-items	栅格容器
align-content	栅格容器

13.9.1 纵向对齐和横向对齐单个元素

13.9.2 纵向对齐和横向对齐全部元素

.grid {display: grid; width: 453px; height: auto;
	grid-template-rows: repeat(2, 125px); grid-template-columns: repeat(3, 151px); position: relative;}
#grid {align-items: center; justify-items: center;}

#g1 {justify-content: space-between;}
#g2 {justify-content: space-around;}
#g3 {justify-content: space-evenly;}

13.10 分层和排序

分层默认根据文档源码中的顺序，靠后的元素显示在前面。

可以通过使用z-index设定分层顺序。通过order设置排序。

第14章 CSS中的表格布局

14.1 表格格式化

14.1.1 表格的视觉排布

一个行框包含一个由栅格单元构成的行。
一个行组框包含的栅格单元就是行组中各行框包含的栅格单元。
一个列框包含一个或多个由栅格单元构成的列。
一个列组框包含的栅格单元就是列组中各行框包含的栅格单元。
单元格的矩形框不能与其他单元格的矩形框重叠。

14.1.2 设定显示方式的值

display的值：table、inline-table、table-row、table-row-group、table-header-group、table-footer-group、table-column、table-column-group、table-cell、table-caption。

table {display: table;}
tr {display: table-row;}
thead {display: table-header-group;}
tbody {display: table-row-group;}
tfoot {display: table-footer-group;}
col {display: table-column;}
colgroup {display: table-column-group;}
td, th {display: table-cell;}
caption {display: table-caption;}

14.1.3 匿名表格对象

CSS会以匿名对象的形式自动插入“缺少的”表格组件。

14.1.4 表格中的层

默认情况下所有元素的背景都是透明的

14.1.5 表题

caption-side

取值：top | bottom
初始值：top
适用于：display属性的值为table-caption的元素
继承性：是
动画性：否

14.2 单元格的边框

设置边框模型
border-collapse

取值：collapse(折叠边框模式) | separate(分离边框模式) | inherit
初始值：separate
适用于：display属性的值为table或table-inline的元素
继承性：是
备注：在分离边框模式中，不能为行、行组、列和列组设定边框。

14.2.1 分离单元格的边框

<table cellspacing="0">
  <tr>
    <td>cell one</td>
    <td>cell two</td>
  </tr>
  <tr>
    <td>cell three</td>
    <td>cell four</td>
  </tr>
</table>

table {border-collapse: separate;}
td {border: 3px double black; padding: 3px;}
tr:nth-child(2) td:nth-child(2) {border-color: gray;}

边框间距

border-spacing

取值：<length> <length>?
初始值：0
适用于：display属性的值为table或table-inline的元素
继承性：是
动画性：是
备注：如果border-collapse属性的值不是separate，忽略这个属性

处理空单元格

empty-cells

取值：show | hide
初始值：show
适用于：display属性的值为table-cell的元素
继承性：是
动画性：否
备注：如果border-collapse属性的值不是separate，忽略这个属性

14.2.2 折叠单元格的边框

折叠边框与分离边框之间的区别有以下几点：

display属性值为table或inline-table的元素不能有padding，可以有margin。
边框可以应用于单元格、行、行组、列和列组。
在折叠边框模型中，单元格的边框之间肯定没有间隔。
折叠的边框居中放在单元格之间假想的栅格线上。

<table>
<tr>
<td id="r1c1">1-1</td><td id="r1c2">1-2</td>
<td id="r1c3">1-3</td><td id="r1c4">1-4</td>
</tr>
<tr>
<td id="r2c1">2-1</td><td id="r2c2">2-2</td>
<td id="r2c3">2-3</td><td id="r2c4">2-4</td>
</tr>
<tr>
<td id="r3c1">3-1</td><td id="r3c2">3-2</td>
<td id="r3c3">3-3</td><td id="r3c4">3-4</td>
</tr>
<tr>
<td id="r4c1">4-1</td><td id="r4c2">4-2</td>
<td id="r4c3">4-3</td><td id="r4c4">4-4</td>
</tr>
</table>

table {border-collapse: collapse;
  border: 3px outset gray;}
td {border: 1px solid gray; padding: 0.5em;}
#r2c1, #r2c2 {border-style: hidden;}
#r1c1, #r1c4 {border-width: 5px;}
#r2c4 {border-style: double; border-width: 3px;}
#r3c4 {border-style: dotted; border-width: 2px;} 
#r4c1 {border-bottom-style: hidden;}
#r4c3 {border-top: 13px solid silver;}

14.3 表格的尺寸

14.3.1 宽度

table-layout

取值：auto | fixed
初始值：auto
适用于：display属性的值为table或table-inline的元素
继承性：是
动画性：否

<table>
<colgroup>
<col id="c1"><col id="c2"><col id="c3"><col id="c4">
</colgroup>
<tr>
<td id="r1c1">1-1</td><td id="r1c2">1-2</td>
<td id="r1c3">1-3</td><td id="r1c4">1-4</td>
</tr>
<tr>
<td id="r2c1">2-1</td><td id="r2c2">2-2</td>
<td id="r2c3">2-3</td><td id="r2c4">2-4</td>
</tr>
<tr>
<td id="r3c1">3-1</td><td id="r3c2">3-2</td>
<td id="r3c3">3-3</td><td id="r3c4">3-4</td>
</tr>
<tr>
<td id="r4c1">4-1</td><td id="r4c2">4-2</td>
<td id="r4c3">4-3</td><td id="r4c4">4-4</td>
</tr>
</table>

table {table-layout: fixed; width: 400px;
  border-collapse: collapse;}
td {border: 1px solid;}
col#c1 {width: 200px;}
#r1c2 {width: 75px;}
#r2c3 {width: 500px;}

14.3.2 高度

表格的高度很大程度上由用户代理确定。最好不为表格设定高度。

14.3.3 对齐方式

使用text-align对齐横向，vertical-align对齐纵向。

第15章列表和生成的内容

15.1 列表

15.1.1 列表的类型

改变列表项目所用的记号类型
list-style-type

取值：disc | circle | square | disclosure-open | ...
初始值：disc
适用于：display属性的值为list-item的元素
继承性：是

.list01 {list-style-type: "%";}
.list02 {list-style-type: "Hi! ";}
.list03 {list-style-type: "†";}
.list04 {list-style-type: "⌘";}
.list05 {list-style-type: "🤔";}

15.1.2 列表项目图像

list-style-image

取值：<uri> | <image> | none | inherit
初始值：none
适用于：display属性的值为list-item的元素
继承性：是

.list01 {list-style-image: radial-gradient(closest-side, orange, orange 60%, blue 60%, blue 95%, transparent);}
.list02 {list-style-image: linear-gradient(45deg, red, red 50%, orange 50%, orange);}
.list03 {list-style-image: repeating-linear-gradient(-45deg, red, red 1px, yellow 1px, yellow 3px);}
.list04 {list-style-image: radial-gradient(farthest-side at bottom right,
	lightblue, lightblue 50%, violet, indigo, blue, green, yellow, orange, red, lightblue);}

CSS提供了直接装饰列表记号的方式，:;marker伪元素。

15.1.3 列表记号的位置

list-style-position

取值：inside | outside | inherit
初始值：outside
适用于：display属性的值为list-item的元素
继承性：是

15.1.4 列表样式的简写属性

list-style

取值：[ <list-style-type> || <list-style-image> || <list-style-position> ] | inherit
适用于：display属性的值为list-item的元素
继承性：是

15.1.5 列表的布局

15.2 生成的内容

15.2.1 插入生成的内容

使用::before和::after伪元素插入文档，使用content属性。

除了列表记号，无法把生成的内容放在元素框的外部。

如果::before和::after的目标的块级元素，那么display只能是none、inline、block或marker。其他值都当做block。
如果::before和::after的目标是行内元素，那么display的值只能是none或inline。其他值都当做inline。

15.2.2 指定内容

content

取值：normal | [ <string> | <uri> | <counter> | attr(<identifier>) | open-quote | close-quote | no-open-quote | no-close-quote]+ | inherit
初始值：normal
适用于：::before和::after伪元素
继承性：否

生成引号

quotes

取值：[<string> <string>]+ | none | inherit
初始值：各用户代理不同
适用于：所有元素
继承性：是

15.2.3 计数器

重置和增量

counter-reset

取值：[<identifire> <integer>?]+ | none | inherit
适用于：所有元素
继承性：否

counter-increment

取值：[<identifier> <integer>?]+ | none | inherit
适用于：所有元素
继承性：否

h1 {counter-reset: section subsec;
  counter-increment: chapter;}
h1::before {content: counter(chapter) ". ";}
h2 {counter-reset: subsec;
  counter-increment: section;}
h2::before {content: counter(chapter )"." counter(section) ". ";}
h3 {counter-increment: subsec;}
h3::before {content: counter(chapter) "." counter(section) "." counter(subsec) ". ";}

15.3 定义计数模式

@counter-style <name> {
  /*...declarations...*/
}

@counter-style中可用的描述符

system 定义要使用的计数器模式系统。可以用的值由fixed、cyclic、alphabetic、numeric、symbolic、additive和extends。

symbols 定义要在计数器模式中使用的符号。

additive-symbols 定义在additive计数器模式中使用的符号

prefix 定义放在模式中各计数器之前的字符串或符号

suffix 定义放在模式中各计数器之后的字符串或符号

negative 放在负值两侧

range 定义应用计数器模式的范围值。

fallback 定义无法使用主计数器模式表示或者值在range定义的范围之外时使用的计数器模式。

pad 定义模式中所有计数器至少有几个字符，缺少的位使用指定的一个或一系列符号填充

speak-as 定义计数器在文字转语音系统中的发音策略

15.3.1 固定计数模式

@counter-style emoji {
    system: fixed;
    symbols: 😁 😉 😂 🤔 🙃;
}

ul.emoji {list-style: emoji;}

15.3.2 循环计数模式

@counter-style emojiverse {
    system: cyclic;
    symbols: 😁 😉 😂 🤔 🙃;
}

15.3.3 符号计数模式

@counter-style footnotes {
    system: symbolic;
    symbols: "*" "†" "§";
    suffix: ' ';
}
@counter-style letters {
    system: symbolic;
    symbols: A B C D E;
}

@counter-style letters {
    system: symbolic;
    symbols: A B C D E;
    range: 1 15;
}

15.3.4 字母计数模式

@counter-style letters {
    system: alphabetic;
    symbols: A B C D E;
}

15.3.5 数字计数模式

@counter-style decimal {
    system: numeric;
    symbols: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9';
}
@counter-style hexadecimal {
    system: numeric;
    symbols: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9' 'A' 'B' 'C' 'D' 'E' 'F';
}
@counter-style binary {
    system: numeric;
    symbols: '0' '1';
}

15.3.6 累加计数模式

system:additive

15.3.7 扩展计数模式

system: extends hexadecimal;

第16章变形

16.1 坐标系

球坐标系：

16.2 变形

transform

取值：<transform-list> | none
初始值：none
适用于：除“基元行内”框之外的所有元素（指span、超链接等行内框）
百分数：相对范围框计算
继承性：否
动画性：作为有种变形

备注：变形函数一次只处理一个，从第一个开始，一直到最后一个。从头到尾的处理顺序很重要；只能出现一个transform，否则会覆盖。

变形函数

translate() scale() rotate() skew() matrix()
translate3d() scale3d() rotate3d() skewX() matrix3d()
translateX() scaleX() rotateX() skewY() perspective()
translateY() scaleY() rotateY()
translateZ() scaleZ() rotateZ()

备注：任何有关z轴的值都不可以使用百分数。

平移函数

缩放函数

旋转函数

倾斜函数

视域函数

500-100px之间的值是适中的视域。

	#ex01 {transform: perspective(100px) rotateY(-45deg);}
	#ex02 {transform: perspective(250px) rotateY(-45deg);}
	#ex03 {transform: perspective(500px) rotateY(-45deg);}
	#ex04 {transform: perspective(1250px) rotateY(-45deg);}

	#ex11 {transform: rotateY(-45deg) perspective(100px);}
	#ex12 {transform: rotateY(-45deg) perspective(250px);}
	#ex13 {transform: rotateY(-45deg) perspective(500px);}
	#ex14 {transform: rotateY(-45deg) perspective(1250px);}

矩阵函数（基本不使用）

matrix(x, x, x, x, x, x)

16.3 其他变形属性

16.3.1 移动原点

trasnform-origin

取值：[ left | center r| ight | top | bottom | <percentage> | <length> | [left | center r| ight | top | bottom | <percentage> | <length>]] <length>?
初始值：50% 50%
适用于：任何可变形的元素
继承性：否
动画性：<length>, <percentage>

除了平移，其他想做变形操作，原点都对其有影响。

16.3.2 选择3D变形方式

transform-style

取值：flat | preserve-3d
初始值：flat
适用于：任何可变形的元素
继承性：否
动画性：否

](https://imgtu.com/i/fIdjOS)

16.3.3 修改视域

定义视距

perspective

取值：none | <length>
初始值：none
适用于：任何变形的元素
继承性：否
动画性：是

perspective属性与perspective()函数之间区别是前者为所有子元素共有，而后者只对目标元素有效果。

移动视域的原点

perspective-origin

取值：[ left | center r| ight | top | bottom | <percentage> | <length> | [left | center r| ight | top | bottom | <percentage> | <length>]] <length>?
初始值：50% 50%

16.3.4 处理背面

backface-visibility

取值：visible | hidden
初始值：visible
适用于：任何可变性的元素
继承性：否
动画性：否

第17章过渡

17.1 CSS过渡

如果属性或提供给属性的值不支持动画，变化也立即完成，而不逐渐过渡。

17.2 定义过渡的属性

transition-property、transition-duration、transition-timing-functiong、transition-delay、transition。

17.2.1 限制受过渡影响的属性

transition-property

取值：none | [all | <property-name>]#
初始值：all
适用于：所有元素，以及:before和:after伪元素
继承性：否
动画性：否

属性过渡会触发transitionend事件，每个属性都会触发一次。

17.2.2 设置过渡时间

transition-duration

取值：<time>#
初始值：0s
适用于：所有元素，以及:before和:after伪元素
继承性：否
动画性：否

持续时间在100到200毫秒之间的过渡效果最好。

17.2.3 调整过渡的内部时序

transition-timing-function

取值：<timing-function>#
初始值：ease
适用于：所有元素，以及:before和:after伪元素
继承性：否
动画性：否

备注：取值有ease、linear、ease-in、ease-out、ease-in-out、step-start、step-end、steps(n, start)、steps(n, end)和cubic-bezier(x1, y1, x2, y2)。

17.2.4 延迟过渡

transition-delay

取值：<time>#
初始值：0s
适用于：所有元素，以及:before和:after伪元素
继承性：否
动画性：否

负的延迟值

动画时间等于延迟值加上动画时间的总和。

17.2.5 transition简写属性

transition

初始值：all 0s ease 0s
适用于：所有元素，以及:before和:after伪元素
继承性：否
动画性：否

17.3 反向过渡：退回起点

如果只声明一个transition属性，应该放在起始状态。

逆转中断的过渡

假设过渡开始75毫秒后用户把鼠标从菜单移开，这时下拉菜单还未完全打开，在关闭菜单之前，浏览器将等待50毫秒，再进行动画。

17.4 支持动画的属性和值

判断属性是否支持动画的关键是确定其取值是否内插。如果属性的计算值是关键字，不能内插；如果关键字能计算为某种数值，则能内插。

17.4.1 属性值是如何内插的

长度值和百分数转换为实数。颜色值转换为RGBA值。

17.5 过渡是效果增强

过渡是对用户界面的效果增强。

第18章动画

动画与过渡的区别是动画对变化的方式有更大的控制权。

过渡触发的是属性值的隐式变化，而动画变化过程中用到的属性值要在关键帧中显式声明。

18.1 定义关键帧

使用@keyframes定义。

@keyframes xxx {
  from {}
  to  {}
}
@keyframes xxx {
  0% {}
  50% {}
  100% {}
}

18.2 设置关键帧动画

18.3 关键帧选择符

18.3.1 省略from和to值

如果未使用0%或from，用户代理将使用要应用动画效果的属性的原始值构建一个0%关键帧。如果没设置100%或to关键帧，而且没有应用其他动画，浏览器将使用没有动画效果时属性的值构建一个虚设的100%关键帧。

/* 假设元素初始值是background-color: red */
@keyframes change_bgcolor {
    45% {
        background-color: green;
        border-width: 10px;
    }
    55% {
        background-color: blue;
        border-width: 20px;
    }
}
/* 会变成 */
@keyframes change_bgcolor {
  	0%{
      background-color: red
    }
    45% {
        background-color: green;
        border-width: 10px;
    }
    55% {
        background-color: blue;
        border-width: 20px;
    }
    100%{
        background-color: red
    }
}

18.3.2 重复关键帧属性

后面覆盖前面。

18.3.3 支持动画的属性

属性的值由中间点。

18.3.4 不支持动画但不被忽略的属性

有两个例外：visibility和animation-timing-function。

18.3.5 通过脚本编辑@keyframes动画

可以使用appendRule(n)和deleteRule(n)修改关键帧块，n是关键字的完整选择符。

关键帧的内容可通过findRule(n)获取。

动画事件：animationstart、animationend和animationiteration（一次迭代结束与下一次迭代开始之间触发）。

18.4 把动画应用到元素上

18.4.1 指定动画的名称

animation-name

取值：[<single-animation-name> | none]#
初始值：none
适用于：所有元素，以及:before和:after伪元素
继承性：否
动画性：否

备注：通过逗号设置多个关键帧动画，如果动画中有重复的属性，后面的动画将覆盖前面动画中相同属性的值。

18.4.2 定义动画的时长

animation-duration

取值：<time>#
初始值：0s
适用于：所有元素，以及:before和:after伪元素
继承性：否
动画性：否

18.4.3 声明动画的迭代次数

animation-iteration-count

取值：[<number> | infinite]#
初始值：1
适用于：所有元素，以及:before和:after伪元素
继承性：否
动画性：否

18.4.4 设置动画的播放方向

animation-direction

取值：[normal | reverse | alternate | alternate-reverse]#
初始值：normal
继承性：否
动画性：否

18.4.5 延迟播放动画

animation-delay

取值：<time>#
初始值：0s
继承性：否
动画性：否

18.4.6 动画事件

animationstart、animationiteration和animationend。

每个事件都有三个只读属性：animationName、elapsedTime和pseudoElement。

动画链

.rainbow {
	animation-name: red, orange, yellow, blue, green;
	animation-duration: 1s, 3s, 5s, 7s, 11s;
	animation-delay: 3s, 4s, 7s, 12s, 19s;
}

动画的性能

在多数浏览器中，不透明度或变形动画由GPU执行，而不是CPU，因此无需等到UI线程空闲下来。所以只要有可能，就应该把transform和opacity放到动画中，而top、left、bottom、right和visibility则不要这么做。

18.4.7 改变动画的内部时序

动画在一次循环（或迭代）中如何演进
animation-timing-function

取值：[ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<integer>, start) | steps(<integer>, end) | cubic-bezier(<number>, <number>, <number>, <number>)]#
初始值：ease

贝塞尔曲线越陡，速度越快，曲线越平，速度越慢。

.dancer {width: 56px; height: 100px;
    background-image: url(c/dancer.png);
    animation-name: dance_in_place;
    animation-duration: 4s;
    animation-timing-function: steps(22, end);
    animation-iteration-count: infinite;
}
@keyframes dance_in_place {
    from {background-position: 0 0;}
    to {background-position: -1232px 0;}
}

将时序动画插入关键字动画中

@keyframes width {
	0%   {width: 500px;}
	50%  {width: 300px; animation-timing-function: ease-in;}
	100% {width: 100px;}
}

18.4.8 设置动画的播放状态

animation-play-state

取值：[ running | paused ]#
初始值：running

18.4.9 动画的填充模式

定义动画播放结束后是否应用原来的属性值
animation-fill-mode

取值：[ none | forwards | backwards | both ]#
初始值：none

none默认值意思是动画不播放就没有效果；backwards指0%或from关键帧定义的属性值在动画应用到元素上的那一刻就起作用；forwards指触发了animationend事件，当时的属性值继续应用在元素上。

18.5 写为一个属性

animation

取值：[ <name> || <duration> || <timing-function> || <delay> || <iteration-count> || <direction> || <fill-mode> || <play-state> ]#
初始值：0s ease 0s 1 normal none runing none

18.6 动画、特指度和优先顺序

18.6.1 特指度和!important

在关键帧动画中应用的属性的值，属性的值好像都是行内声明的一样。

不要在动画声明中使用!important。

18.6.2 动画顺序

如果有多个动画为同一个属性指定了不同的值，最后一个应用的动画将覆盖之前动画中声明的值。

18.6.3 display: none;对动画迭代的影响

如果把元素的display属性设置为none，元素或其后代上的动画迭代将停止。

18.6.4 动画和UI线程

CSS动画在用户界面（UI）线程中的优先级最低。如果页面加载时附加了多个动画，而且animation-delay为正值，延迟结束后倘若UI线程不可用，动画不会播放。

18.7 癫痫和前庭功能失调

动态变化的内容可能导致某些用户癫痫发作，此外还有可能导致前庭功能失调（晕动症）人群产生多种不适。

可以通过媒体查询prefers-reduced-motion在浏览器或其他设备中设置“减少运动效果”或类似偏好设置的用户定义样式。

@media (prefers-reduced-motion) {
  * {animation: none !important; transition: none !important;}
}

18.8 动画事件及其前缀

18.8.1 animationstart

即便一次迭代也没有，也会触发事件。如果在一个元素上应用多个动画，每个有效的关键帧动画都将触发一次animationstart事件。

18.8.2 animationend

应用的每个动画只触发一次animationend事件。

(animation-duration * animation-iteration-count) + animation-delay = time。

如果animation-iteration-count为infinite，animationend将永不触发。

18.8.3 animationiteration

在动画的一次迭代结束之后和下一次迭代开始之前触发。

如果没有迭代，或者迭代次数小于或等于一，animationiteration不触发。

第19章滤镜、混合、裁剪和遮罩

19.1 CSS滤镜

filter

取值：[ none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | sepia() | saturate() | url() ]#
初始值：none
适用于：所有元素（在SVG中适用于所有图形元素和除<defs>元素之外的所有容器元素）
继承性：否
动画性：是

19.1.1 基本滤镜

blur(<length>)

使用高斯模糊对元素的内容做模糊处理。
opacity( [ <number> | <percentage> ] )

跟ppacity属性相似。
drop-shadow(<length>{2, 3} <color>?)

创建与元素的alpha通道形状一致的投影，带模糊效果。

19.1.2 颜色滤镜

grayscale( [ <number> | <percentage> ] )

把元素的颜色变成指定的灰阶。
sepia( [ <number> | <percentage> ] )

把元素的原色变成指定的墨色调。
invert( [ <number> | <percentage> ] )

把元素的所有颜色做反向处理。拿255或100%减去颜色的R、G和B通道的值。
hue-rotate( <angle> )

在色轮上旋转色相，而饱和度和明度保持不变。

19.1.3 亮度、对比度和饱和度

brightness( [ <number> | <percentage> ] )

调整元素上颜色的亮度。
contrast( [ <number> | <percentage> ] )

调整元素上颜色的对比度。对比度越高，越容易区分颜色；对比度越小，颜色越接近。
saturate( [ <number> | <percentage> ] )

调整元素上颜色的饱和度。饱和度越高，颜色越鲜艳；饱和度越低，颜色越黯淡。

19.1.4 SVG滤镜

url(<uri>)指向SVG中定义的滤镜

.arena li:nth-child(1) img {filter: url(g/filter.svg#edgedetect);}
.arena li:nth-child(2) img {filter: url(g/filter.svg#highlight);}
.arena li:nth-child(3) img {filter: url(g/filter.svg#emboss-simple);}

19.2 合成和混合

19.2.1 混合元素

重叠元素的混合方式可以用mix-blend-mode设定

mix-blend-mode

取值：normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity
初始值：normal
适用于：所有元素
继承性：否
动画性：否

默认值normal的意思是元素上的各像素原封不动地显示，不与背着物混合。

应用mix-blend-mode属性的元素是前景。
位于元素背后的是背着物。可以是另一个元素，也可以是父元素的背景等。
像素分量是某个像素的颜色分量，即R、G和B。

mix-blend-mode改变的是位于上层的图像的混合模式。

19.3 与背景混合

background-blend-mode

取值：[ normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity ]#
初始值：normal
适用于：所有元素
继承性：否
动画性：否

独立混合

isolation

取值：auto | isolate
初始值：auto
适用于：所有元素
继承性：否
动画性：否

img {height: 200px;}
img {mix-blend-mode: difference;}
p.alone {isolation: isolate;}
</style>
</head>
<body>

<div class="arena">

<p class="alone"><img src="i/diamond.png"></p>
<p><img src="i/diamond.png"></p>

</div>

建立叠堆上下文的全部情形

根元素（例如<html>）。
相对或绝对定位一个元素，并把z-index设为auto以外的值。
固定定位一个元素，z-index设为什么值都行。
把opacity设为1以外的值。
把transform设为none以外的值。
把mix-blend-mode设为normal以外的值。
把filter设为none以外的值。
把perspective设为none以外的值。
把isolation设为isolate。
把will-change应用到上述任何一个属性上，即使不会真的发生变化。

19.4 裁剪和遮罩

19.4.1 裁剪

clip-path

取值：none | <url> | [ [ inset() | circle() | ellipse() | polygon() ] || [ border-box | padding-box | content-box | margin-box | fill-box | stroke-box | view-box ]]
初始值：none
适用于：所有元素
继承性：否
动画性：inset() | circle() | ellipse() | polygon()支持