一些常用css属性

img 垂直居中

 vertical-align:middle;

多行文本超出省略显示

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-line-clamp: 2;行数

overflow: hidden;

下划线

text-decoration : none || underline || blink || overline || line-through 

强制换行

1 word-break: break-all; 只对英文起作用，以字母作为换行依据。

2 word-wrap: break-word; 只对英文起作用，以单词作为换行依据。

3 white-space: pre-wrap; 只对中文起作用，强制换行。

word-break:break-all 和 word-wrap:break-word 都是能使其容器如DIV的内容自动换行，它们的区别在于：

1、word-break:break-all 

假设div宽度为450px，它的内容就会到450px自动换行，如果该行末端有个很长的英文单词，它会把单词截断，一部分保持在行尾，另一部分换到下一行。

2、word-wrap:break-word 

例子与上面一样，但区别就是它会把整个单词看成一个整体，如果该行末端宽度不够显示整个单词，它会自动把整个单词放到下一行，而不会把单词截断掉。

超出隐藏实现

white-space:nowrap; 
overflow:hidden;
text-overflow:ellipsis; 

white-space:nowrap; 是禁止换行。

overflow:hidden; 是让多出的内容隐藏起来，否则多出的内容会撑破容器。

text-overflow:ellipsis; 让多出的内容以省略号...来表达。但是这个属性主要用于IE等浏览器，

Opera浏览器用-o-text-overflow:ellipsis; 而Firefox浏览器没有这个功能，多出的内容只能隐藏起来。

清除浮动

（1）给父级手动添加高度

（2）给父级添加overflow：hidden

（3）给浮动的元素添加一个同级的标签，在标签内写clear：both；

（4）给父级添加一个after的伪类，在父级：after内写{

      content:".";

       visibility:hidden;

       display:block;

       clear:both;}

文字撑满

text-align: justify;

规定段落中的文本不进行换行：

white-space: nowrap

值描述normal默认。空白会被浏览器忽略。pre空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。nowrap文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。pre-wrap保留空白符序列，但是正常地进行换行。pre-line合并空白符序列，但是保留换行符。inherit规定应该从父元素继承 white-space 属性的值。

css去除下面滚动条(有时滚动条会遮盖元素内容【visible】)

overflow:hidden 或者 visible

table:

border-collapse:collapse;用来消除单元格间距

固定定位失效

设置margin固定定位会失效，要设置padding

css中overflow滑动效果在IOS中不流畅

-webkit-overflow-scrolling: touch;

轮廓

outline

透明度

opacity

取消input默认样式

outline: none;

opacity: 0;

css3

浏览器前缀：

-moz- /* 火狐等使用Mozilla浏览器引擎的浏览器 */
-webkit- /* Safari, 谷歌浏览器等使用Webkit引擎的浏览器 */
-o- /* Opera浏览器(早期) */
-ms- /* Internet Explorer (不一定) */

边框：

border-radius： 圆角

box-shadow ：阴影

border-image： 图片创建边框

注释：对于 border-image，Safari 5 以及更老的版本需要前缀 -webkit-。

Opera 支持 border-radius 和 box-shadow 属性，但是对于 border-image 需要前缀 -o-

背景：

background-clip：规定背景的绘制区域。

background-size： 背景图片的尺寸

background-origin ：背景图片的定位区域 背景图片可以放置于 content-box、padding-box 或 border-box 区域

文本效果：

text-shadow：文本阴影（水平阴影、垂直阴影、模糊距离，以及阴影的颜色）

word-wrap：文本强制文本进行换行

大部分浏览器不支持

hanging-punctuation：规定标点字符是否位于线框之外（none | first|last | allow-end | force-end）。
punctuation-trim：规定是否对标点字符进行修剪。
text-align-last：设置如何对齐最后一行或紧挨着强制换行符之前的行。
text-emphasis：向元素的文本应用重点标记以及重点标记的前景色。
text-justify：规定当 text-align 设置为 "justify" 时所使用的对齐方法。
text-outline：规定文本的轮廓。
text-overflow：规定当文本溢出包含元素时发生的事情。
text-shadow：向文本添加阴影。
text-wrap：规定文本的换行规则。
word-break：规定非中日韩文本的换行规则。
word-wrap：允许对长的不可分割的单词进行分割并换行到下一行。

字体：

@font-face 规则中，您必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文件。
如需为 HTML 元素使用字体，请通过 font-family 属性来引用字体的名称 (myFirstFont)：

@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE9+ */
}

div
{
font-family:myFirstFont;
}

粗体文本添加另一个包含描述符的 @font-face

@font-face
{
font-family: myFirstFont;
src: url('Sansation_Bold.ttf'),
url('Sansation_Bold.eot'); /* IE9+ */
font-weight:bold;

}

