CSS盒模型
- CSS盒模型组成结构（content、padding、border、margin）
- 标准盒模型与IE盒模型的区别
- box-sizing属性的使用
- margin外边距折叠现象
- padding和border的简写语法
试卷习题（20 题）
参考答案在文末box-sizing: content-box; 是CSS盒模型的默认值，设置width时只表示内容区域的宽度。
padding可以设置为负值，实现元素内容向边框方向挤压的效果。
只有相邻的块级元素在垂直方向上才会发生外边距折叠，行内元素和浮动元素不会发生外边距折叠。
无论使用content-box还是border-box，元素最终在页面中占据的总空间（包含margin）都是相同的。
border（边框）会增加元素盒模型的总尺寸，属于盒模型的一部分。
box-sizing: border-box; 模式下，设置的width值包含了content、padding和border，设置的高度值也同理。
关于CSS的margin属性，以下说法正确的是？
两个相邻的块级元素，上方元素设置了 margin-bottom: -30px;，下方元素设置了 margin-top: 20px;，它们之间的实际间距是多少？
设置 box-sizing: border-box; 后，元素CSS为 width: 300px; padding: 20px; border: 10px solid;，该元素的内容区宽度和盒子总宽度分别是多少？
CSS盒模型由哪四个部分组成（从内到外）？
CSS的 box-sizing 属性用于控制元素的盒模型计算方式，以下哪个不是它的有效值？
在标准盒模型下，一个元素的CSS设置为 width: 200px; height: 100px; padding: 20px; border: 5px solid; margin: 10px;，该元素实际占据的宽度和高度分别是多少？
为什么设置 margin: 0 auto; 可以让块级元素水平居中？
设置 box-sizing: content-box; 后，元素CSS为 width: 300px; padding: 20px; border: 10px solid;，该元素的内容区宽度和盒子总宽度分别是多少？
两个相邻的块级元素，上方的元素设置了 margin-bottom: 30px;，下方的元素设置了 margin-top: 20px;，它们之间的实际间距是多少？
以下哪个CSS属性可以设置元素边框的宽度？
以下关于CSS盒模型的说法，正确的有？
关于 box-sizing 属性，以下说法正确的有？
请使用border简写属性，设置一个宽度为2px、样式为实线、颜色为红色的边框：border: ;
在现代CSS开发中，通常使用以下代码将所有元素设置为border-box模式：*, *::before, *::after { ; }
