CSS总结及兼容性问题【笔记】【持续更新】

一、字体
1.color:red;颜色
2.font-family:”Microsoft YaHei”, “黑体”,”方正”；字体名称
3.font-size:10(px/pt);字体大小
4.font-style:normal;字体样式(normal (正常)，italic (斜体)，oblique (斜体))
5.text-decoration:none;指定文字的文本装饰{Undeline(下划线),line-through(贯穿线)，overline(上划线),none(去除下划线)}
6.text-shadow:字体阴影（length平水， length垂直 , opacity模糊度 ,color颜色）
7.text-transform:none;设置字体的大小写(1.none(无做用),2. capitalize (首字母大写), 3.uppercase(整体转成大写)，4.lowercase（整体转小写） )
8.line-height:10px ;行间距
9.font：12px ‘宋体’

二、文本
1.text-indent:26px ;段落缩进
2.text-overflow：clip;溢出后显示;{clip(不显示…)，ellipsis(使用…)}[white-space: nowrap;强制不换行;overflow: hidden;超出隐藏]
3.vertical-align:top;垂直对起
4.text-align:left;水平对起；{left:左；right:右；center:中}
5.white-space：normal ；强制不换行{normal (没有作用)， nowrap（强制不换行）}
6.word-wrap：normal ；normal (没有作用)； break-word；（强制换行））
7.Letter-spacing:Xpx; ;每个字的间距

三、背景
1.background:#000 50px 100px url(“gqjq.jpg”) no-repeat;（颜色，定位距离，导入图片，平铺类型）
2.box-shadow:背景阴影（length平水， length垂直 , opacity模糊度 ,color颜色）
3.opacity: //设置透明度
4.background:rgba() //第四个参数设置透明度
区别：若中间有字的时候，后者不会把字也透明化，而前者会透明化，即文字的透明度是否与背景的透明度一致

四、定位
8.position:static;
{absolute：相对与上级模版绝对定位， fixed：相对与浏览器的绝对定位[会跟着浏览器走的]， relative：把一个模块设置在相对定位}
a.top:向上距离
a.bottom:向上距离
a.left:向上距离
a.right:向上距离
9.z-index:10;层级关系，越高越向上

position理解：

五、尺寸
1.widht:980px;宽度
2.height:100px；高度

六、布局
1.Float：none；浮动{left:左浮动；right:右浮动}
2.Clear：none；清除浮动{left:清左边；right:清右边;both:清两边}
3.Overflow:visible；超出你所设置高度或宽部分隐藏 {visible：不启用；hidden：超出隐藏}
4.display：block；{block(正常模块), none (隐藏对象)， inline-block（模块对象作为块显示）}
5.visibility ：inherit ；对模块内内空的隐藏{inherit (可见), visible （对象可视）, hidden （对象隐藏）}

clear:both //清楚浮动
dislpay:none //隐藏后不占地方
visibility:hidden //隐藏后地方变空白，占地方
overflow:hidden; //设置对象超过了指定高度宽度，超出部分默认隐藏
__overflow-x:scoll;
__overflow-y:scoll; //设置Y轴滚动条

七、内外补丁
1.Margin：10px 5px 10px 5px ;外补丁(上，右，下，左) 顺时针
2.padding：10px 5px 10px 5px ;内补丁(上，右，下，左) 顺时针

八、边框
1.border：1px solid red (边宽度，边类型，边颜色);{left:左；top:上；bottom:下；right:右}
2.border-radius:5px;四个角的弧度5px
3.透明度
a.Opacity：0-1；对整个对象的透明
b.background: rgba(255,0,0,0.5) ;只对背景作透明

