盒模型与值单位

Kpsmart2025年3月2日大约 8 分钟

盒模型与值单位

CSS盒模型是网页布局的基础，而值和单位则用于定义元素的尺寸、间距等属性。本章将详细介绍这些概念。

CSS盒模型

在CSS中，所有元素都被视为一个矩形盒子。这个盒子由内容区域（content）、内边距（padding）、边框（border）和外边距（margin）组成。

盒模型的组成部分

内容区域（Content）：包含元素的实际内容，如文本、图像或其他媒体。尺寸由width和height属性设置。
内边距（Padding）：内容区域与边框之间的空间。内边距是透明的，会显示背景色或背景图像。可以使用padding属性设置。
边框（Border）：围绕内容和内边距的线条。可以使用border属性设置其宽度、样式和颜色。
外边距（Margin）：边框外的空间，用于分隔元素与其他元素。外边距是透明的，不会显示背景色。可以使用margin属性设置。

标准盒模型与替代盒模型

CSS有两种盒模型：标准盒模型和替代（IE）盒模型。它们的区别在于计算元素总宽度和高度的方式。

标准盒模型（Content-Box）

在标准盒模型中，width和height属性只设置内容区域的尺寸。元素的总宽度/高度是内容宽度/高度加上内边距、边框和外边距。

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

在这个例子中，元素的总宽度是：

内容宽度：300px
内边距：左右各20px，共40px
边框：左右各10px，共20px
总宽度：300px + 40px + 20px = 360px（不包括外边距）

替代盒模型（Border-Box）

在替代盒模型中，width和height属性设置的是内容区域、内边距和边框的总和。也就是说，内边距和边框会挤压内容区域，而不是增加元素的总尺寸。

要使用替代盒模型，可以设置box-sizing属性：

.box {
  box-sizing: border-box;
  width: 300px;
  padding: 20px;
  border: 10px solid black;
  margin: 50px;
}

在这个例子中，元素的总宽度是：

总宽度：300px（包括内容、内边距和边框）
内边距：左右各20px，共40px
边框：左右各10px，共20px
内容宽度：300px - 40px - 20px = 240px

替代盒模型通常更容易使用，因为元素的最终尺寸就是你设置的width和height值。许多开发者会为所有元素设置替代盒模型：

* {
  box-sizing: border-box;
}

盒模型相关属性

内容尺寸

.box {
  width: 300px;      /* 设置内容区域宽度 */
  height: 200px;     /* 设置内容区域高度 */
  max-width: 500px;  /* 设置最大宽度 */
  min-width: 100px;  /* 设置最小宽度 */
  max-height: 300px; /* 设置最大高度 */
  min-height: 50px;  /* 设置最小高度 */
}

内边距

.box {
  padding-top: 10px;    /* 上内边距 */
  padding-right: 20px;  /* 右内边距 */
  padding-bottom: 10px; /* 下内边距 */
  padding-left: 20px;   /* 左内边距 */
  
  /* 简写形式 */
  padding: 10px;                  /* 四边相同 */
  padding: 10px 20px;             /* 上下10px，左右20px */
  padding: 10px 20px 15px;        /* 上10px，左右20px，下15px */
  padding: 10px 20px 15px 25px;   /* 上右下左，顺时针方向 */
}

边框

.box {
  border-width: 2px;           /* 边框宽度 */
  border-style: solid;         /* 边框样式：solid, dashed, dotted, double等 */
  border-color: black;         /* 边框颜色 */
  
  /* 简写形式 */
  border: 2px solid black;     /* 宽度、样式、颜色 */
  
  /* 单边设置 */
  border-top: 1px dashed red;  /* 上边框 */
  border-right: 2px solid blue;/* 右边框 */
  border-bottom: 3px dotted green; /* 下边框 */
  border-left: 4px double orange;  /* 左边框 */
  
  /* 圆角边框 */
  border-radius: 5px;          /* 所有角相同 */
  border-radius: 5px 10px;     /* 左上右下5px，右上左下10px */
  border-radius: 5px 10px 15px 20px; /* 左上、右上、右下、左下 */
}

外边距

.box {
  margin-top: 10px;    /* 上外边距 */
  margin-right: 20px;  /* 右外边距 */
  margin-bottom: 10px; /* 下外边距 */
  margin-left: 20px;   /* 左外边距 */
  
  /* 简写形式 */
  margin: 10px;                  /* 四边相同 */
  margin: 10px 20px;             /* 上下10px，左右20px */
  margin: 10px 20px 15px;        /* 上10px，左右20px，下15px */
  margin: 10px 20px 15px 25px;   /* 上右下左，顺时针方向 */
  
  /* 居中元素 */
  margin: 0 auto;                /* 上下0，左右自动（水平居中） */
  
  /* 负外边距 */
  margin-top: -10px;             /* 元素向上移动10px */
}

外边距折叠

当两个垂直相邻的元素都设置了外边距时，这些外边距会发生"折叠"，即它们合并成一个外边距，其大小等于两个外边距中的较大者。

<div class="box1">Box 1</div>
<div class="box2">Box 2</div>

