CSS盒模型

两种盒模型

content-box 内容盒：宽度只是内容的宽度
border-box 边框盒：宽度包括内容+ padding + border的宽度
content-box 内容盒：宽度只是内容的宽度

举例来说，如果写以下代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
 .content-box {
  margin:25px;
  border: 5px solid red;
  padding: 10px;
  box-sizing: content-box;
  width: 100px;
}

.border-box {
  margin:25px;
  border: 5px solid red;
  padding: 10px;
  box-sizing: border-box;
  width:100px;
}
  </style>
</head>
<body>
  <div class="content-box">
    内容盒
  </div>
  <div class="border-box">
    边框盒
  </div>

</body>
</html>
复制代码

虽然都设置了相同的宽度为100Px，但可以看到两种盒模型的宽度是不同的

内容盒的盒模型：只有内容宽度是100px,

边框盒的盒模型：padding + border + content = 100px

在线测试连接：

js.jirengu.com/ridagabubu/…

border-box更好用

请简述 CSS 盒模型是什么

参考答案

CSS 盒模型有两种，一种是 content-box 一种是 border-box。
content-box 的宽度 width 表示内容区的宽度，不包含 padding 和 border；
border-box 的宽度 width 表示内容区 + padding + border 的总和。
一般优先使用后者。