CSS属性详解

CSS属性组：
  动画、背景、网格、边框轮廓、超链接、分页、框、线框、Ruby、颜色、字幕、页面媒体、定位等等
动画属性

• @keyframes:定义一个动画，@keyframes定义的动画名称用来被animation-name所使用
• animation:复合属性。检索或设置对象所应用的动画特效
• animation-name:检索或设置对象所应用的动画名称，必须与规则@keyframes配合使用，因为动画名有@kayframes定义
• animation-duration:检索或设置动画的延续时间
• animation-timing-function:检索或设置动画的过度类型
• animation-delay:检索或设置动画的延时时间
• animation-iteration-count:检索或设置动画的循环次数
• animation-direction:检索或设置动画是否反向播放
• animation-paly-state:检索或设置对象动画的状态

背景属性

• background:复合属性。设置对象的背景特征
• background-attachment:设置或检索背景图像是随对象内容滚动还是固定的。必须先指定background-image属性

		body
		{ 
		    background-image:url('smiley.gif');
		    background-repeat:no-repeat;
		    background-attachment:fixed;
		}

设置图片浮动于固定位置

• backgroung-image:设置或检索对象的背景图像
• background-position:设置或检索对象的背景图像位置，必须先指定backgroung-image属性
• backgroung-repeat:设置或检索对象的背景图像如何铺排填充。必须先指定background-image属性
• background-clip:指定对象的背景图像向外剪裁的区域
  该对象指定背影颜色内容的大小默认为包括margin在内的全屏背景

		div
		{
		    background-color:yellow;
		    background-clip:content-box;或padding-box;
		}

• background-origin:设置或检索对象的背景图像计算background-position时的参考原点
• background-size:检索或设置对象的背景图像的尺寸的大小

边框或轮廓属性

• border:复合属性。设置对象边框的特征
• border-bottom:复合属性。设置对象底部边框的特征
• boeder-bottom-color:设置或检索对象底部边框的颜色
• border-bottom-style:设置或检索对象底部边框的样式
• border-bottom-width:设置或检索对象底部边框的宽度
• border-color:设置或检索对象边框的颜色
• border-left:复合属性。设置对象左边边框特性
• border-left-color:设置或检索对象的左边边框颜色
• border-left-style:设置或检索对象左边边框的样式
• border-left-width:设置或检索对象左边边框的宽度
• border-right:复合属性。设置对象右边边框特性
• border-right-color:设置或检索对象的右边边框颜色
• border-right-style:设置或检索对象右边边框的样式
• border-right-width:设置或检索对象右边边框的宽度
• border-style:设置或检索对象边框属性
• border-top:复合属性。设置对象上边边框特性
• border-top-color:设置或检索对象的上边边框颜色
• border-top-style:设置或检索对象上边边框的样式
• border-top-width:设置或检索对象上边边框的宽度
• border-width:设置或检索对象边框的宽度
• outline:复合属性。设置或检索对象外的线条轮廓
• outline-color:设置或检索对象外的轮廓的颜色
• outline-style:设置或检索对象外的线条轮廓的样式
• outline-width:设置或检索对象外线条轮廓的宽度
• border-image:设置或检索对象边框样式使用的图像来填充
• border-image-outset:规定边框图像超过边框的量
• border-image-slice:规定图像边框的向内偏移。
• border-image-repeat:规定图像边框是否应该被重复（repeated）、拉伸（stretched）或铺满（rounded)
• border-image-width:规定图像边框宽度
• border-radius:设置或检索对象使用的圆角边框
• box-decration-break:规定行内元素被折行
• box-shadow:向边框添加一个或多个阴影、

盒子属性

• overflow-x:如果内容溢出了元素内容区域，是否对内容的左右边缘进行裁剪
• overflow-y:如果内容溢出了元素内容区域，是否对内容的上下边缘进行裁剪
• overflow-style:规定溢出元素的首选滚动方法
• rotation:围绕由ratation-point属性定义的点对元素进行旋转（目前无浏览器支持）
• rotation-point:规定距离上左边框的偏移点

