css盒子模型实验报告总结_html盒子模型和CSS难点总结

小马把写HTML了解为就是盒子的嵌套和堆叠，一切皆盒子。CSS定位和浮动小马觉得是前台里算难了解的一部分吧，在此总结复盘下。

HTML盒子模型

话不多说，直接上一段代码(参考来自这里)：div { width: 400px;

height: 100px;

border: 6px solid #949599;

margin: 20px;

padding: 20px;

}

效果(图片来自这里)：

这里非常有趣，实际所占的空间是：

width = margin-right + border-right + padding-right + width + padding-left + border-left + margin-left

height = margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom

也就是：

Width: 492 = 20 + 6 + 20 + 400 + 20 + 6 + 20

Height: 192 = 20 + 6 + 20 + 100 + 20 + 6 + 20

为什么呢？这就是盒子模型的概念。特别值得注意的是padding的白色背景，是的，它的空间是和内容空间一样的，也就是假如内容部分是红色背景&