带标题红框

要在红框中的文字中添加一个标题，并且让标题加粗加大，可以通过 HTML 标签来实现，比如使用 <h1> 或 <h2> 标签来标记标题，并使用 CSS 来设置标题的样式（如加粗、加大字体等）。你可以在 red-box 内部的文本和标题部分使用不同的样式来分别调整。

下面是一个实现带标题的红框的完整 Vue 组件示例：

1. Vue 组件示例
<template>
  <div class="container">
    <div class="red-box">
      <h1 class="title">这是标题</h1>
      <p class="content">
        这是一个带折行的红字文本，文本内容会根据容器的大小进行折行显示。你可以在这里放更多的文本，看看它如何自动换行。这个文本将在标题下方显示。
      </p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'RedBoxWithTitleComponent'
};
</script>

<style scoped>
.container {
  display: flex;
  justify-content: center;
  align-items: flex-end; /* 使红框定位在页面的底部 */
  height: 100vh; /* 使容器的高度为视口的高度 */
}

.red-box {
  border: 2px solid red; /* 红色边框 */
  color: red; /* 红色文本 */
  padding: 20px; /* 内边距 */
  width: 80%; /* 让红框宽度占容器的 80% */
  word-wrap: break-word; /* 自动换行 */
  white-space: normal; /* 保证文本可以正常换行 */
  background-color: rgba(255, 0, 0, 0.1); /* 背景颜色加一点透明度 */
}

.title {
  font-size: 24px; /* 标题字体大小 */
  font-weight: bold; /* 标题加粗 */
  margin-bottom: 10px; /* 标题和内容之间的间距 */
}

.content {
  font-size: 16px; /* 内容字体大小 */
}
</style>
展开
2. 解释
HTML 部分：

使用 <h1 class="title"> 来定义标题部分。
使用 <p class="content"> 来定义文本内容部分，这样可以确保标题和文本有不同的样式。
CSS 部分：

.title 选择器用于设置标题的样式。我们设置了 font-size: 24px; 来增大字体，font-weight: bold; 来加粗标题。
.content 选择器用于设置内容的字体大小。
其他 CSS 设置与之前相同：红色边框、自动换行、底部对齐等。
3. 结果
页面底部会显示一个红框，框内包含一个加粗和加大的标题（h1 标签）。
标题和内容会根据框的大小自动换行，并且有明确的间距。
4. 调整与优化
你可以根据需要调整以下内容：

标题样式：你可以通过 font-size、font-weight 等属性进一步定制标题的外观。
内容样式：你可以调整 .content 样式，或者添加更多的文本和段落来展示不同的内容。
容器宽度和字体大小：你可以修改 .red-box 和 .content 的 width、font-size 等属性，确保它适应你的需求。
这个代码示例提供了一个包含标题和折行文本的红框，标题加粗加大，并且可以自动折行和调整样式