CSS3知识点总结
2020-02-21 10:04:51 1 举报AI智能生成
CSS3知识点总结
作者其他创作
大纲/内容
CSS3
选择器
属性选择器
[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(属性规定背景的绘制区域)
背景被裁剪到边框盒
背景被裁剪到内边距框
背景被裁剪到内容框
background-origin(规定背景图片的定位区域)
背景图像相对于内边距框来定位
背景图像相对于边框盒来定位
背景图像相对于内容框来定位
background-size(规定背景图片的尺寸)
length
设置背景图像的高度和宽度
percentage
以父元素的百分比来设置背景图像的宽度和高度
cover
把背景图像扩展至足够大，以使背景图像完全覆盖背景区域
contain
把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域
background-repeat
repeat
背景图像将在垂直方向和水平方向重复
repeat-x
背景图像将在水平方向重复
repeat-y
背景图像将在垂直方向重复
no-repeat
背景图像将仅显示一次
inherit
规定应该从父元素继承 background-repeat 属性的设置
space
round
background-image
side-or-corner
[left | right] || [top | bottom]
color-stop
<color> [ <percentage> | <length> ]?
边框
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)
元素顺时针旋转给定的角度
元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数
元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数
元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数
所有的2D转换方法组合在一起，需要六个参数，包含数学函数，允许我们：旋转、缩放、移动以及倾斜元素
3D转换
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(定义当元素不面向屏幕时是否可见)
背面可见
背面不可见
transform-origin
设置旋转元素的基点位置(transform-origin: x-axis y-axis z-axis)，默认是图形中心
过渡
元素从一种样式逐渐改变为另一种的效果(transition 属性是一个简写属性，用于设置四个过渡属性transition: property duration timing-function delay)
transition-property(规定设置过渡效果的CSS属性的名称)
all
所有属性都将获得过渡效
没有属性会获得过渡效果
property
定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔
transition-duration(规定完成过渡效果需要多少秒或毫秒)
默认值是0，意味着不会有效果
transition-timing-function(规定速度效果的速度曲线)
linear
规定以相同速度开始至结束的过渡效果
ease
规定慢速开始，然后变快，然后慢速结束的过渡效果
ease-in
规定以慢速开始的过渡效果
ease-out
规定以慢速结束的过渡效果
ease-in-out
规定以慢速开始和结束的过渡效果
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(规定对象动画时间之外的状态)
不改变默认行为
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
交叉轴的起点对齐
交叉轴的终点对齐
交叉轴的中点对齐
baseline
子元素的第一行文字的基线对齐
align-content(定义了多根轴线的对齐方式，如果项目只有一根轴线，那么该属性将不起作用)
多条轴线平分容器的垂直方向上的空间
轴线全部在交叉轴上的起点对齐
轴线全部在交叉轴上的终点对齐
轴线全部在交叉轴上的中间对齐
轴线两端对齐，之间的间隔相等，即剩余空间等分成间隙
每个轴线两侧的间隔相等，所以轴线之间的间隔比轴线与边缘的间隔大一倍
Flex子元素属性
order
设置子元素在容器中的排列顺序，数值越小，排列越靠前，默认值为 0
flex-basis
设置或检索子元素伸缩基准值
flex-grow
定义子元素的放大比例，默认值为 0，即如果存在剩余空间，也不放大。当所有的子元素都以 flex-basis 的值进行排列后，仍有剩余空间，那么这时候 flex-grow 就会发挥作用
flex-shrink
定义了子元素的缩小比例，默认值为1，即如果空间不足，该子元素将缩小，负值对该属性无效
align-self
允许单个子元素有与其他子元素不一样的对齐方式，覆盖容器的 align-items 属性。默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch
网格布局
grid容器
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 dense
表示\"先行后列\"，并且尽量填满空格
column dense
表示\"先列后行\"，并且尽量填满空格
justify-items(设置单元格内容的水平位置)
拉伸，占满单元格的整个宽度
start
end
居中对齐
align-items(设置单元格内容的垂直位置)
拉伸，占满单元格的整个高度
上对齐
下对齐
place-items
align-items和justify-items的简写形式
justify-content (整个内容区域在容器里面的水平位置)
项目大小没有指定时，拉伸占据整个网格容器
每个项目两侧的间隔相等
项目与项目的间隔相等，项目与容器边框之间没有间隔
space-evenly
项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔
align-content(整个内容区域在容器里面的垂直位置)
place-content
align-content和justify-content的简写形式
grid-auto-columns
设置多余的网格的列宽
grid-auto-rows
设置多余的网格的行高
grid-template
grid-template-columns、grid-template-rows和grid-template-areas的简写形式
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-items属性的用法完全一致，也是只作用于单个项目
place-self
align-self和justify-self的合并简写形式
职业：web前端工程师
0 条评论
回复 删除
下一页
