CSS学习笔记——盒子模型

盒子模型（Box Model）是 CSS中用于描述设计和布局的基本框架。这个模型包括元素的内容（content）、内边距（padding）、边框（border）和外边距（margin）。以下是盒子模型的学习笔记：

内容（Content）：这是元素本身的内容，比如文本、图片等。其大小可以通过 width 和 height 属性来控制。

内边距（Padding）：这是内容与边框之间的空间。内边距的大小可以通过 padding 属性来控制。

边框（Border）：这是围绕元素内容和内边距的线。边框的大小和样式可以通过 border 属性来控制。
边框样式 border-style 可以设置如下值：

• none：没有边框即忽略所有边框的宽度（默认值）
• solid：边框为单实线(最为常用的)
• dashed：边框为虚线
• dotted：边框为点线

外边距（Margin）：这是元素与其他元素之间的空间。外边距的大小可以通过 margin 属性来控制。
盒子模型的计算公式：

总宽度 = 左边距（margin-left）+ 左边框（border-left）+ 左内边距（padding-left）+ 内容宽度（width）+ 右内边距（padding-right）+ 右边框（border-right）+ 右边距（margin-right）

总高度 = 上边距（margin-top）+ 上边框（border-top）+ 上内边距（padding-top）+ 内容高度（height）+ 下内边距（padding-bottom）+ 下边框（border-bottom）+ 下边距（margin-bottom）

网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元素的内外边距。

*{
	padding:0;/*清除内边距*/
	margin:0;/*清除外边距*/
	}

盒子模型的使用可以帮助我们更好地控制元素的布局和尺寸，通过调整内边距、边框和外边距，我们可以改变元素之间的距离和元素内部的布局。同时，盒子模型也支持各种 CSS 属性，如 box-sizing、margin、padding 和 border 等，可以进一步丰富我们的布局控制。