1-5、你对盒子模型理解多少？什么是盒子模型盒子模型就是元素在网页中实际占据的大小盒子模型的计算方式盒子模型大小

什么是盒子模型

盒子模型就是元素在网页中实际占据的大小

盒子模型的计算方式

盒子模型大小 = width(宽)/height(高)+padding(内边距)+border(边框)

注：没有margin

box-sizing

当box-sizing的值为border-box时，会改变盒子模型的计算方式

<style>
    * {
        margin: 0;
        padding: 0;
    }

    /* 盒子模型大小=width(宽)+padding(内边距)+border(边框)=200+20+10 */
    div {
        width: 200px;
        height: 200px;
        padding: 10px;
        border: 5px solid red;
        background-color: sandybrown;
        box-sizing: border-box;
    }
</style>

<body>
    <div id="div1">包子枫的枫 - bilibili</div>
</body>

盒子模型 = width/height = 内容宽高+border+padding

offsetWidth

JavaScript中获取盒子模型的方式是obj.offsetWidth / offsetHeight

<script>
        var w = document.getElementById("div1").offsetWidth;
        console.log(w);
 </script>