1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
| #-----------------------------------------------------------------------------------------------------------
//涵盖CSS3的全部CSS标签以及可用属性值 |说明:"ttt"处为CSS自定义文本,常用于属性或变量的自定义命名
# 选择器与优先级=========================================
# *{} ：通配选择器
# #id{}: ID选择器
# .ttt{}；Class选择器 //class=ttt
# div{} :元素选择器
# .ttt,.zzz{}：合并选择器
# ttt zzz{}: 后代选择器
# ttt>zzz{}:子代选择器
# ttt+zzz{}: 相邻兄弟选择器
# ttt~zzz{} 通用兄弟选择器
# !important:
# :hover: 鼠标悬停|伪类选择器
# [attr=value]: 属性选择器（精确匹配属性值）
# :nth-child(n): 第n个子元素（CSS3）
# ::before: 元素前插入内容（伪元素）
# :not(selector): 排除选择器（CSS3）
# :root: 根元素选择器（CSS3）
# 盒模型与布局=========================================
# width: 宽 |px
# height: 高 |px
# left: 0px 方向对齐 |
# margin: 外边框 |上右下左 0 0 0 0 px
# padding: 内边框 |上右下左 0 0 0 0 px
# size：水平宽度 |px
# border-radius: 圆角 |px //1:相同；2:左上+右下,右上+左下；3:左上,右上+左下,右下；4:左上,右上,右下,左下
# float: 浮动 | (left 左浮动|right 右浮动|none 无浮动)
# clear: both: 清除浮动|
# overflow: hidden：清除浮动|
# align :对齐方式 | (左 left|右 right|水平居中 center|上 top|下 bottom|垂直居中 middle)
# display:盒元素 | (block 块级|inline 行内|flex 弹性|grid 网格)
# flex : 弹性布局简写（grow shrink basis，CSS3）
# box-sizing:盒子模型 | (content-box 标准盒模型|border-box 边框盒模型)
# resize : 元素缩放（none|both|horizontal|vertical，CSS3）
# box-shadow: 阴影|(水平偏移 h-shadow|垂直偏移 v-shadow|模糊 blur|扩展 spread|颜色 color|内阴影 inset)//0px 0px 0px #ffffff
# grid-template-columns : 网格列定义（CSS3：repeat(3, 1fr)）
# justify-content : 主轴对齐（center/space-between，Flex/Grid 通用）
# align-items : 交叉轴对齐（stretch/center）
# 背景与边框===========================================
# background-color: 背景颜色 | #ff0000ff
# background-image: 背景图片 |(url() 图片路径|linear-gradient() 线性渐变)
# background-attachment : 背景固定（固定 fixed|滚动 scroll）
# background-size: 背景图片大小 | (cover 有损比例填充|contain 无损比例填充|auto 默认)
# background-repeat: 背景填充 | repeat默认值/repeat-x水平平铺/repeat-y垂直平铺/no-repeat不平铺}
# background-clip : 背景绘制区域（border-box/padding-box/content-box，CSS3）
# background-position: 图片定位 | left ???/center ???/right ???/x(px)y(px)/x%y%}
# linear-gradient() : 线性渐变背景（CSS3：to right, #ff0000, #0000ff）
# radial-gradient() : 径向渐变背景（CSS3）
# border-color: 边框颜色 | #ff0000ff
# border-collapse: 边框折叠样式| collapse
# border: 边框样式| (width 宽|样式 style|颜色 color)
# transparent //在border里面添加以隐藏边框
# background-cover:(背景图片放大,完全覆盖背景区域,可能无法显示在背景定位区域中)(等比放大)//400px
# background-contain:(把图像放大至最大尺寸,使其高度宽度完全适应内容区域,可能铺不满盒子)//400px
# 列表与定位===========================================
# list-style-type:列表列标签样式(disc:实心圆 circle:空心圆 square:实心正方体 none:无)
# list-style-image:url(img.jpg图片路径) //将图片设置为列表符合样式
# list-style-position: 列表符定位 (outside 外面,inside 里面)| //设置列表项标记的放置位置
# list-style:简写 | (none去除列表符号)
# position: 定位 | static（默认）/relative（相对）/absolute（绝对）/fixed（固定）(绝对和固定会脱离文档流)
# 文本与字体===========================================
# color: 颜色 | #ff0000ff //可选值：red/#ffffff/rgb(255,255,255)/rgba(0,0,0,.0)}
# font-size: 字体大小 |（px、rem）
# font-weight: 字体粗细 | bold粗(700)/bolder更粗/lighter更细/100-900细到粗(400默认)}
# font-style: 字体样式| normal默认/italic斜体
# font-family: 字体 |（"Arial", sans-serif）
# text-align: 字体对齐 |(左 left|右 right|水平居中 center|上 top|下 bottom|垂直居中 middle)
# vertical-align: 垂直对齐|???
# text-shadow: 阴影 | (水平偏移 x|垂直偏移 y|模糊 blur|颜色 color)
# line-height: 行高对齐 |（行高倍数或固定值）
# white-space: ... | (nowrap 不换行|pre 保留空格)
# text-overflow : 文本溢出处理（clip/ellipsis，需配合 overflow: hidden）
# word-wrap : 单词换行（break-word，CSS3）
# @font-face : 自定义字体（CSS3，支持.woff 格式）
# text-decoration: 文本修饰| underline下划线/overline上划线/line-through删除线
# text-indent：文本缩进
# text-transform: capitalize; 对英文句子所有单词首字母大写
# text-transform: lowercase; 对英文句子所有单词首字母小写
# text-transform:uppercase;对英文句子所有单词字母大写ita
# text-transform:none; 不添加任何效果}
# 变换与动画(CSS3)====================================
# transform: 2D/3D元素变换 |扭曲skewX(0deg) |旋转rotate(45deg) |缩放scale(1.2) |移动translateX(50px)
# transform-style: preserve-3d(开启3D空间)
# perspective:景深| (500px)
# perspective-origin: 透视点| (500px 500px)或者left
# transition: 过渡效果 | (属性 property|时长 duration|缓动函数 timing-function)（如all 0.3s ease）)
# animation: 动画效果 | (name, duration, timing, delay, count)（动画名 时长 缓动 延迟 次数）
# animation: ttt 0(s) linear 0(s) infinite normal}|
# animation-fill-mode:forwards
# animation: hover{animation-play-state:paused}}
# ttt:hover{animation-play-state:paused}}
# opacity: 不透明度 | 0~1（透明度，如0.5）
# filter: 滤镜| blur(5px)（模糊）/grayscale(100%)（灰度）
@keyframes : 关键帧定义(动画)（如 from {opacity:0} to {opacity:1}）from{样式}to{样式}} 或者0%-100%{} //from为动画的开始,to为动画的结束
# flex-grow: 0 |
# 弹性与布局(css3)================================
# flex-direction: 布局方式 | row（行排列）/column（列排列）
# flex-wrap:换行 |换行wrap,不换行nowrap
# justify-content: 主轴对齐 | center（居中）/space-between（两端对齐）/flex-start 起始位置对齐/flex-end 结束位置对齐/space-around 分散对齐2x/space-evenly 均分对齐
# flex-grow:拉伸 | (?)
# flex-shrink:压缩 | (?)
# align-items:侧轴对齐(单行) | stretch（拉伸）/center（居中）
# align-content:侧轴对齐(多行) | flex-start 起始位置对齐/flex-end 结束位置对齐/
# order:视觉排序 |(?)
# flex-basis: 基准长度| (100px)
# grid-template-columns: 定义网格列宽| repeat(3, 1fr)（重复列）/minmax(100px, auto)（最小最大值）
# gap: 列宽间距 |（网格或弹性项间距）
# columu-count:多列布局-列数
# columu-width:列宽宽度
# columu-gap: 列宽间距
# columu-rule-width:列边框宽度z
# columu-rule-style:列边框样式
# columu-rule-color:列边框颜色
# 前端开发技巧|flex简写：
# 响应式与单位========================================
# @media: 媒体条件 |（如max-width: 600px）
# vw/vh: 视窗比例单位 |（1vw = 1% 视窗宽度）
3 rem : 根字体相对单位（适配不同设备）
# calc() : 动态计算（如 width: calc(100% - 60px)）
# hsla() : HSL 带透明度（hsla(120,100%,50%,0.3)，CSS3）
# rgba() : RGB 带透明度（rgba(255,0,0,0.5)，CSS3）
# @media screen and (max-width:768(px)) {.ttt{样式}} |手机适配
# @media screen and (min-width:768(px)) and (max-width:996(px)) {.ttt{样式}}|平板适配
# @media screen and (min-width:996(px)) {.ttt{样式}}|电脑适配
# 其他关键属性========================================
# overflow: 溢出处理(滚动条) | visible(默认)/hidden(溢出隐藏)/scroll(溢出滚动)/auto(自动)/inherit;
# cursor: 鼠标光标状态 | pointer（手形）/wait（等待）
# z-index: 层叠顺序 |（层叠顺序，如999）
# currentColor : 继承当前文字颜色
# clip-path : 裁剪路径（CSS3：circle(50%)/polygon()）
# will-change : 性能优化（预声明变化属性）
# scroll-snap-type : 滚动捕捉（CSS3：y mandatory）
# BFC的作用===========================================
# 元素开启 BFC后，其子元素不会再产生 margin 塌陷问题。
# 元素开启 BFC后，自己不会被其他浮动元素所覆盖。
# 元素开启 BFC后，就算其子元素浮动，元素自身高度也不会塌陷。
# BFC满足条件=========================================
# 根元素：html
# 浮动元素：flot
# 绝对定位,固定定位：
# 表格单元格元素：table,thead,tbody,tfoot,th,td,tr,caption
# overfloe的值不为visible的块元素
# 伸缩项目
# 多列容器
# colum-span为all的元素
# display的值，设置为flow-root
# BFC的满足条件部分举例===========================================
#
_____________________________________________________
# CSS----------------------------------------------------------------------------------------------------------
|
wechat
alipay
