CSS盒模型

CSS盒模型由哪四个部分组成（从内到外）？

在标准盒模型下，一个元素的CSS设置为 width: 200px; height: 100px; padding: 20px; border: 5px solid; margin: 10px;，该元素实际占据的宽度和高度分别是多少？

以下哪个CSS属性可以设置元素边框的宽度？

请使用border简写属性，设置一个宽度为2px、样式为实线、颜色为红色的边框：border: _____________;

border（边框）会增加元素盒模型的总尺寸，属于盒模型的一部分。

关于CSS的margin属性，以下说法正确的是？

设置 box-sizing: content-box; 后，元素CSS为 width: 300px; padding: 20px; border: 10px solid;，该元素的内容区宽度和盒子总宽度分别是多少？

box-sizing: content-box; 是CSS盒模型的默认值，设置width时只表示内容区域的宽度。

设置 box-sizing: border-box; 后，元素CSS为 width: 300px; padding: 20px; border: 10px solid;，该元素的内容区宽度和盒子总宽度分别是多少？

box-sizing: border-box; 模式下，设置的width值包含了content、padding和border，设置的高度值也同理。

CSS的 box-sizing 属性用于控制元素的盒模型计算方式，以下哪个不是它的有效值？

关于 box-sizing 属性，以下说法正确的有？

在现代CSS开发中，通常使用以下代码将所有元素设置为border-box模式：*, *::before, *::after { ______________________; }

无论使用content-box还是border-box，元素最终在页面中占据的总空间（包含margin）都是相同的。

两个相邻的块级元素，上方的元素设置了 margin-bottom: 30px;，下方的元素设置了 margin-top: 20px;，它们之间的实际间距是多少？

只有相邻的块级元素在垂直方向上才会发生外边距折叠，行内元素和浮动元素不会发生外边距折叠。

两个相邻的块级元素，上方元素设置了 margin-bottom: -30px;，下方元素设置了 margin-top: 20px;，它们之间的实际间距是多少？

以下关于CSS盒模型的说法，正确的有？

为什么设置 margin: 0 auto; 可以让块级元素水平居中？

padding可以设置为负值，实现元素内容向边框方向挤压的效果。