css

#理解CSS
###浏览器特定厂商前缀

Chorme、Safari -------- -webkit-
Opera----------------------- -o-
Firefox---------------------- -moz-
Internet Explorer--------- -ms-
###弹性盒子 对于父元素设置属性display：-webkit-box，对于想要设置弹性伸缩的子元素设置属性-webkit-box：1；注意：不要设置float属性，可伸缩元素不能包含浮动元素
至于伸缩多个元素，则设置属性-webkit-box：数值，的比例

处理垂直空间

父元素添加属性display：-webkit-box；-webkit-box-align：
box-align的值有：
start：顶部；center：中间；end：底部；strech：填充全部

处理最大尺寸

注意在弹性盒伸缩时不会超过内容元素的最大尺寸值，存在多余空间，-webkit-box-pack属性定义了在所有的可伸缩元素均达到最大尺寸的情况下，多余空间的位置
box-pack的值：
start：多余空间元素右边；end：多余空间元素左边；center：多余空间元素左右边平均；justify：各元素之间

###设置文本样式

处理空白-在需要设置的元素中添加属性whitespace，它的值有：

normal：默认值，空白符被压缩，文本行自动换行；
nowrap：空白符被压缩，文本行不换行；
pre-line：空白符被压缩，文本会在一行排满或遇到换行符是换行；
pre：空白符被保留，文本只在遇到换行符的时候换行；
pre-wrap：空白符被保留，文本会在一行满或遇到换行符时换行。

使用Web字体,建议使用WOFF格式的字体

@font-face{
			font-family：'MyFont'
			src:url('http://.....')

##过渡、动画和变换

过渡，目前，主流浏览器还不能直接支持过渡属性，不过，除了IE，所有浏览器都可已使用厂商前缀实现这些属性#id:hover{transition:}

过渡属性：
transition-delay：指定过渡开始之前的延迟时间，100ms；
transition-duration:指定过渡的持续时间，100ms；
transition-property：指定过渡的属性，用逗号隔开，color，border；
transition-timing-function:指定过渡期间计算中间值的方式，一般选择linear；
transition简写格式：<transtion-property> <transition-duration> <transition-timing-function> <transition-delay>
css例子：
.class{
	-webkit-transition-delay:100ms;
	-webkit-transition-duration:500ms;
}
.class:hover{
	font-size: x-large;
    border:1px solid red;
    color:white;
    background: green;
    padding:4px;
	-webkit-transition:font-size,color,border,background,padding 500ms linear 100ms;
}

反向过渡则#id：transition

###使用动画

animation前面需加厂商前缀

animation-delay：设置动画延迟时间；
animation-duration：设置动画持续时间；
animation-direction：设置动画循环播放的时候是否反向播放；值：normal、alternate；
animation-iteration-count：设置动画的播放次数；值：infinite（循环）、数值；
animation-name：动画名称；
animation-play-state：允许动画暂停和重新播放；值：running、paused；一般用于javascript中使用！！！
animation-timing-function：如何计算中间动画值；值：ease、linear、ease-in、ease-out、ease-in-out、cubic-bezier
animation简写：<animation-name> <animation-duration> <animation-timing-function> <animation-delay> <animation-interation-count>

动画的css分为两部分：第一部分定义了动画的样式，但没有定义动画的属性；第二部分用来定义应用动画的属性
css例子：
.class：hover{
	-webkit-animation：'animationName' 500ms linear 100ms 1		
} 
@-webkit-keyframes animationName{
	to{
		font-size: x-large;
        border:1px solid red;
        color:white;
        background: green;
        padding:4px;
	}
}	

设置初始状态-使用form子句指定另一组初始值 注意：还可以使用百分比实现阶段定义动画

.class：hover{
	-webkit-animation：'animationName' 500ms linear 100ms 1		
} 
@-webkit-keyframes animationName{
	form{
		font-size：xx-small;
		background-color：red；
	}
	to{
		font-size: x-large;
        border:1px solid red;
        color:white;
        background: green;
        padding:4px;
	}
}	

####注意：跟过渡相比，动画的一个优势是你可以将其应用到页面的初始布局中！ ###使用变换

pass。。。。

##使用css属性和特性

设置表格样式

属性：border-collapse--设置相邻单元格的边框处理样式，值：collapse（单线框）、separate默认值（双线框）
属性--border-spacing:设置相邻单元格的边框距离，值：数值
属性--caption-side：表格标题的位置，值：top、bottom；
属性--empty-cells：设置单元格是否显示边框，值：hide、show（默认值）；
属性--table-layout：设置表格的布局样式，值：auto（默认值）、fixed（自设定行宽）

设置列表样式

属性--list-style-type：指定列表中使用的标记的类型，值：none（没有）、decimal（十进制数字）、lower-alpha（小写字母）、upper-alpha（大写字母）
属性--list-style-image：指定图像作为列表标记，值：url（）；
属性--list-style-position：指定标记相对于列表项目盒子的文职，值：inside、outside；
属性--list-style：所有列表特征的简写，值：<list-style-type> <list-style-position> <list-sytle-image>

设置光标样式

属性--cursor，值：auto、crosshair、default、help、move、pointer、progress、text、wait、n-resize、s-resize 、e-resize、w-resize、ne-resize、ne-resize、nw-resize、se-resize、sw-resize

转载于:https://my.oschina.net/crazypineapple/blog/704192