.box1 {
  margin-bottom: 20px;
}

.box2 {
  margin-top: 30px;
}

在这个例子中，两个盒子之间的实际间距是30px（较大的那个），而不是50px（两者之和）。

外边距折叠只发生在垂直方向，水平外边距不会折叠。

CSS值和单位

CSS属性接受各种类型的值，每种值都有相应的单位。

长度单位

绝对长度单位

绝对长度单位与设备无关，在所有媒体上都具有相同的大小。

px（像素）：屏幕上的一个点。
pt（点）：1/72英寸。
pc（派卡）：12点，1/6英寸。
in（英寸）：1英寸。
cm（厘米）：1厘米。
mm（毫米）：1毫米。

.box {
  width: 100px;   /* 100像素 */
  margin: 0.5in;  /* 0.5英寸 */
  padding: 1cm;   /* 1厘米 */
}

相对长度单位

相对长度单位相对于其他长度值，更适合响应式设计。

em：相对于元素的字体大小。
rem：相对于根元素（html）的字体大小。
vw：视口宽度的1%。
vh：视口高度的1%。
vmin：视口较小尺寸的1%。
vmax：视口较大尺寸的1%。
%：相对于父元素的百分比。

html {
  font-size: 16px;
}

.box {
  font-size: 1.5em;    /* 相对于父元素的1.5倍字体大小 */
  width: 20rem;        /* 相对于根元素的20倍字体大小 */
  height: 50vh;        /* 视口高度的50% */
  margin: 5%;          /* 相对于父元素宽度的5% */
}

颜色单位

CSS提供了多种指定颜色的方式：

关键字：预定义的颜色名称，如red、blue、transparent等。
十六进制：#RRGGBB或简写形式#RGB。
RGB：rgb(255, 0, 0)表示红色。
RGBA：rgba(255, 0, 0, 0.5)表示半透明红色。
HSL：hsl(0, 100%, 50%)表示红色（色相、饱和度、亮度）。
HSLA：hsla(0, 100%, 50%, 0.5)表示半透明红色。

.box {
  color: red;                  /* 关键字 */
  background-color: #00ff00;   /* 十六进制 */
  border-color: rgb(0, 0, 255);/* RGB */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* RGBA */
}

其他单位类型

角度：deg（度）、rad（弧度）、grad（梯度）、turn（圈）。
时间：s（秒）、ms（毫秒）。
频率：Hz（赫兹）、kHz（千赫兹）。
分辨率：dpi（每英寸点数）、dpcm（每厘米点数）、dppx（每像素点数）。

.box {
  transform: rotate(45deg);    /* 旋转45度 */
  transition: all 0.5s ease;   /* 0.5秒过渡 */
}

计算值：calc()函数

calc()函数允许在CSS中进行数学计算，甚至可以混合不同的单位。

.box {
  width: calc(100% - 20px);    /* 父元素宽度减去20像素 */
  height: calc(100vh - 5rem);  /* 视口高度减去5rem */
  margin: calc(1em + 10px);    /* 1em加上10像素 */
}

calc()函数支持加法、减法、乘法和除法运算。

实例：综合运用盒模型和单位

<!DOCTYPE html>
<html>
<head>
  <title>盒模型与值单位示例</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    
    body {
      font-family: Arial, sans-serif;
      line-height: 1.6;
      padding: 20px;
    }
    
    .container {
      width: 80%;
      max-width: 1200px;
      margin: 0 auto;
      background-color: #f4f4f4;
      padding: 2rem;
      border: 1px solid #ddd;
      border-radius: 5px;
    }
    
    .box {
      width: calc(50% - 20px);
      height: 200px;
      margin: 10px;
      padding: 1.5rem;
      background-color: #fff;
      border: 2px solid #333;
      border-radius: 10px;
      float: left;
    }
    
    .box-content {
      height: 100%;
      overflow: auto;
      font-size: 0.9em;
    }
    
    .highlight {
      background-color: rgba(255, 255, 0, 0.3);
      padding: 0.5em;
      border-left: 3px solid #ff9900;
    }
    
    @media (max-width: 768px) {
      .box {
        width: 100%;
        float: none;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>盒模型与值单位示例</h1>
    <div class="box">
      <h2>替代盒模型</h2>
      <div class="box-content">
        <p>在替代盒模型中，width和height包含内容区域、内边距和边框。</p>
        <p class="highlight">元素的总宽度 = width（包含padding和border）+ margin</p>
      </div>
    </div>
  </div>
</body>
</html>

总结

在本章中，我们学习了：

CSS盒模型的基本概念和组成部分
标准盒模型和替代盒模型的区别
盒模型相关的CSS属性（内容尺寸、内边距、边框、外边距）
外边距折叠现象
CSS中的各种值和单位类型
- 长度单位（绝对单位和相对单位）
- 颜色单位
- 其他单位类型
calc()函数的使用

练习

创建一个包含内边距、边框和外边距的盒子，观察不同盒模型下的表现
使用不同的长度单位创建响应式布局
尝试使用calc()函数进行混合单位计算
实践外边距折叠现象
创建一个使用各种颜色单位的样式表