html5——伸缩比例案例（携程）

1、有图片的盒子，最好是父盒子设置伸缩属性，a标签设置伸缩比例1，img标签宽度100%

2、不要见到父盒子就设置伸缩属性，而是根据子盒子是否占据一行，若是子盒子占据一行，那么只要给子盒子设置伸缩比例就行了

3、父盒子设置伸缩属性，子盒子的盒子模式就会变成box-sizing：border-box

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            height: 2000px;
        }

        .layout {
            width: 100%;
            /* 最小宽度 320px*/
            min-width: 320px;
        }

        a {
            text-align: center;
            text-decoration: none;
            color: #fff;
        }

        header {
            display: flex;
        }

        header a {
            flex: 1;
        }

        header img {
            width: 100%;
            display: block;
        }

        .nav .item {
            display: flex;
            height: 90px;
            background-color: deeppink;
            margin-top: 10px;
            border-radius: 10px;
        }

        .item .left {
            flex: 1;
            border-right: 1px solid #fff;
            border-bottom: 1px solid #fff;
        }

        .item .right {
            flex: 2;
        }

        .item .right a {
            width: 50%;
            height: 45px;
            float: left;
            /*盒子模式：盒子宽度以边框宽度为准*/
            box-sizing: border-box;
            border-right: 1px solid #fff;
            border-bottom: 1px solid #fff;
            line-height: 45px;
        }

        .item:nth-child(4) .right a {
            width: 33.33%;
            height: 45px;
            float: left;
            /*盒子模式：盒子宽度以边框宽度为准*/
            box-sizing: border-box;
            border-right: 1px solid #fff;
            border-bottom: 1px solid #fff;
            line-height: 45px;
        }

        .extra {
            display: flex;
        }

        .extra a {
            flex: 1;
        }

        .extra a img {
            width: 100%;
        }

        footer section.foot-nav {
            display: flex;
            border-top: 1px dashed #000000;
            /*border-bottom: 1px dashed #000000;*/
        }

        footer section.foot-nav a {
            flex: 1;
            color: #333;
            line-height: 60px;
        }

        .copyright {
            text-align: center;
        }

        .copyright a {
            line-height: 60px;
            color: #333;
        }
    </style>
</head>
<body>
<div class="layout">
    <!--头部-->
    <header>
        <a href="javascript:;">
            <img src="data:images/banner.jpg">
        </a>
    </header>
    <!--导航-->
    <nav class="nav">
        <div class="item">
            <div class="left"></div>
            <div class="right">
                <a href="javascript:;">海外酒店</a>
                <a href="javascript:;">团购</a>
                <a href="javascript:;">特惠酒店</a>
                <a href="javascript:;">客栈公寓</a>
            </div>
        </div>
        <div class="item">
            <div class="left"></div>
            <div class="right">
                <a href="javascript:;">海外酒店</a>
                <a href="javascript:;">团购</a>
                <a href="javascript:;">特惠酒店</a>
                <a href="javascript:;">客栈公寓</a>
            </div>
        </div>
        <div class="item">
            <div class="left"></div>
            <div class="right">
                <a href="javascript:;">海外酒店</a>
                <a href="javascript:;">团购</a>
                <a href="javascript:;">特惠酒店</a>
                <a href="javascript:;">客栈公寓</a>
            </div>
        </div>
        <div class="item">
            <div class="right">
                <a href="javascript:;">门票玩乐</a>
                <a href="javascript:;">美食</a>
                <a href="javascript:;">全球购</a>
                <a href="javascript:;">礼品卡</a>
                <a href="javascript:;">出境WIFI</a>
                <a href="javascript:;">更多</a>
            </div>
        </div>
    </nav>
    <!--其他-->
    <section class="extra">
        <a href="javascript:;"><img src="data:images/extra_1.png"></a>
        <a href="javascript:;"><img src="data:images/extra_2.png"></a>
    </section>
    <!--底部-->
    <footer>
        <!--底部导航-->
        <section class="foot-nav">
            <a href="javascript:;">电话预订</a>
            <a href="javascript:;">下载客户端</a>
            <a href="javascript:;">我的</a>
        </section>
        <!--版权信息-->
        <section class="copyright">
            <p class="link">
                <a href="javascript:;">网站地图</a> |
                <a href="javascript:;">ENGLISH</a> |
                <a href="javascript:;">电脑版</a>
            </p>
            <p><a href="javascript:;">©2015 携程旅行</a></p>
        </section>
    </footer>
</div>
</body>
</html>