九.转换 transform：
2D：
1.translate(x,y)，移动
translateX(x)
translateY(y)
..Z->3D
2.scale(x,y)，缩放
scaleX(x)
scaleY(y)
..Z->3D
3.rotate(angle)，角度旋转
..X->3D
..Y->3D
..Z->3D
4.skew(x-angle,y-angle)，【倾斜】旋转
skewX(angle)
skewY(angle)
无Z轴
3D:
1..translate3d(x,y,z)，移动
2.translateZ(z)、//Z轴
3.scale3d(x,y,z)。，缩放
3.scaleZ(z) //Z轴
5.rotate3d(x,y,z,angle) ，角度旋转
6.rotateX(angle) //X轴 单杠推到的转法
7.rotateY(angle)、 //Y轴 钢管侧转
8.rotateZ(angle) //Z轴 人体靶子飞镖，手表指针转动

9.transform-style: [flat|preserve-3d] [平面 | 3D透视]
该声明应用在3D变换的兄弟元素们的父元素上，也就是舞台元素

详细理解3D
http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/

十.过渡 （transition）

1.transition-property:规定应用过渡的 CSS 属性的名称。
格式:transition-property:width;宽度过渡；
2.transition-duration:定义过渡效果花费的时间。默认是 0。
格式:transition-duration:2s;以2秒钟过渡完成
3.transition-timing-function:规定过渡效果的时间曲线。默认是 “ease”。
格式:transition-timing-function:【linear | ease | ease-in | ease-out | ease-in-out】;
linear:规定以相同速度开始至结束的过渡效果
ease:规定慢速开始，然后变快，然后慢速结束的过渡效果
ease-in:规定以慢速开始的过渡效果
ease-out:规定以慢速结束的过渡效果
ease-in-out:规定以慢速开始和结束的过渡效果
cubic-bezier(n,n,n,n):在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
4.transition-delay:规定过渡效果何时开始。默认是 0。
格式:transition-delay:2s;在过渡效果开始前等待 2 秒

5.transition:简写属性，用于在一个属性中设置四个过渡属性。
格式: transition: width (方式)1s(时间) linear(时间曲线) 2s开始时间 ;

十一.动画
1. @keyframes 定义动画

@keyframes change_id10 {
0%{background: red}
50%{background: blue;width:100px;}
100%{background: yellow}
}

.2. animation 执行动画

/#id10{
animation: change_id10 1s linear 1s infinite alternate;
/*动画名, 时间, 方式, 延迟, 次数, 状态*/
}

常见总结：
居中
margin:auto;
line-height:

box-sizing:border-box; //取消补白内容
Flex 布局教程

注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

display:flex;
align-items: flex-start | flex-end | center | baseline | stretch; //垂直控制
justify-content: flex-start | flex-end | center | space-between | space-around;//左右控制
兼容写法：

/*display:flex*/
display:flex;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-moz-flex;display:-ms-flexbox;

/* 水平居中*/-webkit-box-align:center;-moz-box-align:center;-ms-flex-pack:center;/* IE 10 */-webkit-justify-content:center;-moz-justify-content:center;justify-content:center;/* IE 11+,Firefox 22+,Chrome 29+,Opera 12.1*/

/* 垂直居中 */-webkit-box-pack:center;-moz-box-pack:center;-ms-flex-align:center;/* IE 10 */-webkit-align-items:center;-moz-align-items:center;align-items:center;

兼容性问题

浏览器兼容问题一：不同浏览器的标签默认的外补丁和内补丁不同
问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。
碰到频率:100%
解决方案：css里 *{margin:0;padding:0;}
备注：这个是最常见的也是最易解决的一个浏览器兼容性问题，几乎所有的css文件开头都会用通配符*来设置各个标签的内外补丁是0。

浏览器兼容问题二：块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大
问题症状:常见症状是ie6中后面的一块被顶到下一行
碰到频率：90%（稍微复杂点的页面都会碰到，float布局最常见的浏览器兼容问题）
解决方案：在float的标签样式控制中加入 display:inline;将其转化为行内属性
备注：我们最常用的就是div+css布局了，而div就是一个典型的块属性标签，横向布局的时候我们通常都是用div float实现的，横向的间距设置如果用margin实现，这就是一个必然会碰到的兼容性问题。