颜色属性

• color-profile:允许使用源的颜色配置文件的默认以外的规范
• opacity:设置一个元素的透明度级别
• rendering-intent:允许超过默认颜色配置文件渲染意向的其他规范

内边距属性

• padding:在一个声明中设置所有填充属性
• padding-bottom:设置元素的底填充
• padding-left:设置元素的左填充
• padding-right:设置颜色的右填充
• padding-top:设置颜色的上填充

媒体页面内容属性

• bookmark-label:指定书签的标签
• bookmark-level:指定了书签的级别
• bookmark-target:指定了书签链接的目标
• float-offset:在相反的方向推动浮动的元素，他们一直具有浮动
• hyphenate-before:指定一个断字的单词断字前的最少字符
• hyphenate-after:指定一个断字的单词断字后的最少字符
• hyphenate-character:指定了一个断字发生时，要显示的字符串
• hyphenate-lines:表示连续断字的行在元素的最大数目
• hyphenate-resource:外部资源指定一个逗号分隔的列表，可以帮助确定浏览器的断字点
• hyphens:设置如何分割单词以改善该段的布局
• image-resolution:指定了正确的图像分辨率
• marks:将crop and/or cross标志添加到文档
• string-set

尺寸属性

• height:设置元素的高度
• max-height:设置元素的最大高度
• max-width:设置元素的最大宽度
• min-height:设置元素的最小高度
• min-width:设置元素的最小宽度
• width:设置元素的宽度

弹性盒子模型(Flexible box)属性

• flex:符合属性。设置或检索弹性盒子对象的子元素如何分配空间
  让所有弹性盒模型对象的子元素都有相同的长度，且忽略它们内部的内容：

		div{
			flex:1;
		}

• flex-grow:设置或检索弹性盒的扩充比率

• flex-shrink:设置或检索弹性盒的收缩比率

• flex-basis:设置或检索弹性盒伸缩基准值

• flex-flow:复合属性。设置或检索弹性盒模型对象的子元排列方式
  

• flex-direction:该属性通过定义flex容器的主轴方向来决定flex子项在flex容器中的位置

• flex-wrap:该属性控制flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向

• align-content:在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直）

• align-items:定义flex子项在flex容器的当前行的侧轴方向上的对齐方式（主要）

• align-self:定义flex子项单独在侧轴方向上的对齐方式

• justify-content:设置或检索弹性盒子元素在主轴方向上的对齐方式（主要）

• order:设置或检索弹性盒模型对象的子元素出现的顺序

弹性盒子模型属性（旧）

• box-align:指定何如对齐一个框的子元素
• box-direction:指定在哪个方向，显示一个框的子元素
• boe-flex:指定一个框的子元素是否是灵活的或固定的大小
• box-flex-group:指派灵活的元素到flex组
• box-lines:每当它在父框的空间运行时，是否指定将再上一个新的行列
• box-ordinal-group:指定一个框的子元素的显示顺序
• box-orient:指定一个框的子元素是否在水平或垂直方向应铺设
• box-pack:指定横向盒在垂直框的水平位置和垂直位置

字体属性

• font:在一个声明中设置所有字体属性
• font-family:规定文本的字体系列
• font-style:规定文本的字体样式（如正常或者倾斜）
• font-variant:规定文本的字体样式
• font-weight:规定字体的粗细
• @font-face:一个规则，允许网站下载并使用其他web-safe字体的字体
• font-size-adjust:为元素规定aspect值
• font-stretch:伸缩或拉伸当前的字体系列

内容生成属性

• content:与::before以及::after伪元素配合使用，来插入生成的内容
• content-increment:递增或递减一个或多个计数器
• counter-reset:创建或重置一个或多个计数器
• quotes:设置嵌套引用的引号类型
• crop:允许replaced元素只是作为一个对象代替整个对象的矩形区域
• move-to:从流中删除元素，然后在 文档后面的点上重新插入
• page-policy:判定基于页面给定的元素的适用于计算器的字符串值

