今天认识的CSS属性

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

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

div
{
font-family:myFirstFont;
}
</style>

• min-height: 100%;字面意思就是最小高度,高度的百分比继承于父元素大小.
  在多次嵌套的div中若里层需要使用min-height:100%.则其所有祖先元素都得设置
  只有在父元素高度明确指定的情况下,子元素才能继承父元素的高度,但是min-height是模糊的,不明确的.故最后计算出来的高度往往是”auto”而不是期望的100%,在这个问题中.
  当我们把html的高度设置为100%就代表html的大小就是整个页面,即html的高度是确定的.然后是body的100%,继承自html同样高度也是确定的…..这样一直下去,到wrap3时,由于之前的元素高度都是确定的,此时wrap3的min-height自然能起作用.

• position: relative; 相对定位，是相对于前面的容器定位的。
  它可以随窗口大小变化。但大小仍然不会变。要是你设置成width:100%;height:100%;这样就会随着窗口变大变小。

• display使段落生出行内框

可能的值：

• display:inline让块级元素变换为行内元素并显示

• flex 布局：
  容器的属性：
  flex-direction：属性决定主轴的方向（即项目的排列的方向）。
  flex-wrap：规定容器内元素排不下如何换行。
  flex-flow：属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
  justify-content：属性规定容器元素在 主抽的对齐方式（即X轴为基准方向）
  align-items：属性规定容器元素在 交叉轴的对齐方式（即Y轴为基准的方向）
  align-content：属性定义了多根轴线的对齐方式。如果项目只有一根轴线（容器元素不换行），该属性不起作用。
  容器内元素的属性:
  order：属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
  flex-grow：容器元素的放大比例，默认0
  flex-shrink：容器元素的缩小比例，默认1
  flex-basis:元素分配对于空间之前，规定主轴空间的大小。它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。
  flex： flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
  align-self：允许单个容器元素与其他容器元素 不一样的的对齐方式，继承align-items 属性。

• font-family: ‘Roboto’, sans-serif;设置无衬线字体

• transition: 让 css3的效果 兼容 其他浏览器
  -moz-transition:height 2s; 兼容 老版本火狐 浏览器
  -webkit-transition:height 2s; 兼容 Safari　Chrome 浏览器
  -o-transition:width 2s; 兼容 Opera浏览器