CSS3属性大全
0~9
text:文本;
decoration:装饰,修饰;
none:没有,无,没有东西地;
list:列表;
style:样式;
perspective:透视,透视法,观点,态度,思考方法,客观判断力,权衡轻重的能力;
transform:形变;
preserve:保持,保存,保留;
translate:平移,位移,作直线运动;
rotate:旋转,轮,轮流;
10~19
scale:尺度,比例,规模;
transition:过渡;
linear:线性的,线的,直线的;
cubic:立方体的;
bezier:贝尔塞曲线,贝尔塞;
duration:经历时间;
timing:时机,定时;时间的选择;(事情发生或计划安排的)特定时间;时机的掌握;火候的把握;节奏;掌握节奏的技巧,为…安排时间;选择…的时机;计时;测定…所需的时间;在某一时刻击球(或踢球) || delay:延迟;
iteration:迭代,(计算机)新版软件;
count:数量,次数,计数;
direction:方向,方位,趋势,动向,方面;
20~29
fill:填充;
mode:模型,模式;
animation:动画,动画制作;
ease:容易;
in:进入;
out:出去;
infinite:无限的,无休止地,无穷无尽的,上帝;
alternate:交替,轮流,间隔的,每隔...(天)的;
keyframes:关键帧;
width:宽;
30~39
height:高;
background:背景;
color:颜色;
transparent:透明;
margin:外边距,(书或笔记本的)白边,幅度,差额,差数;余地;备用的时间(或空间、金钱等);
border:边框;
padding:内填充;
opacity:不透明度;
position:定位;
relative:相对的(相对定位,相对于自身未开启定位时的状态进行定位);
40~49
absolute:绝对的,完全的,全部的,无条件的,(相对于最近且开启相对定位的祖先元素的坐标系进行定位);
vertical:垂直的,竖的,直立的;
align:排整齐,校准,(尤指)使成一条直线,使一致;
forward:向前,向前的;
backward:向后,向后的,向相反方向的; || top:顶部;
right:右;
bottom:底部;
left:左;
inside:内部的;
outside:外部的;
50~59
center:中心;
around:周围;
radius:半径;
box:盒子;
shadow:阴影;
black:黑色;
white:白色;
red:红色;
green:绿色;
blue:蓝色;(rgb()为颜色函数参数取值范围为0·256) || orange:橙色;
60~69
yellow:黄色;
purple:紫色;(红-绿,蓝-橙,黄-紫三对基本补色) || cyan:青;
pink:粉;
gray:灰;
brown:棕;
float:浮动;
clear:清除;
fix:固定,修理(固定定位也是一种绝对定位,但永远参考的是浏览器的视口);
sticky:粘性的,不动的(粘滞定位和相对定位基本一致,但粘滞元素到达某个特定位置会被固定不动);
index:索引;
70~79
font:字体;
family:家族,家庭;
iconfont:图标字体;
size:规格,尺度,大小;
face:脸,面向,面对,表面;
url:网址;
spacing:间距, 间隔, 空隙;
colspan:(计算机)合并单元格的数量;
hover:盘旋;
line:线,线路,行;
80~89
display:显示;
flex:柔性,弹性;
direction:方向,趋势;
row:排,行,列;
column:柱,柱状,栏;
reverse:相反,反向的,反序的;
media:媒体,大众传播媒介,大众传播工具(指电视、广播、报纸、互联网);
screen:屏幕;
min:最小的;
max:最大的;
90~99
all:所有;
print:打印;
speech:演讲,讲话,发言;
bar:栏;
wrapper:包装器;
menu:菜单;
icon:图标;
logo:标志;
info:信息;
inline:行内,在(一条直)线上的,串联式的,联机的;
100~109
wrap:包,包裹,用...缠绕;
flow:流,流动;
justify:使齐行,证明正当;
content:内容;
start:开始;
end:结束,末端;
space:空间;
between:在...之间;
items:项目(复数);
stretch:拉长, 拽宽,撑大, 抻松,有弹性(或弹力),拉紧, 拉直, 绷紧;
110~119
order:顺序, 次序, 条理, 治安,秩序,规矩,命令, 指挥, 要求, 订购, 订货,要求提供服务,点(酒菜等);
integer:整数;
grow:增长,生长,发展;
shrink:缩减,缩小,收缩;
basis:原因, 缘由, 基准, 准则, 方式, 基础,要素,基点;
default:默认值,预设值;
length:长度;
auto:自动;
self:自我,本我,本身;
//|| text-decoration:none;
120~129
list-style: none;
perspective: 800px;
transform-style:preserve-3d;;
transform:translate(10px,20px,30px) rotateX(0.25turn) rotateY(180deg) rotateZ(360deg) scale(1,2,3);
transition:all 1s linear;
transition:2s all cubic-bezier(1,0,0,1);
animation: name duration timing-function delay iteration-count direction fill-mode;
animation: k1 2s ease-in-out 0s infinite alternate none;
@keyframes k1{ 0%{ transform:translateX(0px); } 50%{ transform:translateX(-50px); } 100%{ transform:translateX(100px); } };
width:1314px;
130~139
height:520px;
background-color:transparent;
margin:5px 10px 15px 20px;
border:5px 10px 5px 10px red solid;
padding:20px 15px 10px 5px;
animation:rotate 20s infinite linear;
opacity:0.7;
position:relative;
position:absolute;
vertical-align:top;
140~149
forward:向前,向前的; backward:向后,向后的; top:顶部; bottom:底部; right:右,在右的; left:左,在左的; box-sizing:border-box;
border-radius:5px 5px 10px 10px;
box-shadow:0px 0px 5px black;
float:right;
.clearfix::before,.clearfix::after{ content:''; display: block; clear: both; visibility: hidden; height: 0; font-size: 0; }
position:fixed;
position:sticky;
left+margin-left+border-left+padding-left+width+padding-right+border-right+margin-right+right = 包含块的内容区的宽度
top +margin-top +border-top+padding-top +height +padding-bottom +border-bottom +margin-bottom +bottom = 包含块的内容区高度
z-index:9;
150~159
font-family: "iconfont";
font-size: 14px;
color:red;
text-align:center;
@font-face{ font-family:"myfont"; src:url("./font/Hello.ttf"); }
border-spacing:0px;
<td colspan="2">c-3</td> //合并单元格,此单元格为两个单元格合并*/
hover:盘旋;
line-height:50px;
display:flex;
160~169
flex-direction:row;
flex-direction:column-reverse;
@media only screen and (min-width:500px) and (max-width:700px),screen and(min-width:1200px){ body{ background-color:#00f; } }
bar:栏,酒吧前台;
wrapper:包装器;
menu:菜单;
icon:图标;
logo:标志;
max-width:1200px;
min-height:500px;
170~179
info:信息;
display:flex;或display:inline-flex;
flex-direction:row(默认值):主轴为水平方向,起点在左端。 row-reverse:主轴为水平方向,起点在右端。 column:主轴为垂直方向,起点在上沿。 column-reverse:主轴为垂直方向,起点在下沿。;
flex-wrap:nowrap(默认):不换行;wrap:换行,第一行在上方;wrap-reverse:换行,第一行在下方;
flex-flow:row nowrap;
justify-content:flex-start(默认值):左对齐 flex-end:右对齐 center: 居中 space-between:两端对齐,项目之间的间隔都相等。 space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。;
align-items:flex-start:与交叉轴的起点对齐。 flex-end:与交叉轴的终点对齐。 center:与交叉轴的中点对齐。 space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。 space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。 stretch(默认值):轴线占满整个交叉轴。;
align-content:flex-start:与交叉轴的起点对齐。 flex-end:与交叉轴的终点对齐。 center:与交叉轴的中点对齐。 space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。 space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。 stretch(默认值):轴线占满整个交叉轴;
order: <integer>;
flex-grow: <number>;
180~189
flex-shrink: <number>;
flex-basis: <length> | auto;
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
align-self: auto | flex-start | flex-end | center | baseline | stretch;
:;
# @沉木 2021/2/24