浏览器兼容问题三：设置较小高度标签（一般小于10px），在ie6，ie7，遨游中高度超出自己设置高度
问题症状：ie6、7和遨游里这个标签的高度不受控制，超出自己设置的高度
碰到频率：60%
解决方案：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。
备注：这种情况一般出现在我们设置小圆角背景的标签里。出现这个问题的原因是ie8之前的浏览器都会给标签一个最小默认的行高的高度。即使你的标签是空的，这个标签的高度还是会达到默认的行高。

浏览器兼容问题四：行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，ie6间距bug（类似第二种）
问题症状：ie6里的间距比超过设置的间距
碰到几率：20%
解决方案：在display:block;后面加入display:inline;display:table;
备注：行内属性标签，为了设置宽高，我们需要设置display:block;(除了input标签比较特殊)。在用float布局并有横向的margin后，在ie6下，他就具有了块属性float后的横向margin的bug。不过因为它本身就是行内属性标签，所以我们再加上display:inline的话，它的高宽就不可设了。这时候我们还需要在display:inline后面加入display:talbe。

浏览器兼容问题五：图片默认有间距
问题症状：几个img标签放在一起的时候，有些浏览器会有默认的间距，加了问题一中提到的通配符也不起作用。
碰到几率：20%
解决方案：使用float属性为img布局
备注：因为img标签是行内属性标签，所以只要不超出容器宽度，img标签都会排在一行里，但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道。

浏览器兼容问题六：标签最低高度设置min-height不兼容
问题症状：因为min-height本身就是一个不兼容的css属性，所以设置min-height时不能很好的被各个浏览器兼容
碰到几率：5%
解决方案：如果我们要设置一个标签的最小高度200px，需要进行的设置为：{min-height:200px; height:auto !important; height:200px; overflow:visible;}
备注：在B/S系统前端开时，有很多情况下我们又这种需求。当内容小于一个值（如300px）时。容器的高度为300px；当内容高度大于这个值时，容器高度被撑高，而不是出现滚动条。这时候我们就会面临这个兼容性问题。

浏览器兼容问题七：透明度的兼容css设置
方法是：每写一小段代码（布局中的一行或者一块）我们都要在不同的浏览器中看是否兼容，当然熟练到一定的程度就没这么麻烦了。建议经常会碰到兼容性问题的新手使用。很多兼容性问题都是因为浏览器对标签的默认属性解析不同造成的，只要我们稍加设置都能轻松地解决这些兼容问题。如果我们熟悉标签的默认属性的话，就能很好的理解为什么会出现兼容问题以及怎么去解决这些兼容问题。

/* css hack*/
我很少使用hacker的，可能是个人习惯吧，我不喜欢写的代码ie不兼容，然后用hack来解决。不过hacker还是非常好用的。
使用hacker 我可以吧浏览器分为3类：ie6 ；ie7和遨游；其他（ie8 chrome ff safari opera等）
ie6认识的hacker 是下划线_ 和星号 *
ie7 遨游认识的hacker是星号 * （包括上面问题6中的 !important也算是hack的一种。不过实用性较小。）
比如这样一个css设置 height:300px;*height:200px;_height:100px;
ie6浏览器在读到 height:300px的时候会认为高时300px；继续往下读，他也认识*heihgt， 所以当ie6读到*height:200px的时候会覆盖掉前一条的相冲突设置，认为高度是200px。继续往下读，ie6还认识_height,所以他又会覆盖掉200px高的设置，把高度设置为100px；
ie7和遨游也是一样的从高度300px的设置往下读。当它们读到*height200px的时候就停下了，因为它们不认识_height。所以它们会把高度解析为200px；
剩下的浏览器只认识第一个height:300px;所以他们会把高度解析为300px。
因为优先级相同且想冲突的属性设置后一个会覆盖掉前一个，所以书写的次序是很重要的。
最后说一下，严谨型的开发人员会有一套合适自己的RESET.CSS。结合自己的经验尽量规避容易出现不兼容的问题。以减少hack的使用，尽量符合W3C的标准。