CSS盒子模型的理解及其计算方式汇总

Posted 2022-07-16 leophen

一、盒模型的分类

 

 

 

 

二、标准模型与 IE 模型的区别

 

从上图可看出，两者的区别在于宽度和高度的计算方式不同：

标准模型计算的是 content 的宽/高

IE 模型计算的是 content + padding + border 的宽/高

 

 

三、标准模型与 IE 模型的设置

 

1、标准模型（默认）

box-sizing: content-box;

 

2、IE 模型

box-sizing: border-box;

 

 

四、盒模型宽高的计算

 

1、计算宽高的 6 种方式汇总

 

获取 dom 的宽度 width
只计算内容宽度（结果带单位px）	仅限于行内样式 dom.style.width   适用于行内样式与内外样式表，但仅支持 IE dom.currentStyle.width   适用于行内样式与内外样式表，且兼容性好  window.getComputedStyle(dom).width
计算最终宽度（结果不带单位px）	标准模型：内容 + 内边距 IE 模型：内容 - 边框 dom.clientWidth   标准模型：内容 + 内边距 + 边框  IE 模型：内容 dom.offsetWidth   标准模型：内容 + 内边距 + 边框 IE 模型：内容 dom.getBoundingClientRect().width

  

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

2、示例：

（这里为标准模型下的计算结果）

div1.style.width
// ""
// 只限于行内样式（这里没有设置所以为空值）

div1.currentStyle.width
// 100px
// 只有 IE 支持

window.getComputedStyle(div1).width
// 100px

div1.clientWidth
// 标准模型下：120
// IE 模型下：98

div1.offsetWidth
// 标准模型下：122
// IE 模型下：100

div1.getBoundingClientRect().width
// 标准模型下：122
// IE 模型下：100