移动端：
    image.png
    二倍图：
    在实际开发中，当一个50 ×50像素（CSS像素）的图片直接放到iPhone 6/7/8设备中显示时，图片会被放大，变成原来的两倍（iPhone 6/7/8的设备像素比为2），即100 ×100。为了避免图片放大后模糊，我们可以预先制作一张100 ×100的图片，然后在网页中手动设置这个图片的样式，将图片的宽和高都设为50像素。这样，这张图片就会以它原本的像素（100 ×100）来显示，保证了图片的原有清晰度。
    二倍精灵图做法

    • 在fireworks里面把精灵图等比例缩放为原来的一半
    • 之后根据新的大小 测量坐标
    • 注意代码里面background-size也要写精灵图原来宽度的一半。

    flex布局
    flex注意点
    1.块级元素作为弹性盒子时，没有设置宽度时，宽度由父级的100%，变为由实际内容撑开。
    2.当行内元素作为弹性盒子（子元素）时，可以直接设置宽高。
    3.当行内元素作为弹性容器时，可以直接设置宽高。
    弹性容器属性：
    1.flex-direction：在主轴、侧轴的排列方式

    • row：横向从左到右排列（左对齐），默认的排列方式。
    • row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
    • column：纵向排列。
    • column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。

    2.justify-content：在主轴的对齐方式

    • flex-start：
      弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放。
    • flex-end：
      弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放。
    • center：
      弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）。
    • space-between：
      弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。否则，第1个弹性项的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，然后剩余的弹性项分布在该行上，相邻项目的间隔相等。
    • space-around：
      弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。否则，弹性项目沿该行分布，且彼此间隔相等（比如是20px），同时首尾两边和弹性容器之间留有一半的间隔（1/2*20px=10px）。

    3.align-items：在侧轴的对齐方式

    • flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
    • flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
    • center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
    • baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。
    • stretch：如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。

    4.flex-wrap：指定子元素的换行方式

    • nowrap - 默认， 弹性容器为单行。该情况下弹性子项可能会溢出容器。
    • wrap - 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行
    • wrap-reverse -反转 wrap 排列。

    5.align-content 属性: align-content 属性用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐

    • stretch - 默认。各行将会伸展以占用剩余的空间。
    • flex-start - 各行向弹性盒容器的起始位置堆叠。
    • flex-end - 各行向弹性盒容器的结束位置堆叠。
    • center -各行向弹性盒容器的中间位置堆叠。
    • space-between -各行在弹性盒容器中平均分布。
    • space-around - 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。

    6.flex-flow:flex-flow flex-direction和flex-wrap的简写 默认row nowrap

    弹性盒子属性：
    1.flex:用于指定弹性子元素如何分配空间
    2.align-self:用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式

    • flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
    • flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
    • center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。

    3.order:弹性子元素排序
    用整数值来定义排列顺序，数值小的排在前面

    注意点：弹性盒子设置高度后，align-items：center没作用，盒子中的元素自动在盒子最上方。