（前端）5.盒子模型的宽高和边距

<!DOCTYPE html>
<html>
<head>
    <title>盒子模型</title>
    <style>

        #wrapperBox{
            margin:20px;
            width: 140px;
            height: 140px;
            background:red;
            padding:20px;
            outline-style:dashed;
        }
        #Box {
            width:100%;
            height:100%;
            background:orange;
        }
    </style>

    <script src="~/lib/jquery/dist/jquery.js"></script>
</head>
<body>
    <h1>盒子模型</h1>
    <div id="outerBox">
        <div id="wrapperBox"><div id="Box"></div></div></div>
    <script>
        var boxWidth = $("#Box").width(); 
        var boxHeight = $("#Box").height();

        var boxWidth2 = $("#Box").outerWidth();
        var boxHeight2 = $("#Box").outerHeight();

        console.log("盒子的宽度和高度是：", boxWidth, boxHeight);
        console.log("盒子的外部宽度和高度是：", boxWidth2, boxHeight2);
        console.log("可知盒子的高度和宽度包括内边距大小的");

    </script>
</body>
</html>