开发过程中遇到的一些奇妙的事情(css)：

开发过程中遇到的一些奇妙的事情：

1. font-size:0；

display：inline-block的元素之间会有一个字符的间隙，这个间隙导致了最后一个会掉下来。此时在在这些inline-block元素的父元素设置font-size:0，就可以清除间隙。一般有多个并排的块习惯用float，比较少出现这个问题。

2. 单词换行

word-wrap: normal|break-word;
normal: 只在允许的断字点换行（浏览器保持默认处理）
break-word: 在长单词或 URL 地址内部进行换行。
word-break: normal|break-all|keep-all;
normal: 使用浏览器默认的换行规则。
break-all: 允许在单词内换行。
keep-all: 只能在半角空格或连字符处换行。
个人理解：
有一个100px的容器，a单词和面接着一个长到望不到边际的单词，正常情况下，这个望不到边际的单词不会紧跟a单词而另起一行，但是容器放不下这个望不到边际的单词，所以这个单词只能展示100px宽度，多余内容会被超出容器。
这时候使用word-wrap:break-word； 这个望不到边际的单词就会被拦腰截断，因为这个属性允许浏览器从单词内部进行断点，所以目前的外观就变成了另起一行的望不到边际的单词在100px被截断，接着又起一行。
这个时候呢，会感觉怪怪的，望不到边际的单词因为没有紧跟a单词，所以a单词后面留也一大片空位置，有点丑，这个时候使用word-break: break-all；这个望不到边际的单词就紧跟a单词了。

3. Flex布局

Flex内容参考自阮一峰老师的Flex布局教程：语法篇，
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

1. 设置Flex布局。
   块元素：display:flex，行内元素：display:inline-flex
   为了兼容webkit内核浏览器，同时设置：display:-webkit-flex
   注意：设置成flex之后，内部元素的float,clear,vertical-align将无效。
2. 设置了display:flex属性的元素称作容器，里面的元素成为项目
   容器
   一共有6个属性可以设置在容器上：
   flex-direction,flex-wrap,flex-flow,justify-content,align-items,align-content

• flex-direction属性
  属性决定主轴(main-axis)的方向，即项目的水平排列方向。
  flex-direction共有4个属性值：

1. row:默认值，主轴为水平方向，起点在左端。
2. row-reverse:主轴为水平方向，起点在右端（注意这个起点会影响后面的属性设置）。
3. column:主轴为垂直方向，起点在上沿。
4. column-reverse:主轴为垂直方向，起点在下沿。

• flex-wrap属性
  默认情况下，项目都排在一条线（轴线），flex-wrap属性定义，如果一条轴线放不下所有项目，如何换行。
  flex-wrap共有3个属性值。

1. nowrap:默认值，不换行。
2. wrap: 换行。
3. wrap-reverse: 换行，并且反转行的位置。

• flex-flow属性
  flex-flow是flex-direction和flex-wrap两个属性的合集。
  flex-flow: ||
• justify-content属性
  属性定义了项目在主轴上的对齐方式，与flex-direction有关。
  justify-content共有5个属性。

1. flex-start:默认值，项目左对齐。
2. flex-end:项目右对齐。
3. center:项目居中。
4. space-between:两端对其，项目之间的间隔都相等。
5. space-around:每个项目两次间隔相等。所以，项目之间的间隔比项目边框的间隔大一倍。

• align-items属性
  属性定义项目在交叉轴上（cross axis，垂直于水平主轴的一根轴）如何对齐。

1. flex-start:交叉轴的起点对齐。
2. flex-end:交叉轴的重点对齐。
3. center：交叉轴的中点对齐。
4. baseline: 项目的第一行文字的基线对齐。
5. stretch: 默认值如果项目未设置高度或设为auto，将占满整个容器的高度。

• align-content属性
  属性定义了很多根轴线的对齐方式，如果项目只有一根轴线，改属相不起作用。

1. flex-start:与交叉轴的起点对齐。
2. flex-end:与交叉轴的终点对齐。
3. center:与交叉轴的中点对齐。
4. space-between:与交叉轴两端对齐，轴线之间的间隔平均分布。
5. space-around:每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
6. stretch: 轴线占满整个交叉轴。

项目的属性
以下6个属性可以设置在项目上:
order,flex-grow,flex-shrink,flex-basis,flex,align-self

• order属性
  属性定义项目的排列顺序。数值越小，排列越靠前。默认为0，可以取负数。
• flex-grow
  属性定义项目的放大比例，默认为0。
  如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
• flex-shrink
  属性定义了项目的缩小比例，默认值为1。
  如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
• flex-basis
  属性定义了在分配多余空间之前，项目占据的主轴空间，浏览器根据这个属性，计算主轴是否有多余空间，默认值为auto。（不会超过主轴长度）
• flex
  属性是上面3个属性的简写
  flex:[flex-grow] [flex-shrink] [flex-basis]
  默认值为0，1，auto。后两个属性可选。
  该属性有两个快捷值：auto(1,1,auto)和none(0,0,auto)
• align-self
  属性允许单个项目与其他项目有不同的对齐方式，可以覆盖align-items属性。
  默认值为auto，表示继承父元素的align-items属性。
  .backgroundImage{
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  }