CSS3知识点总结思维导图模板_ProcessOn思维导图、流程图

选择器

属性选择器

[att*=val]

att属性包含val

[att^=val]

att属性开头包含val

[att$=val]

att属性结尾val

通用兄弟选择器

element1~element2

属于同一个父元素的element1之后的所有同级element2兄弟元素

element1+element2

紧挨着element1之后的element2元素

伪类:

结构性伪类选择器

子元素选择器

first-child

第一个子元素

last-child

最后一个子元素

nth-child(n)

第n个子元素

nth-last-child(n)

倒数第n个子元素

同类子元素选择器

first-of-type

属于父元素的第一个同类子元素

last-of-type

属于父元素的最后一个同类子元素

nth-of-type(n)

属于父元素的第n个同类子元素

nth-last-of-type(n)

属于父元素的倒数第n个同类子元素

唯一元素

only-child选择器

唯一子元素

only-of-type

属于其父元素唯一的同类元素

其他

root

页面根元素

not

排除该元素下的子元素

empty

内容为空的元素

target

选取当前活动的目标元素

UI元素状态伪类选择器

状态

hover

鼠标悬停

active

元素被激活

focus

获得光标焦点

link

应用于未被访问过的链接

visited

应用于被访问过的链接

表单相关

可用状态

enabled

元素处于可用状态

disabled

元素处于不可用状态

可读状态

read-only

元素处于只读状态

read-write

元素处于非只读状态

表单选取

checked

表单中的radio单选框或checkbox复选框处于选取状态

default

页面打开时默认处于选取状态的单选框或复选框

indeterminate

一组radio单选框中没有单选框被选中时，整组单选框的样式

输入有效性

valid

符合输入要求的元素

invalid

不符合输入要求的元素

表单必填项相关

required

允许使用required属性，且已指定了required属性的元素

optional

允许使用required属性，但未指定required属性的元素

范围有效性

in-range

元素的有效值被限定在一段范围之内，且实际输入值在该范围内时使用的样式

out-of-range

元素的有效值被限定在一段范围之内，且实际输入值在该范围之外时使用的样式

伪元素::

first-line

文本第一行文字

first-letter

文本首字母或第一个字

before

元素之前

after

元素之后

selection

处于选中状态时文本

文字与字体相关属性

text-shadow

文字添加阴影(text-shadow: h-shadow v-shadow blur color)

word-break

规定非中日韩文本的换行规则

normal：使用浏览器默认的换行规则

break-all：允许在单词内换行

keep-all：只能在半角空格、连字符或标点符号处换行

word-wrap

对长单词与URL地址自动换行

normal：使用浏览器保持默认处理

break-word：在长单词或URL地址内部进行换行

user-select

是否可选取文字

text：可以选取

none：禁止选取

all：只能选取全部文字

element：可以选取文字，但选择范围受元素边界的约束

Web Font

使用服务端字体@font-face

font-size-adjust

修改字体种类而保持字体尺寸不变(font-size-adjust:aspect)

rem

根据页面上的根元素（一般指html元素）的字体大小而计算出实际的字体大小

盒相关样式

盒类型

block

块元素，用于显示占用一行的块

inline

行内元素，用于把一个元素放在行的内部

inline-block

以block的方式渲染，以inline的方式放置，具有width与height

list-item

将多个元素作为列表来显示，同时在元素的开头加上列表的标记

run-in

如果元素后面有block类型的元素，元素将被包含在后面的block类型的元素内部

compact

如果元素后面有block类型的元素，元素将被放置在block类型的元素左边

none

元素不会被显示

表格相关类型

table

此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符

inline-table

此元素会作为内联表格来显示，将table元素修改成该类型可以让表格与其他文字处于同一行

table-row

此元素会作为一个表格行显示（类似 <tr>），代表表格中的一行

table-cell

此元素会作为一个表格单元格显示（类似 <td> 和 <th>），代表表格中的列标题/所有行

table-row-group

此元素会作为一个或多个行的分组来显示（类似 <tbody>），代表表格中的所有行

table-header-group

此元素会作为一个或多个行的分组来显示（类似 <thead>），代表表格中的表头部分

table-footer-group

此元素会作为一个或多个行的分组来显示（类似 <tfoot>），代表表格中的脚注部分

table-column

此元素会作为一个单元格列显示（类似 <col>）代表表格中的一-列

