CSS3属性大全

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

CSS3单词及属性大全相关推荐

【CSS3】CSS3文本相关属性大全
说明本文的"文本"相关属性控制的是整段.整个div内文本的显示效果,包括文本文字的缩进.段内文字的对齐方式.文本中空白字符的处理等等,需要掌握. 网页源码 <!DOCTYP ...
CSS3新增属性大全！
1 CSS3 基本语法 1.1 CSS3 浏览器私有前缀 Chorme: -webkit- Safari: -webkit- IE; -ms- Firefox: -moz- Opera: -o- 1. ...
半深入理解CSS3 object-position/object-fit属性
半深入理解CSS3 object-position/object-fit属性转载:https://www.zhangxinxu.com/wordpress/2015/03/css3-object-p ...
CSS3 动画实现方法大全
常用效果总结(需要引用animate.css) <!doctype html> <html lang="en"><head><meta c ...
计算机实用基础，计算机常用英语单词Word总结大全44页
计算机和英语有着密切的联系,学好英语可以在很大程度上让计算机学习更加的顺畅熟练! 所以一定要先把计算机英语基础学好,本次分享总结的计算机常用英语单词word总结大全,一共44页! 想要学好计算机和英语 ...
巧用 CSS3 filter(滤镜) 属性
原文链接:CSS3 filter(滤镜) 属性效果预览 filter: grayscale(100%); 定义和使用 filter 属性定义了元素(通常是<img>)的可视效果(例如:模 ...
CSS3之text属性
color: 作用: 指定文本的颜色说明: 该属性在块.行内.行内块的样式表中都可以使用,改变被控制元素内部所有文本的颜色关于颜色值的四种写法: ...
ECharts 提示框组件Tooltip属性大全（包含文本注释）
tooltip: { // 提示框组件:可以设置在全局(tooltip),可以设置在坐标系中(grid.tooltip.polar.tooltip.single.tooltip),可以设置在系列中(s ...
关于——css3新增属性有哪些？css3中新增属性（部分总结）
css3中新增属性(部分总结) 一.css3新增边框属性 border-color:为边框设置多种颜色 border-image:属性是使用图片来创建边框 border-radius:圆角边框 box ...

CSS3单词及属性大全

CSS3属性大全

CSS3单词及属性大全相关推荐

最新文章

热门文章