开发过程中遇到的一些奇妙的事情(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-flowflex-directionflex-wrap两个属性的合集。
    flex-flow:<flex-direction> || <flex-wrap>
  • 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;
    }

推荐阅读更多精彩内容