Style CSS样式表

CSS1 CSS2 IE8+

属性 CSS对应属性 描述
定位    
position position 定位方式
left left 距离左边位置
right right 距离右边位置
top top 距离顶部位置
bottom bottom 距离底部位置
标签大小位置    
width width 宽度
height height 高度
minWidth min-width 最小宽度
minHeight min-height 最小高度
maxWidth max-width 最大宽度
maxHeight max-height 最大高度
字体文本及颜色    
font font 字体：综合
fontStyle font-style 字体：斜体
fontVariant font-variant  字体：字母小型化，对汉字没用
fontWeight font-weight 字体：粗细
fontSize font-size 字体：大小
lineHeight line-height 字体：文本行间距
fontFamily font-family 字体：族
     
color color 文本颜色
textAlign text-align 文本对齐，左中右
textDecoration text-decoration 文本装饰，横线
textIndent text-indent 文本缩进
textTransform text-transform 字母大小写转换
whiteSpace white-space 文本溢出换行
wordSpacing word-spacing 字母单词间距
letterSpacing letter-spacing 字母间距
背景    
background background 背景：综合
backgroundImage background-image 背景：图片
backgroundRepeat background-repeat 背景：图片平铺方式
backgroundPosition background-position 背景：图片显示位置
     
backgroundColor background-color 背景颜色
backgroundAttachment background-attachment 背景是否滚动
边框    
border border 四边框：综合
borderWidth border-width 四边框：宽
borderStyle border-style 四边框：样式
borderColor border-color 四边框：颜色
     
borderLeft border-left 左边框：综合
borderLeftWidth border-left-width 左边框：宽度
borderLeftStyle border-left-style 左边框：样式
borderLeftColor border-left-color 左边框：颜色
     
borderRight border-right 右边框：综合
borderRightWidth border-right-width 右边框：宽
borderRightStyle border-right-style 右边框：样式
borderRightColor border-right-color 右边框：颜色
     
borderTop border-top 上边框：综合
borderTopWidth border-top-width 上边框：宽
borderTopStyle border-top-style 上边框：样式
borderTopColor border-top-color 上边框：颜色
     
borderBottom border-bottom 下边框：综合
borderBottomWidth border-bottom-width 下边框：宽
borderBottomStyle border-bottom-style 下边框：样式
borderBottomColor border-bottom-color 下边框：颜色
边框轮廓    
outline outline 四边轮廓：综合
outlineWidth outline-width 四边轮廓：宽
outlineStyle outline-style 四边轮廓：样式
outlineColor outline-color 四边轮廓：颜色
外边距    
margin margin 四边
marginLeft margin-left 左边
marginRight margin-right 右边
marginTop margin-top 上边
marginBottom margin-bottom 下边
内边距    
padding padding 四边
paddingLeft padding-left 左边
paddingRight padding-right 右边
paddingTop padding-top 上边
paddingBottom padding-bottom 下边
浮动    
cssFloat float 浮动方向
clear clear 清除浮动
标签类型    
display display 转换：块标签、行内标签、显示标签、隐藏标签
visibility visibility 隐藏显示，注：隐藏只是不可见，位置大小不会变
列表    
listStyle list-style 标记：综合
listStyleImage list-style-image 标记：图片
listStylePosition list-style-position 标记：位置
listStyleType list-style-type 标记：样式（隐藏标记）
表格    
borderCollapse border-collapse 合并边框
borderSpacing border-spacing （IE9）表格单元格间隔
tableLayout table-layout 表格单元格布局方式
captionSide caption-side （IE9）表格标题位置
emptyCells empty-cells 显示隐藏空单元格
鼠标指针    
cursor cursor 指针样式
内容溢出（滚动条）    
overflow overflow 溢出：显示滚动条、不显示裁剪
裁剪    
clip clip 裁剪显示部分内容
对齐方式    
verticalAlign vertical-align 垂直对齐，多用于标签浮动后水平不对齐问题
其它    
content content  
counterIncrement counter-increment  
counterReset counter-reset  
direction direction  
pageBreakAfter page-break-after  
pageBreakBefore page-break-before  
pageBreakInside page-break-inside  
quotes quotes  
unicodeBidi unicode-bidi  
zIndex z-index 标签覆盖高低

CSS3 Edge

