CSS3单词及属性大全

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; /*文本修饰，常用于去掉a标签的下划线*/
  120~129
     list-style: none; /*列表样式，常用于去掉ul标签下的li标签前面的项目符号*/
     perspective: 800px; /*设置视距并开启页面3d透视效果 */
     transform-style:preserve-3d;; /*开启元素3D效果 */
     transform:translate(10px,20px,30px) rotateX(0.25turn) rotateY(180deg) rotateZ(360deg) scale(1,2,3); /*元素形变（坐标系的平移(translate)、缩放(scale)、旋转(rotate)、镜像），沿X,Y,Z轴平移10px,20px,30px,坐标系的X,Y,Z轴分别旋转90度，180度，360度，坐标系X,Y,Z轴刻度缩放至1倍，2倍，3倍（调用scale(1,-1)来绘制水平镜像，或者调用scale(-1,1)来绘制垂直镜像）*/
     transition:all 1s linear; /* 过渡效果，所有属性，全过程经历1秒，匀速运动*/
     transition:2s all cubic-bezier(1,0,0,1); /* 过渡效果，全过程经历2s,依照特定的贝尔塞曲线运动*/
     animation: name duration timing-function delay iteration-count direction fill-mode; /*动画效果，已经声明的动画名字，经历时间，时序函数，延时时长，执行次数，运动方向，填充模式 */
     animation: k1 2s ease-in-out 0s infinite alternate none; /*动画效果，使用已经声明好的动画k1,经历2s,先加速后减速，延时为0s,无限循环，正向运行完成后准备反向运行，动画完成后元素回到原来的状态 */
     @keyframes k1{ 0%{ transform:translateX(0px); } 50%{ transform:translateX(-50px); } 100%{ transform:translateX(100px); } }; /*自定义动画k1,动画进度0%，50%，100%时的状态(参考物一直为元素未开启动画效果时的状态)为元素停在原点，沿X轴反方向移动了50px的位置,沿X轴反方向移动了100px的位置*/
     width:1314px; /*元素宽度 */
  130~139
     height:520px; /*元素高度 */
     background-color:transparent; /*元素背景颜色设置为透明 */
     margin:5px 10px 15px 20px; /*外边距，顶部，右，底部，左外边距分别设置为5px,10px,15px,20px */
     border:5px 10px 5px 10px red solid; /*边框，顶部，右，底部，左边框分别设置为5px,10px,5px,10px,红色,实线 */
     padding:20px 15px 10px 5px; /*内填充，顶部，右，底部，左内边距分别设置为20px,15px,10px,5px */
     animation:rotate 20s infinite linear; /*动画效果，使用的动画名字为rotate,经历20s,无限循环，匀速变化 */
     opacity:0.7; /*元素的不透明设置为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; /*圆角半径，顶部，右，底部，左圆角半径分别为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; } /*清除浮动，规定clearfix为清除浮动的类 */
     position:fixed; /* 固定定位也是一种绝对定位，所以固定定位大部分特点和绝对定位一样 唯一不同的是固定定位永远参照于浏览器的视口（可视区域，视口是固定的，而html的大小可以变）进行定位（一般用于广告和导航条）*/
     position:sticky; /*粘滞定位和相对定位的特点基本一致，不同的是粘滞定位可以在元素到达某个位置时将其固定(例：滚动条的滑块) */
     left+margin-left+border-left+padding-left+width+padding-right+border-right+margin-right+right = 包含块的内容区的宽度 /*定位元素水平方向需要遵循的等式，过度约束时margin-right可能会强制改变 */
     top +margin-top +border-top+padding-top +height +padding-bottom +border-bottom +margin-bottom +bottom = 包含块的内容区高度 /*定位元素垂直方向需要遵循的等式，过度约束时bottom可能会强制改变*/
     z-index:9; /*元素的层级，数值越大层级越高，优先显示 */
  150~159
     font-family: "iconfont"; /*字体符号集，引入图标字体集"iconfont" */
     font-size: 14px; /*字体大小设置为14px */
     color:red; /*字体颜色设置为红色 */
     text-align:center; /*字体居中 */
     @font-face{ font-family:"myfont"; src:url("./font/Hello.ttf"); } /*指定字体的名字，服务器中字体的路径 */
     border-spacing:0px; /*指定边框之间的距离为0px */
     <td colspan="2">c-3</td> //合并单元格，此单元格为两个单元格合并*/
     hover:盘旋;/* */
     line-height:50px; /*行高，如果行高刚好等于height相当于垂直居中，当height<line-height时，行高可以撑起元素 */
     display:flex; /*弹性盒，设置元素为弹性元素,其所有子元素将自动成为弹性盒的成员,float、clear和vertical-align属性将失效，且遵循弹性布局 */
  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; } } /* all 所有设备 print 打印设备 screen 带屏幕的设备 speech 屏幕阅读器 响应式布局 - 网页可以根据不同的设备容器大小呈现出不同的效果 - 使用响应式布局，可以使一个网页适用于所有设备 - 响应式布局的就是使用媒体查询 - 通过媒体查询，可以为不同的设备，或设备不同状态来分别设置样式 */
     bar:栏，酒吧前台; /* */
     wrapper:包装器; /* */
     menu:菜单; /* */
     icon:图标; /* */
     logo:标志; /* */
     max-width:1200px; /*限制最大宽度为1200px */
     min-height:500px; /*限制最小高度为500px */
  170~179
     info:信息; /* */
     display:flex;或display:inline-flex; /*开启弹性布局，块级弹性布局，行内型弹性布局，弹性盒，设置元素为弹性元素,其所有子元素将自动成为弹性盒的成员,float、clear和vertical-align属性将失效，且遵循弹性布局 */
     flex-direction:row（默认值）：主轴为水平方向，起点在左端。 row-reverse：主轴为水平方向，起点在右端。 column：主轴为垂直方向，起点在上沿。 column-reverse：主轴为垂直方向，起点在下沿。; /*flex-direction：主轴的方向（即子项目的排列方向）。 */
     flex-wrap:nowrap（默认）：不换行;wrap：换行，第一行在上方;wrap-reverse：换行，第一行在下方; /*默认情况下，子项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。 */
     flex-flow:row nowrap; /*flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。 */
     justify-content:flex-start（默认值）：左对齐 flex-end：右对齐 center： 居中 space-between：两端对齐，项目之间的间隔都相等。 space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。; /*justify-content属性定义了子项目在主轴上的对齐方式。 */
     align-items:flex-start：与交叉轴的起点对齐。 flex-end：与交叉轴的终点对齐。 center：与交叉轴的中点对齐。 space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。 space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。 stretch（默认值）：轴线占满整个交叉轴。; /*align-items属性定义项目在交叉轴上如何对齐。 */
     align-content:flex-start：与交叉轴的起点对齐。 flex-end：与交叉轴的终点对齐。 center：与交叉轴的中点对齐。 space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。 space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。 stretch（默认值）：轴线占满整个交叉轴; /*align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。 */
     order: <integer>; /*order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。 */
     flex-grow: <number>; /* default 0 */
  180~189
     /*flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。 */
     flex-shrink: <number>; /* default 1 */
     /*flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。 */
     flex-basis: <length> | auto; /* default auto */
     /*flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。 */
     flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] /*flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。 */
     align-self: auto | flex-start | flex-end | center | baseline | stretch; /*align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。 */
     :; /* */

     # @沉木 2021/2/24