CSS 教程

纯干货教学，从零开始学习 CSS

CSS 盒模型

了解 CSS 盒模型的概念、组成部分以及如何使用它来控制元素的布局和尺寸。

什么是 CSS 盒模型？

CSS 盒模型是 CSS 中用于布局和计算元素尺寸的基本概念。每个 HTML 元素都可以被视为一个矩形的盒子，这个盒子由以下几个部分组成：

盒模型的组成部分

  1. 内容区 (Content)：元素的实际内容，如文本、图片等。
  2. 内边距 (Padding)：内容区与边框之间的空间。
  3. 边框 (Border)：围绕内边距和内容区的边界。
  4. 外边距 (Margin)：元素与其他元素之间的空间。
/* 盒模型各部分的示意图 */
.box {
    /* 内容区 */
    width: 200px;
    height: 100px;
    
    /* 内边距 */
    padding: 20px;
    
    /* 边框 */
    border: 2px solid #333;
    
    /* 外边距 */
    margin: 10px;
}

盒模型的类型

CSS 中有两种盒模型类型：

1. 标准盒模型 (W3C 盒模型)

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

  • 总宽度 = width + padding-left + padding-right + border-left + border-right
  • 总高度 = height + padding-top + padding-bottom + border-top + border-bottom

2. IE 盒模型 (怪异盒模型)

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

  • 总宽度 = width (包含内容区、内边距和边框)
  • 总高度 = height (包含内容区、内边距和边框)

box-sizing 属性

CSS 的 box-sizing 属性用于控制元素使用哪种盒模型计算尺寸。

值 描述
content-box 默认值，使用标准盒模型。width 和 height 仅指内容区的尺寸。
border-box 使用 IE 盒模型。width 和 height 包括内容区、内边距和边框。
inherit 继承父元素的 box-sizing 值。 
/* 使用标准盒模型 */
.standard-box {
    box-sizing: content-box;
    width: 200px;
    padding: 20px;
    border: 2px solid #333;
    /* 实际宽度: 200 + 20*2 + 2*2 = 244px */
}

/* 使用 IE 盒模型 */
.ie-box {
    box-sizing: border-box;
    width: 200px;
    padding: 20px;
    border: 2px solid #333;
    /* 实际宽度: 200px (包含 padding 和 border) */
}

💡 提示

在实际开发中，推荐使用 box-sizing: border-box;，因为它使元素的尺寸计算更加直观和可控。

盒模型相关属性

1. 宽度和高度属性

属性 描述 示例
width 设置元素的宽度 width: 200px;
height 设置元素的高度 height: 100px;
max-width 设置元素的最大宽度 max-width: 500px;
max-height 设置元素的最大高度 max-height: 300px;
min-width 设置元素的最小宽度 min-width: 100px;
min-height 设置元素的最小高度 min-height: 50px;

2. 内边距属性

属性 描述 示例
padding 设置元素的内边距（简写属性） padding: 10px;
padding-top 设置元素的上内边距 padding-top: 10px;
padding-right 设置元素的右内边距 padding-right: 15px;
padding-bottom 设置元素的下内边距 padding-bottom: 10px;
padding-left 设置元素的左内边距 padding-left: 15px;

3. 边框属性

属性 描述 示例
border 设置元素的边框（简写属性） border: 1px solid #333;
border-width 设置元素的边框宽度 border-width: 2px;
border-style 设置元素的边框样式 border-style: solid;
border-color 设置元素的边框颜色 border-color: #333;
border-radius 设置元素的边框圆角 border-radius: 4px;

4. 外边距属性

属性 描述 示例
margin 设置元素的外边距（简写属性） margin: 10px;
margin-top 设置元素的上外边距 margin-top: 10px;
margin-right 设置元素的右外边距 margin-right: 15px;
margin-bottom 设置元素的下外边距 margin-bottom: 10px;
margin-left 设置元素的左外边距 margin-left: 15px;

盒模型实际应用示例

示例 1：基本盒模型

<div class="box-example">
    这是一个盒模型示例
</div>

<style>
.box-example {
    width: 200px;
    height: 100px;
    padding: 20px;
    border: 2px solid #333;
    margin: 10px;
    background-color: #f0f0f0;
}
</style>

示例 2：使用 box-sizing: border-box

<div class="box-border-box">
    这个盒子使用了 box-sizing: border-box
</div>

<style>
.box-border-box {
    box-sizing: border-box;
    width: 200px;
    height: 100px;
    padding: 20px;
    border: 2px solid #333;
    margin: 10px;
    background-color: #e0f7fa;
}
</style>

示例 3：外边距合并

<div class="box1">盒子 1</div>
<div class="box2">盒子 2</div>

<style>
.box1 {
    margin-bottom: 20px;
    padding: 10px;
    background-color: #f0f0f0;
}

.box2 {
    margin-top: 10px;
    padding: 10px;
    background-color: #e0f7fa;
}
/* 实际外边距是 20px，不是 30px，因为外边距合并了 */
</style>

盒模型使用技巧

  • 使用 box-sizing: border-box：为所有元素设置 box-sizing: border-box; 可以使尺寸计算更加一致和可预测。
  • 外边距合并：注意相邻元素的外边距会合并，取较大的值。
  • 百分比宽度：使用百分比宽度时，要考虑父元素的宽度和盒模型的计算方式。
  • 最小宽度和最大宽度：使用 min-width 和 max-width 可以确保元素在不同屏幕尺寸下的显示效果。
  • 边框圆角：使用 border-radius 属性可以创建圆角效果，提升界面美观度。
  • 内边距和外边距的简写：使用简写属性可以减少代码量，如 padding: 10px 15px; 表示上下内边距为 10px，左右内边距为 15px。

盒模型总结

  • CSS 盒模型由内容区、内边距、边框和外边距组成。
  • 标准盒模型中，width 和 height 仅指内容区的尺寸。
  • IE 盒模型中，width 和 height 包括内容区、内边距和边框。
  • 使用 box-sizing 属性可以控制使用哪种盒模型。
  • 推荐使用 box-sizing: border-box; 使尺寸计算更加直观。
  • 盒模型是 CSS 布局的基础，理解盒模型对于掌握 CSS 布局至关重要。