导航使用padding和margin让图片自适应排布

padding和margin取值为百分比的时候，不管是left和right，还是top和bottom，参照的是父元素的宽度width。即进行占位和宽度（left/right）或高度（top/bottom）自适应。

eg.导航效果：

1. 导航容器设置

        .nav
            height 200px
            margin-top 15px
            bottom-border-1px(#e4e4e4)
            background #fff
            .nav-container
                height 0
                // width 100%
                padding-bottom 50%
                overflow hidden
                background green

固定了导航高度200px，接着让容器在导航居中：
padding-bottom 50% ：绿色块nav-container所在的div区域高度占比是50%。即当默认把当前元素width 100%，那么绿色块nav-container往下去撑的高度是宽度width的50%。
margin-top 15px：跟头部间隔了一下

2. 导航内每一块设置

                .nav-img-container
                    position relative
                    overflow hidden
                    float left
                    height 0
                    width 25%
                    padding-bottom 25%
                    background red

width 25%和padding-bottom 25%：宽度是25%，高度也是25%。

当有8个红色块nav-img-container是正好可以把导航容器（绿色块）nav-container覆盖掉的。

3.图片容器设置

                    .nav-img-wrapper
                        position absolute
                        top 0
                        left 0
                        right 0
                        bottom 20px
                        box-sizing border-box
                        padding 3px
                        background blue

1）如果上面没有设置position，那么position absolute是相当于根元素的absolute，则会覆盖整个屏幕。红色块 nav-img-container是有设置：position relative。
2）加了蓝色块nav-img-wrapper且预留了部分红色块后，红色块nav-img-container若超过了绿色块nav-container一半，那么就要在红色块nav-img-container加上height 0（上面源码已有）。
3）box-sizing border-box：布局使用的是自适应的布局方式，div的宽度是百分比的形式，所以使用属性box-sizing来调整框模型。定义的width只负责content区域的宽度，如果想得到整个盒子宽度，需要再加上padding和border的厚度。

4.图片设置

                        .nav-img
                            height 100%
                            display block
                            margin 0 auto

图片居中：
display block：此元素将显示为块级元素，此元素前后会带有换行符。
margin 0 auto：设置对象上下间距为0，左右自动。

5.文字设置

                    .nav-desc
                        position absolute
                        left 0
                        right 0
                        bottom 0
                        // height 20px
                        line-height 20px
                        text-align center

文字垂直居中：
line-height 20px和text-align center。line-height撑开了div高度。