项目实训个人任务css样式其二

css的样式和许多的设置相关，本篇Blog主要聚焦于css的盒模型来写

css盒模型（Box Model）是css布局的基础，它决定了元素如何在页面上渲染其尺寸以及与其他元素的空间和位置关系。每个HTML元素都可以看作是由内容、内边距（padding）、边框（border）和外边距（margin）组成的矩形盒子。

css盒模型的组成主要有以下几点：

内容

元素的实际内容，比如文本、图片等。

内容的大小可以通过 width 和 height 属性设置。

内边距

内边距是内容与其边框之间的空间。

内边距的大小可以通过 padding 属性设置，可以分别设置上、右、下、左四个方向的内边距，或者设置统一的内边距。

内边距是透明的，且会占用布局空间。

边框

边框是紧接内边距的线，包围在内容和内边距外面。

边框的大小、样式和颜色可以通过 border 属性设置。

边框会占用布局空间。

外边距

外边距是边框与其他元素之间的空间。

外边距的大小可以通过 margin 属性设置，同样可以分别设置上、右、下、左四个方向的外边距，或者设置统一的外边距。

外边距是透明的，且会与其他元素的外边距合并（margin collapsing）。

在盒模型中，一个元素的 width 和 height 指的是内容区域的宽度和高度，而不包括内边距、边框和外边距。但是，元素在页面上占用的总空间是其内容、内边距、边框和外边距的总和。

另外，css3引入了box-sizing属性，它允许你改变默认的盒模型计算方式。当box-sizing设置为border-box时，width和height属性将包括内容、内边距和边框，但不包括外边距。这可以使布局更加直观和易于控制。

理解并熟练运用CSS盒模型是前端开发的基础，它可以帮助你更好地控制页面元素的布局和样式。