盒模型宽度计算

盒模型宽度计算

• offsetWidth =（内容宽度+内边距+边距），无外边距
• box-sizing:border-box; 可以改变盒模型宽度

box-sizing: content-box 是 W3C 标准盒子模型

box-sizing: border-box 是 IE 怪异盒子模型

<!-- item 的 offsetWidth 是多大？ -->
<style>
    #item{
        width: 100px;
        padding: 10px;
        border: 1px solid #ccc;
        margin: 10px;
    }
</style>
<div id="item">
</div>
<script>
    let itemOffSetWidth = document.getElementById('item').offsetWidth
    console.log("itemOffSetWidth",itemOffSetWidth)
</script>

offsetWidth = 122px；

如果让 offsetWidth 等于100px，不修改width、padding 、border等，应该怎么做？

使用box-sizing: border-box;

<style>
#item {
    width: 100px;
    padding: 10px;
    border: 1px solid #ccc;
    margin: 10px;
    box-sizing: border-box;
}
</style>