css3

border-radius 
2值 对角13  24
三个值 顺时针方向1 2对角4 3
四个值顺时1234

-webkit-border-images:url (Images/nin.png) 27/27px repeat stretch
27是方向  27是宽度 平铺 拉伸 /边框宽度
图片81px/3＝27四个角   水平垂直 方向九宫格 

＜i class ＝"Fa fa-pencil  fa-fw"＞  
三个参数分别是： 类  字体类型 大小

伪元素选择器
:only-child 匹配父元素下仅有的一个子元素等同于：first-child：last-child或：nth-last-child（1）：nth-last-child（1）
:only-od-type 匹配父元素下使用的同种标签的唯一一个子元素等同于：fisst-oftype：last-of-type或nth-od-type（1）：bth-last-of-type（1）
:enabled 匹配表单中的激活元素
:disabled 匹配表单中金庸的元素
:checked 匹配表单中被选中的radio（单选框）胡平checkbox（复选框）元素
::selection 匹配用户当全选中的元素

:first-child 对一个父元紊中的第一个子元索指定样式
:last-child 对一个父元索中的最后一个子元素指定样式

对指定序号的子元素设置样式(正数)
:nth-child(odd):所有正数下来第偶数个子元素
:nth-chiid(even)二所有正数下来第奇数个子元索
:nth-last-child对指定序号的子元索设里样式(倒数)
:nth-last-child (odd):所有倒数上去第94数个子元s
:nth-last-child (even):所有倒数上去第奇数个子元素

:first-letter 向文本的第一个字母添加特殊样式。
:first-line 向文本的首行添加特殊样式。
:before 在元素之前添加内容。
:after 在元素之后添加内容。
选择器:before{“内容’/ url(图片路径)}

:nth-of-type(n)与:nth-child（）作用类似.但是仅匹配使用同种标签的元素 
:nth-last-of-type（n）与:nth-last-child（）作用类似，但是仅匹配使用同种标签的元素
:nth-child（an+b）a表示，每次循环中共包括几张样式： b表示制订样式在循环中所在的位置循环使用样式
例 :nth-child（3n+2）每隔三个从第二个开始

-webkit- 代表Chrome、safari
-moz-代表firefox
-ms-代表ie
-o-代表opera

resize用于重定义textarea的大小
none: UserAgent没提供尺寸调整机制，用户不能操纵机制调节元素的尺寸.
both : U5er gejA提供双向尺寸调整机制，让用户可以调节元素的宽度和高度.
horizontal: U_serAgent提供单向水平尺寸调整机制，让用户可以调节元素的宽度.
vertical: UserAgen雌供单向垂直尺寸调整机制，让用户可以调节元素的高度。

强制单词换行的word-wrap：break-word属性:

元素透明也是我们常用的样式，在CSS2中使用滤镜属性。pacity实现透明效果。现
在有了CSS3的因坡属性，就不用这么麻烦了，当然这也得要浏览器支持才行。通
常我们定义颜色都是用十六进制表示。如:background:#000000，表示背景色为
黑色。当然也可以用RGB三原色值表示，如:background:rgb(0,0,0)，也表示背
景色为黑色.因恤只是在因11的基础上增加了一个a，这个a表示透明度.而且这个
属性不会被子元素继承下去，可以在定义颜色的属性使用，应用代码如下:

除了IE，其他浏览器几乎都支持rgba函数。它有四个参数，前三个为一种颜色的
RGB值，第四个为透明度。
background: 0000000; filter:alpha(opacity-40)
background:rgba(0,0,0,0.5)最后一个表示透明

.wrapper > * {padding: 10px;flex: 1 100%;}

还有.main { order: 2; }中的order:2是什么用的啊，后面的数字有什么意思嘛？

> 是相邻的意思
这样解释给你听吧：
.wrapper是你家，你家旁边有一个.box，那这个.wrapper>*就是选择，所有你在旁边的房子，但是房子里面的东西不是，不过有部分属性会继承，在.box旁边的房子，.wrapper>*就选择不到了。

.wrapper > * 的意思匹配.wrapper里面的所有子元素，但是不包括.wrapper里面子元素的子元素.
所以 > 的意思就是父级元素下面选择子元素的选择器。

CSS3 多列属性

下表列出了所有 CSS3 的多列属性：

属性	描述
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 的简写

下表列出了所有 CSS3 的多列属性：
属性描述

column-count指定元素应该被分割的列数。

