跳到主要内容

基本概念​

所有 HTML 元素都可以视为一个盒子，该盒子包括：边距(margin)、边框(border)、填充(padding)和实际内容(content)

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

下面的图片说明了盒子模型(Box Model)：

  • Content box: 这个区域是用来显示内容，大小可以通过设置 width 和 height.
  • Padding box: 包围在内容区域外部的空白区域； 大小通过 padding 相关属性设置。
  • Border box: 边框盒包裹内容和内边距。大小通过 border 相关属性设置。
  • Margin box: 这是最外面的区域，是盒子和其他元素之间的空白区域。大小通过 margin 相关属性设置。

标准模型（W3C 模型）和 IE 模型​

差异：宽高计算方式不同

标准模型计算元素的宽高只算 content 的宽高，IE 模型是 content + padding + border 的总尺寸

标准盒模型IE 盒模型
宽高width/height = contentwidth/height = content + padding + border
box 宽高整个盒子的大小 = width/height + padding + border整个盒子的大小 = border
设置方式box-sizing: content-box;box-sizing: border-box;

标准模型：计算元素的宽高只算 content 的宽高

IE 模型：计算元素的宽高包含 content 、padding、border

如何设置两种模型​

div {
    // 设置标准模型
    box-sizing: content-box;
    // 设置IE模型
    box-sizing: border-box;
}

box-sizing 的默认值是 content-box

JS 如何设置盒模型的宽高​

假设已经获取节点 dom

// 只能获取内联样式设置的宽高
dom.style.width / height;

// 获取渲染后即使运行的宽高，只支持IE
dom.currentStyle.width / height;

// 获取渲染后即时运行的宽高，兼容性很好
dom.getComputedStyle.width / height;

// 获取渲染后即使运行的宽高，兼容性很好，一般用来获取元素的绝对位置
dom.getBoundingClientRect().width / height;