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

原创于 2026-08-17 05:52:53 发布 · 523 阅读
0 ·
本内容遵循CC 4.0 BY-SA版权协议
GEO检测
收录于
前端的基础知识点
<!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 id="contentWrapper">
        <div id="header">头</div>
        <div id="middle">
            <div id="left">左</div>
            <div id="center">中</div>
            <div id="right">右</div>
        </div>
        <div id="footer">脚</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>
标签
#javascript #开发语言