还不认识的许多css属性

摘抄自http://www.runoob.com/cssref/css-reference.html以及http://www.ruanyifeng.com/blog/

 

all 属性用于重置所有属性，除了 unicode-bidi 和 direction，用法all: initial|inherit|unset;

表格空单元格是否显示，empty-cells:show|hide|inherit;

表格标题的位置，caption-side：top|bottom|inherit;

允许你使元素看上去像标准的用户界面元素，appearance: normal|icon|window|button|menu|field;

　　　　所有主流浏览器都不支持 appearance 属性。

　　　　Firefox 支持替代的 -moz-appearance 属性。

　　　　Safari 和 Chrome 支持替代的 -webkit-appearance 属性。

*box-sizing: content-box|border-box|inherit:

　　　　　　　　Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性

1.flex-direction:决定主轴的方向（即项目的排列方向）,row column row-reverse column-reverse

2.flex-wrap:wrap nowrap wrap-reverse      * flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap

3.justify-content: flex-start | flex-end | center | space-between | space-around;定义了项目在主轴上的对齐方式。

4. align-items: flex-start | flex-end | center | baseline | stretch;定义项目在交叉轴上如何对齐。

5. align-content: flex-start | flex-end | center | space-between | space-around | stretch;定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

　　　　　　　　项目的6个属性

1.order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

2.flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

3.flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

4.flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

5.flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

6.align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

 

不要用绝对定位了，使用固定宽度和浮动布局