box-sizing 和 dom width

refer :

https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements

先说说 box sizing

分 2 个

一个叫 content-box, 一个叫 border-box

content-box 是像外发展的

padding 和 border 都在 div 外面. (margin 当然也在外面)

border-box 是向内发展的

border 和 padding 都在 div 内.  (注意 :margin 依然是在外面哦)

这 2 种写法，造就了我们在获取 div width 的时候经常会拿到不同的值.

下面讲讲

offset width,

client width,

window.getComputedStyle(elem).getPropertyValue('width'), (简称 computed width)

getBoundingClientRect().width (简称 rect width)

假设:

b = border left right,

p = padding left right,

d = div width

1. offset width 的算法是 border to border

content box 的情况下 b10, p10, d100 = 120

border box, b10, p10, d100 = 100

因为 border box 是向内发展嘛. d100 已经包含了 b10 p10 了丫.

2. client width 的算法是 padding to padding 扣掉 scroll bar width

content box 的情况下 b10, p10, d100 = 110  (border 不算在内)

border box, b10, p10, d100 = 100 (包含在内了丫)

注意 :如果有 scroll bar 就需要拿上面的答案在减去 scroll bar 的 width 哦！

3.computed width 就是 div 计算后的 width

content box 和 border box 的唯一区别是 content box 需要扣掉 scroll bar, border box 不需要扣.

4. rect width 和 offset width 算法是一样的，唯一的区别是会计算 scale

下面在说说 img 和 canvas

这 2 个 element 都有 width 属性, 普通 div 是没有 width 属性的。

所以我们也可以通过 img.width 或者 canvas.width 来获取 width 值.

来看看它的算法.

img

img 的特色之一是它绝对不会有 scroll bar.

所以 content-box, border box 情况下都不需要顾虑到 scroll bar 的影响.

img width 的算法是 可见图的 width

content-box 是向外扩展的, 所以 padding border 都不可能影响到可见图.

border-box 的 padding border 则会影响到可见图的 width, 所以要扣除 padding 和 border 哦。

canvas

canvas 的特色之一也是它不可能有 scroll bar.

另一个特色是它不理会 border-box

https://stackoverflow.com/questions/53575931/why-box-sizing-is-not-working-with-width-height-attribute-on-canvas-element

所以它不会被 padding border 影响到。

总结 :

content 向外
border 向内
offset = border to border
client = padding to padding - scroll bar
rect width = offset + scale
computed style = content box 需要扣掉 scroll bar, border box 不需要扣, firefox 很奇葩, content 也不会扣.

img width = no scroll bar + 可见图
canvas = no box-sizing + no scroll bar