CSS3进阶知识：CSS3盒子模型，box-sizing:content-box和box-sizing:border-box的讲解

头顶一只喵喵2026-02-04 19:51

css3可以通过box-sizing来指定盒模型，它有两个值content-box、border-box

这样就会出现两种情况：

1.box-sizing:content-box 盒子大小为width+padding+border(以前默认的)

2.box-sizing:border-box盒子大小为width

举例说明：

html 复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .test1 {
        width: 100px;
        height: 100px;
        padding: 50px;
        margin: 50px;
        box-sizing: content-box;
        background-color: red;
        /* 上面是默认值 */
      }
      .test2 {
        width: 100px;
        height: 100px;
        padding: 50px;
        margin: 50px;
        box-sizing: border-box;
        background-color: green;
      }
    </style>
  </head>
  <body>
    <div class="test1"></div>
    <div class="test2"></div>
  </body>
</html>

上一篇：Java代码变更影响分析（一）

下一篇：深入理解 CSS3 滤镜（filter）：从基础到实战进阶