网格属性

• grid-columns:指定在网格中每个列的宽度
• grid-rows:指定在网格中每列的高度

超链接属性

• target:简写属性设置target-name,target-new,和target-position属性
• target-name:指定在何处打开链接
• target-new:指定是否有新的目标链接打开在一个新窗口或在现有窗口打开标签
• target-position:指定应该放置新的目标链接

线框属性
alignment-adjust 允许更精确的元素的对齐方式
alignment-baseline 其父级指定的内联级别的元素如何对齐
baseline-shift 允许重新定位相对于dominant-baseline的dominant-baseline
dominant-baseline 指定scaled-baseline-table
drop-initial-after-adjust 设置下拉的主要连接点的初始对齐点
drop-initial-after-align 校准行内的初始行的设置就是具有首字母的框使用初级连接点
drop-initial-before-adjust 设置下拉的辅助连接点的初始对齐点
drop-initial-before-align 校准行内的初始行的设置就是具有首字母的框使用辅助连接点
drop-initial-size 控制局部的首字母下沉
drop-initial-value 激活一个下拉式的初步效果
inline-box-align 设置一个多行的内联块内的行具有前一个和后一个内联元素的对齐
line-stacking 一个速记属性设置line-stacking-strategy, line-stacking-ruby,和line-stacking-shift属性
line-stacking-ruby 设置包含Ruby注释元素的行对于块元素的堆叠方法
line-stacking-shift 设置base-shift行中块元素包含元素的堆叠方法
line-stacking-strategy 设置内部包含块元素的堆叠线框的堆叠方法
text-height 行内框的文本内容区域设置block-progression维数

列表属性

• list-style:在一个声明中设置所有的类表属性
• list-style-image:将图像设置为列表项标记
• list-style-position:设置列表项标记的放置位置
• list-style-type:设置列表项标记的类型

外边距属性

• margin:在一个声明中设置所有外边距属性
• margin-bottom:设置元素下外边距
• margin-left:设置属性左外边距
• margin-top:设置属性上外边距
• margin-right:设置属性右外边距

字幕属性

• marquee-direction:设置内容运动的方向
• marquee-play-count:设置内容移动的次数
• marquee-sqeed:设置内容滚动的速度有多快
• marquee-style:设置内容的样式

多列属性

• column-count:指定元素应该被分的列数
• column-fill:指定如何填充列
• column-gap:指定列之间的距离
• column-rule:对于所有column-rule-*属性的简写属性
• column-rule-color:指定列之间的颜色规则
• column-rule-style:指定列之间的样式规则
• column-rule-width:指定列之间的宽度规则
• column-span:指定元素应该跨越多少列
• column-width:指定列的宽度（注意保暖和column-count一起使用）
• columns:缩写属性设置列宽和列数

页面媒体属性

• fit:如果其宽度和高度都不是auto给出的提示，如何大规模替换元素
• fit-position:判定方框内对象的对齐方式
• image-orientation:指定用户代理适用于图像中的向右或顺时针方向旋转
• page:指定一个元素应显示的页面的特定类型
• size:指定包含BOX的页面的内容的大小和方位

定位属性

• bottom:设置定位元素下外边距边界与其包含块下边界的偏移
• clear:规定元素的哪一侧不允许其他浮动元素
• clip:剪裁绝对单位元素
• cursor:规定要显示的光标的类型
• display:规定元素应该生成的框的类型
• float:规定框是否应该浮动
• left:设置定位元素左外边距边界与包含块左边界之间的距离
• overflow:规定当内容溢出时框发生的事情
• position:规定元素的单位类型
• right:设置定位元素右外边距边界与包含右边界之间的偏移
• top:设置定位元素上外边距边界与包含上边界之间的偏移
• visibility:规定元素是否可见
• z-index:设置元素的堆叠顺序

分页属性

• orphans:设置当元素内部发生分页时必须要在页面底部保留的最少行数
• page-break-after:设置元素后的分页行为
• page-break-before:设置元素前的分页行为
• page-break-inside:设置元素内部的分页行为
• widows:设置当元素内部放生分页时必须在顶部保留的最少行数

