盒模型# 

CSS 盒模型是 CSS 布局的基础，它描述了元素如何占据空间以及如何与其他元素交互。理解盒模型对于掌握 CSS 布局至关重要。

标准盒模型# 

CSS 盒模型由以下几个部分组成：

1. 内容区域（Content）：元素的实际内容，如文本、图片等
2. 内边距（Padding）：内容区域与边框之间的空白区域
3. 边框（Border）：围绕内边距的线
4. 外边距（Margin）：元素与其他元素之间的空白区域

这些部分共同构成了元素的盒模型，决定了元素在页面中的大小和位置。

在标准盒模型中，元素的宽度和高度只包括内容区域，不包括内边距、边框和外边距。

.box {
  width: 300px;
  height: 200px;
  padding: 20px;
  border: 5px solid black;
  margin: 10px;
}

在这个例子中：

• 内容区域的宽度为 300px，高度为 200px
• 元素的总宽度为 300px + 20px + 20px + 5px + 5px = 350px
• 元素的总高度为 200px + 20px + 20px + 5px + 5px = 250px

宽度与高度（width & height）# 

width 和 height 属性# 

width 和 height 属性用于设置元素内容区域的宽度和高度。

.box {
  width: 300px;
  height: 200px;
}

最小和最大尺寸# 

可以使用 min-width、min-height、max-width 和 max-height 属性来限制元素的尺寸。

.box {
  min-width: 200px;
  max-width: 600px;
  min-height: 100px;
  max-height: 400px;
}

这些属性对于创建响应式布局非常有用，可以确保元素在不同屏幕尺寸下保持合适的大小。

百分比尺寸# 

可以使用百分比来设置元素的宽度和高度，这样元素的大小会相对于其父元素。

.container {
  width: 80%;
  height: 50%;
}

视口单位# 

CSS3 引入了视口单位，可以相对于视口（浏览器窗口）设置元素的尺寸。

.header {
  width: 100vw;  /* 视口宽度的 100% */
  height: 50vh;  /* 视口高度的 50% */
}

常用的视口单位包括：

• vw：视口宽度的百分比
• vh：视口高度的百分比
• vmin：视口宽度和高度中较小值的百分比
• vmax：视口宽度和高度中较大值的百分比

边距与填充（margin & padding）# 

外边距（Margin）# 

外边距是元素与其他元素之间的空白区域，用于控制元素之间的间距。

.box {
  margin: 10px;  /* 上、右、下、左外边距均为 10px */
}

外边距可以单独设置：

.box {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 15px;
  margin-left: 25px;
}

也可以使用简写形式：

.box {
  margin: 10px 20px;  /* 上下 10px，左右 20px */
}

.box {
  margin: 10px 20px 15px 25px;  /* 上 10px，右 20px，下 15px，左 25px */
}

内边距（Padding）# 

内边距是内容区域与边框之间的空白区域，用于控制内容与边框之间的距离。

.box {
  padding: 10px;  /* 上、右、下、左内边距均为 10px */
}

内边距可以单独设置：

.box {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 15px;
  padding-left: 25px;
}

也可以使用简写形式：

.box {
  padding: 10px 20px;  /* 上下 10px，左右 20px */
}

.box {
  padding: 10px 20px 15px 25px;  /* 上 10px，右 20px，下 15px，左 25px */
}

外边距折叠# 

当两个垂直相邻的元素都有外边距时，它们的外边距会发生折叠，取两者中的较大值。

.box1 {
  margin-bottom: 20px;
}
.box2 {
  margin-top: 30px;
}

在这个例子中，box1 和 box2 之间的实际间距为 30px，而不是 50px。

边框与阴影（border & box-shadow）# 

边框（Border）# 

边框是围绕元素内容区域和内边距的线。

边框样式# 

border-style 属性设置边框的样式：

.box {
  border-style: solid;
}

常用的边框样式包括：

• none：无边框
• solid：实线
• dashed：虚线
• dotted：点线
• double：双线
• groove：凹槽
• ridge：凸槽
• inset：内嵌
• outset：外嵌

边框宽度# 

border-width 属性设置边框的宽度：

.box {
  border-width: 2px;
}

边框颜色# 

border-color 属性设置边框的颜色：

.box {
  border-color: #333;
}

边框简写属性# 

border 属性可以一次性设置边框的样式、宽度和颜色：

.box {
  border: 2px solid #333;
}

单独设置各边边框# 

可以单独设置元素各边的边框：

.box {
  border-top: 2px solid #333;
  border-right: 1px dashed #666;
  border-bottom: 3px double #999;
  border-left: 1px dotted #ccc;
}

圆角边框# 

border-radius 属性用于设置边框的圆角：

.box {
  border-radius: 10px;
}

可以单独设置各角的圆角：

.box {
  border-radius: 10px 20px 15px 5px;  /* 左上、右上、右下、左下 */
}

阴影（Box Shadow）# 

box-shadow 属性用于为元素添加阴影效果：

.box {
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}

box-shadow 属性的值包括：

• 水平偏移：正值向右，负值向左
• 垂直偏移：正值向下，负值向上
• 模糊半径：值越大，阴影越模糊
• 扩散半径：值越大，阴影越大
• 颜色：阴影的颜色

可以添加多个阴影：

.box {
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5),
              -5px -5px 10px rgba(0, 0, 0, 0.3);
}

内阴影# 

可以使用 inset 关键字创建内阴影：

.box {
  box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.5);
}

动手试试# 

让我们来创建一个漂亮的卡片组件，练习盒模型的各种属性。

这个练习包含了以下要点：

1. 盒模型基础：

   • 使用 box-sizing: border-box 设置盒模型类型
   • 使用 width 和 height 控制元素尺寸
   • 使用 padding 设置内边距
   • 使用 margin 设置外边距
   • 使用 border 和 border-radius 设置边框样式

2. 布局技巧：

   • 使用 max-width 限制容器宽度
   • 使用 margin: auto 实现水平居中
   • 使用 overflow: hidden 处理溢出内容

3. 视觉效果：

   • 使用 box-shadow 添加阴影效果
   • 使用 transition 添加过渡动画
   • 使用 transform 实现悬停效果

你可以尝试修改这些样式，看看不同的效果。比如：

• 改变卡片的尺寸和内边距
• 调整边框样式和圆角
• 修改阴影效果
• 添加更多的动画效果