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 ]：定义弹性盒子元素的默认基准值。