table-column-group

此元素会作为一个或多个列的分组来显示（类似 <colgroup>），代表表格中的所有列

table-caption

此元素会作为一个表格标题显示（类似 <caption>），代表整个表格的标题

盒内容溢出

overflow

visible

超出容纳范围的文字按原样显示

hidden

超出容纳范围的文字将被隐藏起来

auto

超出容纳范围时根据需要出现水平滚动条或垂直滚动条

scroll

出现固定的水平滚动条与垂直滚动条

overflow-x

在水平方向上内容超出盒的容纳范围时的显示方法

overflow-y

在垂直方向上内容超出盒的容纳范围时的显示方法

text-overflow

clip

修剪文本

ellipsis

显示省略符号来代表被修剪的文本

string

使用给定的字符串来代表被修剪的文本

盒阴影

盒添加阴影 (box-shadow: h-shadow v-shadow blur spread color inset)

h-shadow

必需，水平阴影的位置。允许负值

v-shadow

必需，垂直阴影的位置。允许负值

blur

可选，模糊距离

spread

可选，阴影的尺寸

color

可选，阴影的颜色

inset

可选，将外部阴影 (outset) 改为内部阴影

针对元素的宽度与高度的计算方法

box-sizing

content-box

元素的宽度与高度不包括内部补白区域与边框的宽度与高度

border-box

元素的宽度与高度包括内部补白区域与边框的宽度与高度

padding-box

指定的宽度与高度包括内容的宽度与高度和内部补白区域的宽度与高度，不包括边框的宽度与高度

背景与边框相关样式

背景

background-clip (属性规定背景的绘制区域)

border-box

背景被裁剪到边框盒

padding-box

背景被裁剪到内边距框

content-box

背景被裁剪到内容框

background-origin (规定背景图片的定位区域)

padding-box

背景图像相对于内边距框来定位

border-box

背景图像相对于边框盒来定位

content-box

背景图像相对于内容框来定位

background-size (规定背景图片的尺寸)

length

设置背景图像的高度和宽度

percentage

以父元素的百分比来设置背景图像的宽度和高度

cover

把背景图像扩展至足够大，以使背景图像完全覆盖背景区域

contain

把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域

background-repeat

repeat

背景图像将在垂直方向和水平方向重复

repeat-x

背景图像将在水平方向重复

repeat-y

背景图像将在垂直方向重复

no-repeat

背景图像将仅显示一次

inherit

规定应该从父元素继承 background-repeat 属性的设置

space

图像会尽可能得重复, 但是不会裁剪

round

随着允许的空间在尺寸上的增长, 被重复的图像将会伸展(没有空隙), 直到有足够的空间来添加一个图像

background-image

线性渐变 linear-gradient( [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )

side-or-corner

[left | right] || [top | bottom]

color-stop

<color> [ <percentage> | <length> ]?

放射性渐变 radial-gradient([ circle || <length> ] [ at <position> ]? ,| [ ellipse || [<length> | <percentage> ]{2}] [ at <position> ]? ,| [ [ circle | ellipse ] || <extent-keyword> ] [ at <position> ]? ,| at <position> ,<color-stop> [ , <color-stop> ]+ )

边框

border-radius

圆角边框(border-radius: 1-4 length|% / 1-4 length|%)

border-image

border-image-source

用在边框的图片的路径

border-image-slice

图片边框向内偏移

border-image-width

图片边框的宽度

border-image-outset

边框图像区域超出边框的量

border-image-repeat

图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)

变形处理

2D转换

transform

rotate(angle)

元素顺时针旋转给定的角度

scale(x,y)

元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数

skew(x-angle,y-angle)

元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数

translate(x,y)

元素从其当前位置移动，根据给定的 left（x 坐标）和 top（y 坐标）位置参数

matrix(n,n,n,n,n,n)

所有的2D转换方法组合在一起，需要六个参数，包含数学函数，允许我们：旋转、缩放、移动以及倾斜元素

3D转换

transform

rotateX()

元素围绕其X轴以给定的度数进行旋转

rotateY()

元素围绕其Y轴以给定的度数进行旋转

rotateZ()

元素围绕其Z轴以给定的度数进行旋转

perspective

设置元素被查看位置的视图(perspective: number|none)

perspective-origin

