填充何时影响总宽度，何时不影响？

Question

我已经在猜测和检查基础上学习了近1年的CSS，而且我仍然无法弄清楚的一点是，为什么添加padding有时会影响元素的总宽度而othertimes则没有。有人可以用简单的语言向我解释这个吗？

Answer 1

  

MDN - Box-sizing property

     

box-sizing CSS属性用于更改用于计算元素宽度和高度的默认CSS框模型。可以使用此属性来模拟不正确支持CSS框模型规范的浏览器的行为。

---

默认情况下，填充不包含在元素的宽度/高度计算中。值得指出的是，box-sizing属性在这种情况下设置为content-box。

  

MDN - content-box value

     

这是CSS标准指定的默认样式。测量宽度和高度属性仅包括内容，但不包括填充，边框或边距。注意：填充，边框和保证金将在框外，例如IF .box {width：350px};然后你应用{border：10px solid black;} RESULT {在浏览器中呈现} .box {width：370px;}

---

如果box-sizing属性更改为border-box，则填充包含元素的宽度/高度计算，边框也是如此。

  

MDN - border-box value

     

width和height属性包括填充和边框，但不包括边距。这是文档处于Quirks模式时Internet Explorer使用的框模型。注意：填充＆am​​p;边框将在框内，例如IF .box {width：350px};那么你应用{border：10px solid black;} RESULT {在浏览器中呈现} .box {width：350px;}

进一步阅读：

• MDN box model

• MDN padding