2D 转换(元素进行移动、缩放、转动、拉长或拉伸)：

translate()：元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数transform: translate(50px,100px);

rotate()：顺时针旋转给定的角度。允许负值，元素将逆时针旋转 transform: rotate(30deg);

scale()：元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数 transform: scale(2,4);

skew() ：元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数 transform: skew(30deg,20deg);

matrix() ：
matrix() 方法把所有 2D 转换方法组合在一起。
matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素 transform:matrix(0.866,0.5,-0.5,0.866,0,0);

transform：向元素应用 2D 或 3D 转换。
transform-origin：允许你改变被转换元素的位置。

2D Transform ：

matrix(n,n,n,n,n,n) ：定义 2D 转换，使用六个值的矩阵。
translate(x,y) ：定义 2D 转换，沿着 X 和 Y 轴移动元素。
translateX(n) ：定义 2D 转换，沿着 X 轴移动元素。
translateY(n)：定义 2D 转换，沿着 Y 轴移动元素。
scale(x,y)：定义 2D 缩放转换，改变元素的宽度和高度。
scaleX(n)：定义 2D 缩放转换，改变元素的宽度。
scaleY(n)：定义 2D 缩放转换，改变元素的高度。
rotate(angle)：定义 2D 旋转，在参数中规定角度。
skew(x-angle,y-angle)：定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle)：定义 2D 倾斜转换，沿着 X 轴。
skewY(angle)：定义 2D 倾斜转换，沿着 Y 轴。

3D 转换：

rotateX()：元素围绕其 X 轴以给定的度数进行旋转 transform: rotateX(120deg);

rotateY()：元素围绕其 Y 轴以给定的度数进行旋转

转换属性：

transform：向元素应用 2D 或 3D 转换。
transform-origin：允许你改变被转换元素的位置。
transform-style：规定被嵌套元素如何在 3D 空间中显示。
perspective 规定：3D 元素的透视效果。
perspective-origin：规定 3D 元素的底部位置。
backface-visibility：定义元素在不面对屏幕时是否可见。

过渡：

transition:transition: width 2s;多个用逗号隔开 语法：transition: property duration timing-function delay;

过渡属性：

transition 简写属性，用于在一个属性中设置四个过渡属性。
transition-property 规定应用过渡的 CSS 属性的名称。
transition-duration 定义过渡效果花费的时间。默认是 0。
transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。
transition-delay 规定过渡效果何时开始。默认是 0。

动画：

@keyframes：

@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}

@keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果

animation: myfirst 5s;

@keyframes myfirst
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}

动画属性：

@keyframes：规定动画。
animation：所有动画属性的简写属性，除了 animation-play-state 属性。
animation-name：规定 @keyframes 动画的名称。
animation-duration：规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function：规定动画的速度曲线。默认是 "ease"。
animation-delay：规定动画何时开始。默认是 0。
animation-iteration-count：规定动画被播放的次数。默认是 1。
animation-direction：规定动画是否在下一周期逆向地播放。默认是 "normal"。
animation-play-state：规定动画是否正在运行或暂停。默认是 "running"。
animation-fill-mode：规定对象动画时间之外的状态。

多列:

column-count：元素被分隔的列数 column-count:3;

column-gap：规定列之间的间隔 column-gap:40px;

column-rule：设置列之间的宽度、样式和颜色规则 column-rule:3px outset #ff0000;

样式：

none 定义没有规则。
hidden 定义隐藏规则。
dotted 定义点状规则。 
dashed 定义虚线规则。 
solid 定义实线规则。
double 定义双线规则。

groove 定义 3D grooved 规则。该效果取决于宽度和颜色值。 
ridge 定义 3D ridged 规则。该效果取决于宽度和颜色值。
inset 定义 3D inset 规则。该效果取决于宽度和颜色值。
outset 定义 3D outset 规则。该效果取决于宽度和颜色值。

新的多列属性：

column-count：规定元素应该被分隔的列数。
column-fill：规定如何填充列。
column-gap：规定列之间的间隔。
column-rule：设置所有 column-rule-* 属性的简写属性。
column-rule-color：规定列之间规则的颜色。
column-rule-style：规定列之间规则的样式。
column-rule-width：规定列之间规则的宽度。
column-span：规定元素应该横跨的列数。
column-width：规定列的宽度。
columns：规定设置 column-width 和 column-count 的简写属性。

input 默认样式

appearance 属性允许您使元素看上去像标准的用户界面元素。

appearance: normal|icon|window|button|menu|field;

normal 将元素呈现为常规元素。
icon 将元素呈现为图标（小图片）。
window 将元素呈现为视口。
button 将元素呈现为按钮。
menu 将元素呈现为一套供用户选择的选项。
field 将元素呈现为输入字段。

input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="text"]{
-webkit-appearance: none;
}