属性 CSS对应属性 描述
布局    
resize resize 标签可调整大小
布局（弹性容器）   display: flex 属性下有效
flex flex 比列：综合
flexGrow flex-grow  比列：增长量
flexShrink flex-shrink 比列：缩减量
flexBasis flex-basis 比列：长度
     
flexFlow flex-flow 排列：综合
flexDirection flex-direction 排列：子标签方向
flexWrap flex-wrap 排列：子标签是否换行
     
order order 标签位置顺序
justifyContent justify-content 标签排列方式
背景    
backgroundClip background-clip 背景绘制区域
backgroundOrigin background-origin 背景图定位
backgroundSize background-size 背景图大小
边框    
borderRadius border-radius 四角：圆度
borderTopLeftRadius border-top-left-radius 上左角：圆度
borderTopRightRadius border-top-right-radius 上右角：圆度
borderBottomLeftRadius border-bottom-left-radius 下左角：圆度
borderBottomRightRadius border-bottom-right-radius 下右角：圆度
     
borderImage border-image 图像边框：综合
borderImageSource border-image-source 图像边框：路径
borderImageSlice border-image-slice 图像边框：偏移
borderImageWidth border-image-width 图像边框：宽度
borderImageOutset border-image-outset 图像边框：超出边框值
borderImageRepeat border-image-repeat 图像边框：平铺、拉伸
边框投影    
boxShadow box-shadow  
透明度    
opacity opacity （IE9）
图像视觉    
filter filter 图像滤镜：模糊、亮度、透明、等（不兼容）
对齐方式    
alignContent align-content  
alignItems align-items  
alignSelf align-self  
属性改变过渡   hover鼠标指向
transition transition 综合
transitionProperty transition-property 指定改变属性
transitionDuration transition-duration 过渡时间
transitionTimingFunction transition-timing-function 过渡快慢曲线
transitionDelay transition-delay 过渡前延时
动画    
animation animation 动画设置
animationName animation-name 动画设置：动画名称
animationDuration animation-duration 动画设置：运行时间
animationTimingFunction animation-timing-function 动画设置：速度方式
animationDelay animation-delay 动画设置：开始前延时
animationIterationCount animation-iteration-count 动画设置：运行次数
animationDirection animation-direction 动画设置：是否反向动画
     
animationFillMode animation-fill-mode  
animationPlayState animation-play-state 运行、暂停
backfaceVisibility backface-visibility 旋转图片，背面不显示
文本光标    
caretColor caret-color 光标颜色
文本    
textDecorationColor text-decoration-color 文本装饰：线条颜色
textDecorationLine text-decoration-line 文本装饰：线条位置
textDecorationStyle text-decoration-style 文本装饰：线条样式，单线、双线、波浪线
textOverflow text-overflow 文本溢出：裁剪、省略号
textShadow text-shadow 文本阴影
textAlignLast text-align-last text-align：justify 属性下，设置文本最后一行对齐方式
wordBreak word-break 允许字母换行
wordWrap word-wrap 允许断开不可换行的单词
userSelect user-select 禁止选取文本（鼠标选取）
     
columns columns 文本划分：每列最小宽度、几列
columnWidth column-width 文本划分：每列最小宽度
columnCount column-count 文本划分：几列
     
columnRule column-rule 文本列间隔样式：宽、样式、颜色
columnRuleWidth column-rule-width 文本列间隔样式：宽
columnRuleStyle column-rule-style 文本列间隔样式：样式
columnRuleColor column-rule-color 文本列间隔样式：颜色
     
columnFill column-fill 文本列填充
columnGap column-gap 文本列之间的间隔宽
超链接（a标签）    
scrollBehavior scroll-behavior 定位跳转：滚动动画
溢出（滚动条）    
overflowX overflow-x （IE9）水平
overflowY overflow-y （IE9）垂直
图像、视频    
objectFit object-fit 宽高比
objectPosition object-position 位置
2D、3D    
perspective perspective 3D视角：俯视
perspectiveOrigin perspective-origin 3D视角：xy轴位置
     
transform transform 3D改变：旋转、缩放、移动、倾斜
transformOrigin transform-origin 3D改变：位置
transformStyle transform-style 3D改变：呈现方式
其它    
columnSpan column-span 标签跨几列
boxSizing box-sizing  
isolation isolation