Ruby属性
ruby-align 控制Ruby文本和Ruby基础内容相对彼此的文本对齐方式
ruby-overhang 当Ruby文本超过Ruby的基础宽，确定ruby文本是否允许局部悬置任意相邻的文本，除了自己的基础
ruby-position 它的base控制Ruby文本的位置
ruby-span 控制annotation 元素的跨越行为

语音属性

• mark:缩写属性设置mark-before和mark-after属性
• mark-after:允许命名的标记连接到音频流
• mark-before:允许命名的标记连接到音频流
• phonemes:指定包含文本的相应元素中的一个音标发音
• rest:一个缩写属性设置rest-before和rest-after
• rest-after:一个元素的内容讲完之后，指定要休息一下或遵守韵律边界
• rest-before:一个元素的内容讲完之后，指定要休息一下或遵守韵律边界
• voice-balance:指定了左，右声道之间的平衡
• voice-duration:指定应采取所选的内容的长度
• voice-pitch:指定平均说话的声音的音调（频率）
• voice-pitch-range:指定平均间距的变化
• voice-rate:控制语速
• voice-stress:指示着重力度
• voice-volumn:语音合成是指波形输出幅度

表格属性

• border-collapse:规定是否合并表格边距
• border-spacing:规定相邻单元边框之间的距离
• caption-side:规定表格标题的位置
• empty-cells:规定是否显示表格的空单元格上的边框和背景
• table-layout:设置用于表格的布局算法

文本属性

• color:设置文本的颜色
• direction:规定文本的方向/书写方向
• letter-spacing:设置字符间距
• line-height:设置行高
• text-align:规定文本的水平对齐方式
• text-decoration:规定添加的文本的修饰效果
• text-indent:规定文本首行的缩进
• text-transform:控制文本的大小写
• unicode-bidi:
• vertical-align:设置元素的垂直对齐方式
• white-space:设置怎样给一个元素空间留白
• word-spacing:设置单词间距
• text-emphasis:向元素的文本应用重点标记以及重点标记的前颜色
• hanging-punctuation:指定一个标点是否可能超出行框
• punctuation-trim:指定一个标点符号是否要去掉
• text-align-last:当 text-align 设置为 justify 时，最后一行的对齐方式。
• text-justify:当 text-align 设置为 justify 时指定分散对齐的方式。
• text-outline:设置文字的轮廓
• text-overflow:指定当文本溢出包含的元素，应该发生什么
• text-shadow:为文本添加阴影
• text-wrap:指定文本换行规则
• word-break:指定非CJK文字的断行规则
• word-wrap:设置为浏览器是否对过长的单词进行换行

2D/3D转换属性

• transform:适用于2D或3D转换的元素
• transform-origin:允许你更换元素的位置
• transform-style:3D空间中的指定如何嵌套元素
• perspective:指定3D元素是如何查看透视图
• perspective-origin:指定3D元素底部位置
• backgace-visibolity:定义一个元素是否应该是可见的，不对着屏幕时

过度属性

• transition:此属性是一下属性的简写形式
• transition-property:设置用来进行过度的CSS属性
• transition-duration:设置过度进行的时间长度
• transition-timing-function:设置过度进行的时序函数
• transition-delay:设置过度开始的时间

用户外观属性

• appearance:定义元素的外观样式
• box-sizing:允许您为了适应区域以某种方式定义某些元素
• icon：为元素指定图标
• nav-down:指定用户按下键时向下导航的位置
• nav-index:指定导航（tab）顺序
• nav-left:指定用户按下左键向左导航的位置
• nav-right:指定用户按下右键向右导航的位置
• nav-up:指定用户按下上键向上导航的位置
• outline-offset:设置轮廓框架在border边缘外的位移
• resize:定义元素是否可以改变大小

注：以上学习来源于菜鸟驿站学习平台，更多查看菜鸟官网。