box-sizing 和 dom width

Posted 2021-01-31 keatkeat

先说说 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 哦！