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="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="images/extra_1.png"></a> <a href="javascript:;"><img src="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>
