11.盒子模型

 1.基本概念       

        HTML盒子模型是CSS布局的基础，它将网页中的每个元素看作是一个矩形的盒子，这些盒子由内容（content）、内边距（padding）、边框（border）和外边距（margin）四个部分组成。

1. 内容（content）：这是盒子模型的核心部分，包含了元素的实际内容，如文本、图像等。内容的大小可以通过width和height属性来设置。
2. 内边距（padding）：内边距是内容周围的空间，位于内容和边框之间。这个空间是透明的，用来控制内容与边框之间的距离。内边距的大小可以通过padding属性来设置，它有1到4个值，按照顺时针即上右下左的顺序依次赋值。
3. 边框（border）：边框是围绕着内容和内边距的线条，用来分隔盒子与其他元素。边框的样式、颜色和宽度都可以通过CSS来设置。例如，border-width属性可以设置边框的宽度，border-color属性可以设置边框的颜色，border-style属性可以设置边框的样式。
4. 外边距（margin）：外边距是盒子与盒子之间的空间，用来控制盒子与页面其他元素之间的距离。外边距的大小可以通过margin属性来设置，它有1到4个值，按照顺时针即上右下左的顺序依次赋值。外边距是透明的，不会遮挡其他元素。

2.注意事项

        在盒子模型中，盒子的实际宽度和高度是由内容、内边距、边框和外边距共同决定的。盒子的实际宽度=左右边界+左右边框+左右填充+内容宽度，盒子的实际高度=上下边界+上下边框+上下填充+内容高度。

3.学习视频

11.盒子模型