盒子模型

 

 

• 内容（Content）：这是盒子的主体部分，包含实际的内容，如文本、图片或其他媒体。

• 填充（Padding）：这是内容区域和边框之间的空间。填充增加了盒子的大小，但不包括背景颜色或背景图像。

• 边框（Border）：div边框的宽度。

• 边距（Margin）：这是盒子最外层的空间，决定了盒子与其他元素之间的距离。边距不会增加盒子的实际大小，它是透明的。

  • 使用

    /* 单独指定 */
    .element {
      margin-top: 10px;
      margin-right: 20px;
      margin-bottom: 30px;
      margin-left: 40px;
    }
    

     

 

• • demo

    margin: 30px auto;
    上边距为 30 像素
    下边距为 30 像素
    左边距为自动（通常用于实现居中）
    右边距为自动（通常用于实现居中）
    

1. 为什么要这样设计

简化

2. 一个div就是一个盒子吗

div元素是<template>的根元素，并且在页面上会被渲染为一个实际的盒子。你可以对这个div应用CSS样式

3. demo

 

 demo

让整个页面填充一个图片

<template>
  <div class="background-image">
    <!-- 这里可以放其他内容 -->
    你好啊
  </div>
</template>

<style>
.background-image {
  background-image: url('https://img1.baidu.com/it/u=2559867097,3726275945&fm=253&fmt=auto&app=138&f=JPEG?w=1333&h=500'); /* 替换为你的图片路径 */
  background-size: cover;    /*设置背景图片的大小，使其足以覆盖整个元素区域，而不必完全匹配元素的尺寸。这意味着图片会被缩放以完全覆盖元素，可能某些部分会被裁剪以保持图片的纵横比 */
  background-position: center;  /* 将背景图片定位到元素的中心*/
  position: absolute;
  top: 0;  /* 元素的顶部和左边与其包含块的顶部和左边对齐*/
  left: 0;
  width: 100%;  /*设置元素的宽度和高度为100%，*/
  height: 100%;
}
</style>