边框盒子

提示：这里可以添加本文要记录的大概内容：

默认的盒子类型是内容盒子：content-box
在内容盒子中，width和height是内容尺寸
盒子整体的尺寸=内容的尺寸+两个边框+两个内边距

css3引入了新的盒子类型，边框盒子：border-box
width和height是盒子的整体尺寸

盒子类型的样式：box-sizing

提示：以下是本篇文章正文内容，下面案例可供参考

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            box-sizing: border-box;
            width: 200px;
            height: 300px;
/* 颜色 宽度 虚实线 */
            border: red 2px solid;
            /* 四个方向的边距都是5px */
            padding: 5px;
            /* 200+10+1=214 */
        }
    </style>
</head>
<body>
    <div>
        内容
    </div>
</body>
</html>

输出效果
在这里插入图片描述
右键检查能打开开发者工具会看到：

下面结合html+css详解
HTML：

<div class="box">
  <h2>这是一个边框盒子</h2>
  <p>这是边框盒子的内容。</p>
</div>

CSS：

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

上述代码实现了一个简单的边框盒子，其中属性解释如下：

border：设置边框，包括边框宽度、样式和颜色。
padding：设置盒子内边距，即内容与边框之间的距离。
width：设置盒子宽度。
height：设置盒子高度。

通过上述代码，我们创建了一个宽度为300px，高度为200px的边框盒子，并设置了1px的黑色实线边框和10px的内边距。在盒子内部，我们加入了一个标题和一段文字。

边框盒子常用来作为容器，将其他元素放在其内部，以便于布局和样式设置。除了上述常用属性外，还可以设置边框圆角、阴影、透明度等效果。

边框盒子是HTML中最基本的盒子之一，它是由内容区域、内边距、边框和外边距组成的矩形区域。在CSS中，我们可以使用以下属性来控制边框盒子的各个部分：

width和height属性用于控制内容区域的大小。例如：

div {
  width: 200px;
  height: 100px;
}

padding属性用于控制内边距的大小。例如：

div {
  padding: 10px;
}

border属性用于控制边框的样式、宽度和颜色。例如：

div {
  border: 1px solid #000;
}

margin属性用于控制外边距的大小。例如：

div {
  margin: 10px;
}

在实际应用中，我们还可以使用其他属性来进一步定制边框盒子的样式，例如：

border-radius属性用于控制边框的圆角半径。例如：

div {
  border-radius: 10px;
}

box-shadow属性用于向边框盒子添加阴影效果。例如：

div {
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

background属性用于控制内容区域的背景色或背景图像。例如：

div {
  background: #f00;
}

最终，我们可以将上述属性组合起来，创建各种不同样式的边框盒子。例如，下面的代码会创建一个宽度为300px、内边距为20px、边框为2px实线边框、圆角半径为10px、阴影效果和灰色背景的边框盒子：

div {
  width: 300px;
  padding: 20px;
  border: 2px solid #000;
  border-radius: 10px;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
  background: #ccc;
}