盒模型属性

【宽高width/height】

复制代码

(全兼容)widthheight(IE6-不支持)min-widthmax-widthmin-heightmax-height

复制代码

【内边距padding】

padding

【边框border】

复制代码

(全兼容)borderborder-widthborder-colorborder-style(IE8-不支持)border-radius(IE10-不支持)border-p_w_picpathborder-p_w_picpath-sourceborder-p_w_picpath-sliceborder-p_w_picpath-widthborder-p_w_picpath-outsetborder-p_w_picpath-repeat(只有firefox支持,需要添加-moz-前缀)border-colors

复制代码

【外边距margin】

复制代码

(全兼容)margin(IE不支持,且需要添加webkit或moz前缀)margin-startmargin-end(只有chrome和safari支持,且需要添加webkit前缀)-webkit-margin-before-webkit-margin-after

复制代码

【轮廓outline】

复制代码

(IE7-不支持)outlineoutline-widthoutline-coloroutline-style(IE不支持)outline-offset

复制代码

【box-sizing】

  [注意]只有firefox支持padding-box属性值

(IE7-不支持)box-sizing

 

布局类属性

【display】

  [注意]IE7-浏览器不支持table类属性值

(全兼容)display

【浮动】

(全兼容)floatclear

【定位】

  [注意]IE6-不支持固定定位position:fixed

复制代码

(全兼容)positionleftrighttopbottomz-index

复制代码

【溢出相关】

复制代码

(全兼容)overflow overflow-x overflow-y clip visibility (IE不支持) resize

复制代码

【flex】

复制代码

(IE9-不支持)flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-contentalign-selfflex-basisflex-growflex-shrinkflexorder

复制代码

【多列布局】

复制代码

(IE10+和chrome浏览器支持标准写法,firefox、safari浏览器及移动端android、IOS需要添加前缀)column-widthcolumn-countcolumn-gapcolumn-rulecolumn-span(firefox不支持该属性)columns(只有firefox支持带前缀的column-fill属性)column-fill

复制代码

【grid】

复制代码

(IE9-不支持,IE10+需要添加-ms-前缀,android4.4.4-不支持,IOS10.2-不支持)grid-template-rowsgrid-template-columnsgrid-template-areasgrid-column-gapgrid-row-gapgrid-gapgrid-row-startgrid-row-endgrid-rowgrid-column-startgrid-column-endgrid-columngrid-areagrid-auto-flowgrid-auto-rowsgrid-auto-columnsjustify-itemsjustify-selfalign-itemsalign-self

复制代码

 

文本类属性

【字体font】

复制代码

(全兼容)fontfont-familyfont-sizefont-stylefont-variantfont-weightline-height@font-face

复制代码

【首行缩进text-indent】

(全兼容)text-indent

【对齐】

  [注意]IE7-浏览器中vertical-align的百分比值不支持小数行高

复制代码

--align(safari浏览器、IOS、androis4.4-浏览器不支持)text-align-last

复制代码

【间隔】

(全兼容)word-spacingletter-spacing

【大小写text-transform】

(全兼容)text-transform

【划线text-decoration】

(全兼容)text-decoration

【空白符white-space】

  [注意]IE7-浏览器不支持pre-line和pre-wrap这两个属性值

(全兼容)white-space

【换行】

  [注意1]W3C建议使用overflow-wrap替换word-wrap

  [注意2]移动端目前基本都不支持word-break的属性值keep-all 

复制代码

--wrap

复制代码

【文本方向】

复制代码

-webkit--

复制代码

【文本溢出text-overflow】

(全兼容)text-overflow

【文本阴影text-shadow】

(IE9-不支持)text-shadow

 

修饰类属性

【背景background】

复制代码

(全兼容)backgroundbackground-colorbackground-p_w_picpathbackground-repeatbackground-position(IE8-不支持)background-p_w_uploadbackground-clipbackground-size

复制代码

【前景和透明度】

(全兼容)color(IE8-不支持)opacity

【颜色模式】

  [注意]IE7-不支持color:transparent,但支持background-color: transparent和border-color: transparent

复制代码

-

复制代码

【光标cursor】

  [注意]IE7-不支持拓展样式

(全兼容)cursor

【过渡transition】 

复制代码

(IE9-不支持,safari3.1-6、IOS3.2-6.1、android2.1-4.3需要添加-webkit-前缀)transition-propertytransition-durationtransiton-timing-functiontransition-delaytransition

复制代码

【变形transform】

复制代码

(IE9-不支持,safari3.-、android2.-.、IOS3.----

复制代码

【渐变gradient】

  IE9-不支持,safari4-5、IOS3.2-4.3、android2.1-3只支持线性渐变,且需要添加-webkit-;safari5.1-6、IOS5.1-6.1、android4-4.3支持线性和径向渐变,且需要添加-webkit-

【动画animation】

复制代码

(IE9-不支持;safari4-8、IOS3.2-8.4、android2.1-4.4.4需要添加-webkit-前缀)animationanimation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-countanimation-directionanimation-play-stateanimation-fill-mode

复制代码

【混合模式】

(IE浏览器、android4.4-不支持,safari和IOS需要添加-webkit-前缀)mix-blend-modebackground-blend-modeisolation

【滤镜filter】

(IE浏览器及android4.3-浏览器不支持,android4.4+需要添加-webkit-前缀)filter

【倒影box-reflect】

  只有chrome和safari浏览器支持,且需要添加-webkit-前缀

【will-change】

(IE13+、chrome49+、safari9.1+、IOS9.3+、Android52+)will-change

 

其他类属性

【表格】

复制代码

(全兼容)border-collapsetable-layoutcaption-side(IE7-不支持)border-spacingempty-cells

复制代码

【分页】

复制代码

(全兼容)page-break-afterpage-break-beforepage-break-inside(IE7-不支持)orphans(IE及手机端不支持)windows

复制代码

【选择器】

复制代码

(全兼容)通配选择器   *元素选择器   div类选择器     .boxID选择器     #box后代选择器   div a分组选择器   h1,p(IE6-不支持)属性选择器    h1[class]子元素选择器  ul > li相邻兄弟选择器 div + p(IE7-不支持)通用兄弟选择器 div ~ p

复制代码

【伪类】

复制代码

(全兼容):link:visited(IE6-不支持给以外的其他元素设置伪类):hover:active  (IE7-不支持):focus:lang() (IE8-不支持):target:enabled   :disabled   :checked :nth-child(n):nth-last-child(n):first-child:last-child:only-child:nth-of-type(n):nth-last-of-type(n):first-of-type:last-of-type:only-of-type:root:not:empty:target

复制代码

【伪元素】

复制代码

(只有当选择器部分和左大括号之间有空格时,IE6-浏览器才支持):first-letter:first-line(IE7-不支持):before:after(IE8-不支持)::selection

复制代码

【关键字】

复制代码

(IE7-浏览器不支持)inherit(IE浏览器不支持)initial(IE不支持,safari9-不支持,ios9.2-不支持,android4.4.4-不支持)unsetall(只有safari9.1+和ios9.3+支持)revert

复制代码

【calc】 

  [注意]android4.4-4.4.4只支持加法和减法。IE9不支持用于backround-position

(IE8-、safari5.1-、ios5.1-、android4.3-不支持)calc

【单位】

复制代码

(全兼容)pxincmmmqptpcemexch(IE8-不支持)rem(IE8-浏览器不支持,IOS7.1-不支持,android4.3-不支持,对于vmax所有IE浏览器都不支持)vhvwvminvmax