（前端）4.盒子模型-页面布局样例

!DOCTYPE html html head title盒子模型布局/title script src~/lib/jquery/dist/jquery.js/script style *{/*所有标签的边距为0*/ margin:0px; padding:0px; } html, body { width:100%; height:100%; } #contentWrapper{ width:100%; height:100%; position: relative; /*外层相对布局*/ } #header { top:0px; left:0px; position: absolute; /*内层绝对布局*/ width:100%; height:10%; background:blue; } #footer { bottom: 0px; left: 0px; position: absolute; /*内层绝对布局*/ width: 100%; height: 10%; background: red; } #middle { width: 100%; height: 80%; position: relative; /*外层相对布局*/ background: orange; top:10%; left:0px; } #left{ width: 10%; height: 100%; position: absolute; /*内层绝对布局*/ top:0px; left:0px; background: yellow; } #right { width: 10%; height: 100%; position: absolute; /*内层绝对布局*/ top: 0px; right: 0px; background: green; } #center { width: 80%; height: 100%; position: absolute; /*内层绝对布局*/ left: 10%; top:0px; background: lightblue; } /style /head body !--页面布局上、下、左、右、中-- div idcontentWrapper div idheader头/div div idmiddle div idleft左/div div idcenter中/div div idright右/div /div div idfooter脚/div /div script $(function () { getWidthAndHeight(); }) //获取区域的宽高 function getWidthAndHeight() { var wWidth $(#contentWrapper).width(); var wHeight $(#contentWrapper).height(); var hWidth $(#header).width(); var hHeight $(#header).height(); var fWidth $(#footer).width(); var fHeight $(#footer).height(); var lWidth $(#left).width(); var lHeight $(#left).height(); var rWidth $(#right).width(); var rHeight $(#right).height(); var cWidth $(#center).width(); var cHeight $(#center).height(); consoleLog(上, hWidth, hHeight); consoleLog(下, fWidth, fWidth); consoleLog(左, lWidth, lHeight); consoleLog(右, rWidth, rHeight); consoleLog(中, cWidth, cHeight); } function consoleLog(region, width, height){ console.log(region, width, height); } //窗体尺寸变化 window.onresize function () { getWidthAndHeight(); } /script /body /html