设置 3D 元素的基点位置(perspective-origin: x-axis y-axis)

transform-style (规定如何在 3D 空间中呈现被嵌套的元素)

flat

子元素将不保留其 3D 位置

preserve-3d

子元素将保留其 3D 位置

backface-visibility (定义当元素不面向屏幕时是否可见)

visible

背面可见

hidden

背面不可见

transform-origin

设置旋转元素的基点位置(transform-origin: x-axis y-axis z-axis)，默认是图形中心

过渡

元素从一种样式逐渐改变为另一种的效果 (transition 属性是一个简写属性，用于设置四个过渡属性 transition: property duration timing-function delay)

transition-property (规定设置过渡效果的CSS属性的名称)

all

所有属性都将获得过渡效

none

没有属性会获得过渡效果

property

定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔

transition-duration (规定完成过渡效果需要多少秒或毫秒)

默认值是0，意味着不会有效果

transition-timing-function (规定速度效果的速度曲线)

linear

规定以相同速度开始至结束的过渡效果

ease

规定慢速开始，然后变快，然后慢速结束的过渡效果

ease-in

规定以慢速开始的过渡效果

ease-out

规定以慢速结束的过渡效果

ease-in-out

规定以慢速开始和结束的过渡效果

cubic-bezier(n,n,n,n)

在 cubic-bezier 函数中定义自己的值,可能的值是 0 至 1 之间的数值

transition-delay (定义过渡效果何时开始)

默认值是0，立即执行

动画

使元素从一种样式逐渐变化为另一种样式的效果

@keyframes 规定动画 (@keyframes animationname {keyframes-selector {css-styles;}})

animationname

必需，定义动画的名称

keyframes-selector

必需，动画时长的百分比

合法的值： 0-100% from（与 0% 相同） to（与 100% 相同

css-styles

必需，一个或多个合法的 CSS 样式属性

animation 属性是一个简写属性，用于设置六个动画属性 (animation: name duration timing-function delay iteration-count direction)

animation-name

规定需要绑定到选择器的keyframes的animationname名称

animation-duration

animation-timing-function

animation-delay

animation-iteration-count (规定动画应该播放的次数)

n

定义动画播放次数的数值，默认是1

infinite

规定动画应该无限次播放

animation-direction (规定是否应该轮流反向播放动画)

normal

动画正常播放，动画执行完毕后返回初始状态

alternate

动画应该轮流反向播放

reverse

反方向执行动画

alternate-reverse

从反方向开始交替更改动画的执行方向

animation-play-state (规定动画是否正在运行或暂停)

running

规定动画正在播放

paused

规定动画已暂停

animation-fill-mode (规定对象动画时间之外的状态)

none

不改变默认行为

forwards

当动画完成后，保持最后一个属性值(在最后一个关键帧中定义)

backwards

在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值(在第一个关键帧中定义)

both

向前和向后填充模式都被应用

布局相关样式

多列布局 (创建多个列来对文本进行布局)

column-count

规定元素应该被分隔的列数

column-gap

规定列之间的间隔

column-rule

设置列之间的宽度、样式和颜色规则

column-span

规定元素应横跨多少列

column-width

规定列的宽度

box盒布局

flex弹性盒子布局

flex容器

display

flex

生成弹性盒子布局

inline-flex

生成行内弹性盒子布局

flex-direction (决定主轴的方向)

row

主轴为水平方向，起点在左端

row-reverse

主轴为水平方向，起点在右端

column

主轴为垂直方向，起点在上沿

column-reverse

主轴为垂直方向，起点在下沿

flex-wrap (决定容器内项目是否可换行)

nowrap

不换行，即当主轴尺寸固定时，当空间不足时，子元素尺寸会随之调整而并不会挤到下一行

wrap

子元素主轴总尺寸超出容器时换行，第一行在上方

wrap-reverse

换行，第一行在下方

flex-flow

flex-direction 和 flex-wrap 的简写形式

justify-content (定义了项目在主轴的对齐方式)

flex-start

左对齐

flex-end

右对齐

center

居中

space-between

两端对齐，子元素之间的间隔相等，即剩余空间等分成间

space-around

每个子元素两侧的间隔相等，所以子元素之间的间隔比子元素与边缘的间隔大一倍

align-items (定义了项目在交叉轴上的对齐方式)

stretch

