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

Question

我已经在猜测和检查的基础上学习了近1年的CSS,而且我仍然无法弄清楚的一件事是为什么添加padding有时会影响元素的总宽度而其他部分则没有.有人能用简单的语言向我解释一下吗？

Answer 1

MDN - 盒子大小的属性

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

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

MDN - content-box价值

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

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

MDN - border-box价值

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

进一步阅读:

• MDN盒子模型

• MDN填充