1、传统布局
盒状模型结合 display 属性、float 浮动以及 position 定位属性设计的各式传统布局形式。
2、说再多不如动手实践，下面举三个例子
html 部分代码：
1 <section> 2 <!-- 传统布局-例1结构：盒子模型 --> 3 <div class="layout-one"> 4 <div class="header">header</div> 5 <div class="banner">banner</div> 6 <div class="content">main-content</div> 7 <div class="footer">footer</div> 8 </div> 9 10 <!-- 传统布局-例2结构：盒子模型 + float --> 11 <div class="layout-two"> 12 <div class="header">header</div> 13 <div class="banner">banner</div> 14 <div class="content"> 15 <div class="content-left">content-left</div> 16 <div class="content-right">content-right</div> 17 </div> 18 <div class="footer">footer</div> 19 </div> 20 21 <!-- 传统布局-例3结构 + float + position --> 22 <div class="layout-three"> 23 <div class="header">header</div> 24 <div class="main-banner">banner</div> 25 <div class="main-content"> 26 <div class="content1">content1</div> 27 <div class="content2">content2</div> 28 </div> 29 <div class="footer">footer</div> 30 </div> 31 </section></pre> css样式部分代码：
1 /* 基本样式 */ 2 section { 3 width: 1200px; 4 height: 300px; 5 margin: 0 auto; 6 padding: 10px; 7 } 8 .layout-one, .layout-two, .layout-three { 9 float: left; 10 margin-left: 20px; 11 } 12 div { 13 width: 300px; 14 } 15 16 /* 可复用样式 */ 17 .header { 18 height: 25px; 19 text-align: center; 20 background-color: bisque; 21 line-height: 25px; 22 } 23 .banner { 24 height: 50px; 25 text-align: center; 26 line-height: 50px; 27 background-color: aquamarine; 28 } 29 .footer { 30 height: 25px; 31 text-align: center; 32 line-height: 25px; 33 background-color: black; 34 color: #ffffff; 35 } 36 37 /* 结构1 基础样式 */ 38 .layout-one .content { 39 height: 60px; 40 text-align: center; 41 line-height: 60px; 42 background-color: aqua; 43 } 44 45 /* 结构2 基础样式 */ 46 .layout-two .content { 47 height: 60px; 48 text-align: center; 49 line-height: 60px; 50 background-color: aqua; 51 } 52 .layout-two .content-left { 53 width: 100px; 54 float: left; 55 border-right: 1px solid #000000; 56 } 57 .layout-two .content-right { 58 width: 199px; 59 float: left; 60 } 61 62 /* 结构3 基础样式 */ 63 .main-banner { 64 width: 200px; 65 height: 50px; 66 margin: 0 auto; 67 background-color: aquamarine; 68 text-align: center; 69 line-height: 50px; 70 } 71 .main-content { 72 position: relative; 73 width: 200px; 74 height: 60px; 75 margin: 0 auto; 76 text-align: center; 77 line-height: 60px; 78 } 79 .content1 { 80 width: 60px; 81 height: 60px; 82 position: absolute; 83 top: 0px; 84 left: 30px; 85 background-color: aqua; 86 } 87 .content2 { 88 width: 60px; 89 height: 60px; 90 position: absolute; 91 top: 0px; 92 right: 30px; 93 background-color: aqua; 94 }</pre> 页面效果：
通过上述的三个例子，我们可以发现：
为了更近时代的进步，所以我们需要更深入的去学习，如：响应式设计中的，流式布局，弹性布局等等！加油吧，骚年！
每天进步一点点，相信积累的力量！
最后，给大家推荐一个前端学习进阶内推交流群685910553（前端资料分享），不管你在地球哪个方位，
不管你参加工作几年都欢迎你的入驻！（群内会定期免费提供一些群主收藏的免费学习书籍资料以及整理好的面试题和答案文档！）
如果您对这个文章有任何异议，那么请在文章评论处写上你的评论。
如果您觉得这个文章有意思，那么请分享并转发，或者也可以关注一下表示您对我们文章的认可与鼓励。
愿大家都能在编程这条路，越走越远。