盒子模型

 

 

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

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

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

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

  • 使用
    ?

    1 2 3 4 5 6 7

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

     

 

• • demo

    ?

    1 2 3 4 5

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

1. 为什么要这样设计

简化

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

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

3. demo

 

 demo

让整个页面填充一个图片

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

<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>