分类
默认

盒模型宽度计算

盒模型宽度计算

  • 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>