column-count: number|auto;

number	列的最佳数目将其中的元素的内容无法流出
auto	列数将取决于其他属性，例如："column-width"

column-fill指定如何填充列 

column-fill: balance|auto;

banlance	列长短平衡
auto	列顺序填充，他们将有不同的长度

column-gap指定列与列之间的间隙

column-gap: length|normal;

length	一个指定的长度，将设置列之间的差距
normal	指定一个列之间的普通差距。 W3C建议1EM值

column-rule所有 column-rule-* 属性的简写

column-rule: column-rule-width column-rule-style column-rule-color;

column-rule-width	设置列中之间的宽度规则
column-rule-style	设置列中之间的样式规则
column-rule-color	设置列中之间的颜色规则

column-rule-color指定两列间边框的颜色

column-rule-color: color;

color

指定颜色的规则。在CSS颜色值寻找颜色值的完整列表

column-rule-style指定两列间边框的样式

column-rule-style：none | hidden | dotted | broken | solid | double | groove | ridge | inset | outset;

none	定义没有规则。
hidden	定义隐藏规则。
dotted	定义点状规则。
dashed	定义虚线规则。
solid	定义实线规则。
double	定义双线规则。
groove	定义 3D grooved 规则。该效果取决于宽度和颜色值。
ridge	定义 3D ridged 规则。该效果取决于宽度和颜色值。
inset	定义 3D inset 规则。该效果取决于宽度和颜色值。
outset	定义 3D outset 规则。该效果取决于宽度和颜色值。

column-rule-width指定两列间边框的厚度

column-rule-width: thin|medium|thick|length;

thin	指定一个细边框的规则
medium	定义一个中等边框规则
thick	指定一个粗边框的规则
length	指定宽度的规则

column-span指定元素要跨越多少列

column-span: 1|all;

1	元素应跨越一列
all	该元素应该跨越所有列

column-width指定列的宽度

columns设置 column-width 和 column-count 的简写

columns：column-width column-count ;

column-width	列的宽度
column-count	列数

CSS3 弹性盒子
flex-direction 顺序指定了弹性子元素在父容器中的位置。
lex-direction的值有:
row：横向从左到右排列（左对齐），默认的排列方式。
row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
column：纵向排列。
column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。


justify-content 属性
内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。
justify-content 语法如下：
justify-content: flex-start | flex-end | center | space-between | space-around
各个值解析:
flex-start：
弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放。
flex-end：
弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放。
center：
弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）。
space-between：
弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。否则，第1个弹性项的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，然后剩余的弹性项分布在该行上，相邻项目的间隔相等。
space-around：
弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。否则，弹性项目沿该行分布，且彼此间隔相等（比如是20px），同时首尾两边和弹性容器之间留有一半的间隔（1/2*20px=10px）。


align-items 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
语法
align-items: flex-start | flex-end | center | baseline | stretch
各个值解析:
flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。


flex-wrap 属性
flex-wrap 属性用于指定弹性盒子的子元素换行方式。
语法
flex-flow:  || 
各个值解析:
nowrap - 默认， 弹性容器为单行。该情况下弹性子项可能会溢出容器。
wrap - 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行
wrap-reverse -反转 wrap 排列。


align-content 属性
align-content 属性用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。
语法
align-content: flex-start | flex-end | center | space-between | space-around | stretch
各个值解析:
stretch - 默认。各行将会伸展以占用剩余的空间。
flex-start - 各行向弹性盒容器的起始位置堆叠。
flex-end - 各行向弹性盒容器的结束位置堆叠。
center -各行向弹性盒容器的中间位置堆叠。
space-between -各行在弹性盒容器中平均分布。
space-around - 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。

align-self 属性用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。
语法
align-self: auto | flex-start | flex-end | center | baseline | stretch
auto：如果'align-self'的值为'auto'，则其计算值为元素的父元素的'align-items'值，如果其没有父元素，则计算值为'stretch'。
flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。


flex 属性用于指定弹性子元素如何分配空间。
语法
flex: auto | initial | none | inherit |  [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]
各个值解析:
auto: 计算值为 1 1 auto
initial: 计算值为 0 1 auto
none：计算值为 0 0 auto
inherit：从父元素继承
[ flex-grow ]：定义弹性盒子元素的扩展比率。
[ flex-shrink ]：定义弹性盒子元素的收缩比率。
[ flex-basis ]：定义弹性盒子元素的默认基准值。