CSS中关于盒模型box-sizing的解释

box-sizing: border-box(假设宽高都是100px, border是10px,padding是10px,那么你的总宽高就是100px,但是它包含了border和padding的10px,实际content大小是80px)

box-sizing: content-box(假设宽高都是100px, border是10px,padding是10px,那么你的总宽高就是120px,但是它不包含border和padding的10px,实际content大小是100px)

区别在于 

1. border-box的总宽高是 content(80) + border(10) + padding(10) border-box的大小包含border和padding

2. content-box的总宽高是 content(100) + border(10) + padding(10) content-box的大小不包含border和padding

黄昏时拿你的肋骨酿酒,百年后醉的有血有肉。
原文地址:https://www.cnblogs.com/wanan-happy/p/14596926.html