css盒子模型实验报告总结_CSS盒子模型知识总结

本章内容：

知识点一：

盒子模型：Box Model，由有内容(element content)、填充(padding)、边框(border)、边界(margin)这四个组成部分，这四个部分都包含有top/right/bottom/left四个组成部分。

从w3school上下载的图片，以图来看看盒子模型的四个组成部分

说明：图中元素框的最内部分是实际的内容(element)；直接包围内容的是内边距(padding)，内边距呈现了元素的背景(background)；内边距的边缘是边框(border)；边框以外是外边距(margin)，外边距默认是透明的，因此不会遮挡其后的任 何元素(其实元素的margin就是其所在父元素的padding)。

一个元素放在页面上究竟需要多大尺寸时，把已经声明内边距，边框，外边距值统统与内容区域加上。当然，如果一个元素没有内边距，边框，外边距的话，也就是它的尺寸仅仅是由它的内容来决定。先忽略外边距的叠加效果，计算公式如下：

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

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