即如果子元素未设置高度或者设为auto，将占满整个容器的高度

flex-start

交叉轴的起点对齐

flex-end

交叉轴的终点对齐

center

交叉轴的中点对齐

baseline

子元素的第一行文字的基线对齐

align-content (定义了多根轴线的对齐方式，如果项目只有一根轴线，那么该属性将不起作用)

stretch

多条轴线平分容器的垂直方向上的空间

flex-start

轴线全部在交叉轴上的起点对齐

flex-end

轴线全部在交叉轴上的终点对齐

center

轴线全部在交叉轴上的中间对齐

space-between

轴线两端对齐，之间的间隔相等，即剩余空间等分成间隙

space-around

每个轴线两侧的间隔相等，所以轴线之间的间隔比轴线与边缘的间隔大一倍

Flex子元素属性

order

设置子元素在容器中的排列顺序，数值越小，排列越靠前，默认值为 0

flex-basis

设置或检索子元素伸缩基准值

flex-grow

定义子元素的放大比例，默认值为 0，即如果存在剩余空间，也不放大。当所有的子元素都以 flex-basis 的值进行排列后，仍有剩余空间，那么这时候 flex-grow 就会发挥作用

flex-shrink

定义了子元素的缩小比例，默认值为1，即如果空间不足，该子元素将缩小，负值对该属性无效

flex

flex-grow, flex-shrink 和 flex-basis的简写，默认值是 0 1 auto

align-self

允许单个子元素有与其他子元素不一样的对齐方式，覆盖容器的 align-items 属性。默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch

网格布局

grid容器

display

grid

生成采用网格布局

inline-grid

生成行内网格

grid-template-rows

定义每一行的行高

grid-template-columns

定义每一列的列宽

grid-row-gap

设置行与行的间隔

grid-column-gap

设置列与列的间隔

grid-gap

grid-column-gap和grid-row-gap的简写形式

grid-template-areas

用于定义区域

例子🌰： grid-template-areas: "header header header" "main main sidebar" "footer footer footer";

grid-auto-flow (子元素的排列方式)

row

先行后列

column

先列后行

row dense

表示"先行后列"，并且尽量填满空格

column dense

表示"先列后行"，并且尽量填满空格

justify-items (设置单元格内容的水平位置)

stretch

拉伸，占满单元格的整个宽度

start

左对齐

end

右对齐

center

居中对齐

align-items (设置单元格内容的垂直位置)

stretch

拉伸，占满单元格的整个高度

start

上对齐

end

下对齐

center

居中对齐

place-items

align-items和justify-items的简写形式

justify-content (整个内容区域在容器里面的水平位置)

start

左对齐

end

右对齐

center

居中对齐

stretch

项目大小没有指定时，拉伸占据整个网格容器

space-around

每个项目两侧的间隔相等

space-between

项目与项目的间隔相等，项目与容器边框之间没有间隔

space-evenly

项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔

align-content (整个内容区域在容器里面的垂直位置)

start

上对齐

end

下对齐

center

居中对齐

stretch

项目大小没有指定时，拉伸占据整个网格容器

space-around

每个项目两侧的间隔相等

space-between

项目与项目的间隔相等，项目与容器边框之间没有间隔

space-evenly

项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔

place-content

align-content和justify-content的简写形式

grid-auto-columns

设置多余的网格的列宽

grid-auto-rows

设置多余的网格的行高

grid-template

grid-template-columns、grid-template-rows和grid-template-areas的简写形式

grid

grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、 grid-auto-columns、grid-auto-flow这六个属性的合并简写形式

grid子元素属性

grid-column-start

左边框所在的垂直网格线

grid-column-end

右边框所在的垂直网格线

grid-row-start

上边框所在的水平网格线

grid-row-end

下边框所在的水平网格线

grid-column

grid-column-start和grid-column-end的合并简写形式

grid-row

grid-row-start属性和grid-row-end的合并简写形式

grid-area

指定项目放在哪一个区域

还可用作grid-row-start、grid-column-start、grid-row-end、grid-column-end的合并简写形式

justify-self

属性设置单元格内容的水平位置（左中右），跟justify-items属性的用法完全一致，但只作用于单个项目

align-self

设置单元格内容的垂直位置（上中下），跟align-items属性的用法完全一致，也是只作用于单个项目

place-self

align-self和justify-self的合并简写形式