css盒子模型

        CSS 盒子模型是网页设计中的一个基本概念，用于描述元素在页面上的占用空间。每个元素在 CSS 中被视为一个盒子

css盒子模型结构：

包含以下几个部分：

• 内容区（Content）：实际显示的内容，如文本或图片。

• 内边距（Padding）：内容与边框之间的空间，增加元素的可读性。

• 边框（Border）：包围内容和内边距的边框，可以设置宽度、样式和颜色。

• 外边距（Margin）：盒子与其他元素之间的空间，用于控制布局和元素间的距离。

内容属性值：width、heigh；

边框属性值：solid（实线）、dashed（虚线）

示例：

<style>
      div {
          width: 200px;
          height: 120px;
          border: 10px solid red;
      }

</style>

盒子模型的计算方式

元素的总宽度和高度可以通过以下公式计算：

• 总宽度 = 内容宽度 + 左内边距 + 右内边距 + 左边框 + 右边框 + 左外边距 + 右外边距
• 总高度 = 内容高度 + 上内边距 + 下内边距 + 上边框 + 下边框 + 上外边距 + 下外边距
• 并不只是内容区域的大小

内减模式

如果不想盒子大小被border和padding撑大，即可给盒子设置box-sizing 属性

• content-box（默认值）：宽度和高度只包含内容区。
• border-box：宽度和高度包括内容区、内边距和边框。

使用 border-box 可以更容易地控制元素的大小和布局。