开发过程中遇到的一些奇妙的事情：
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 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
- 设置
Flex布局。
块元素：display:flex，行内元素：display:inline-flex
为了兼容webkit内核浏览器，同时设置：display:-webkit-flex
注意：设置成flex之后，内部元素的float,clear,vertical-align将无效。 - 设置了
display:flex属性的元素称作容器，里面的元素成为项目
容器
一共有6个属性可以设置在容器上：
flex-direction,flex-wrap,flex-flow,justify-content,align-items,align-content
-
flex-direction属性
属性决定主轴(main-axis)的方向，即项目的水平排列方向。
flex-direction共有4个属性值：
-
row:默认值，主轴为水平方向，起点在左端。 -
row-reverse:主轴为水平方向，起点在右端（注意这个起点会影响后面的属性设置）。 -
column:主轴为垂直方向，起点在上沿。 -
column-reverse:主轴为垂直方向，起点在下沿。
-
flex-wrap属性
默认情况下，项目都排在一条线（轴线），flex-wrap属性定义，如果一条轴线放不下所有项目，如何换行。
flex-wrap共有3个属性值。
-
nowrap:默认值，不换行。 -
wrap: 换行。 -
wrap-reverse: 换行，并且反转行的位置。
-
flex-flow属性
flex-flow是flex-direction和flex-wrap两个属性的合集。
flex-flow:<flex-direction> || <flex-wrap> -
justify-content属性
属性定义了项目在主轴上的对齐方式，与flex-direction有关。
justify-content共有5个属性。
-
flex-start:默认值，项目左对齐。 -
flex-end:项目右对齐。 -
center:项目居中。 -
space-between:两端对其，项目之间的间隔都相等。 -
space-around:每个项目两次间隔相等。所以，项目之间的间隔比项目边框的间隔大一倍。
-
align-items属性
属性定义项目在交叉轴上（cross axis，垂直于水平主轴的一根轴）如何对齐。
-
flex-start:交叉轴的起点对齐。 -
flex-end:交叉轴的重点对齐。 -
center：交叉轴的中点对齐。 -
baseline: 项目的第一行文字的基线对齐。 -
stretch: 默认值如果项目未设置高度或设为auto，将占满整个容器的高度。
-
align-content属性
属性定义了很多根轴线的对齐方式，如果项目只有一根轴线，改属相不起作用。
-
flex-start:与交叉轴的起点对齐。 -
flex-end:与交叉轴的终点对齐。 -
center:与交叉轴的中点对齐。 -
space-between:与交叉轴两端对齐，轴线之间的间隔平均分布。 -
space-around:每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。 -
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;
}
网友评论