【2024】前端学习笔记8-内外边距-边框-背景

学习笔记

外边距：Margin
内边距：Padding
边框：Border
背景：Background

外边距：Margin

用于控制元素周围的空间，它在元素边框之外创建空白区域，可用于调整元素与相邻元素（包括父元素和兄弟元素）之间的距离。

属性：

属性	释义
margin-top	上外边距
margin-bottom	下外边距
margin-left	左外边距
margin-right	右外边距
margin	四个方向，顺序上右下左

示例：

如果我们有两个<div>元素，想要他们之间创建一个垂直间距。

html 复制代码

<head>
  <style>
   .box1 {
      width: 100px;
      height: 100px;
      background-color: red;
    }

   .box2 {
      width: 100px;
      height: 100px;
      background-color: blue;
      margin-top: 40px; /* 这里设置了box2的上外边距为40像素，使得它与box1有间距 */
    }
  </style>
</head>

<body>
  <div class="box1"></div>
  <div class="box2"></div>
</body>

box2设置上外边距距离box1有40个像素的距离。

展示效果：

其他用法：

bash 复制代码

# 表示上下左右的外边距一样都是20px，顺序是上右下左
margin 20px

# 设置上下边距为10px，左右边距为20px
margin 10px 20px

# 设置上外边距为10px，左右为20px，下边距为30px
margin 10px 20px 30px

内边距：Padding

用于控制元素内容与元素边框之间的空间。它会增加元素内部的空白区域，而不会影响元素周围的布局（与外边距不同，外边距会影响元素与其他元素的间距）。

属性：

属性	释义
padding-top	上内边距
padding-bottom	下内边距
padding-left	左内边距
padding-right	右内边距
padding	同时设置四个边距

示例：

将box1整体的内边距加5px。注意：增加内边距会扩大原本的元素。

html 复制代码

<head>
  <style>
   .box1 {
      width: 100px;
      height: 100px;
      background-color: red;
      padding: 5px;
    }

   .box2 {
      width: 100px;
      height: 100px;
      background-color: blue;
      margin-top: 20px;
    }
  </style>
</head>

<body>
  <div class="box1">
    <p>box1</p>
  </div>
  <div class="box2"></div>
</body>

展示效果：

边框：Border

border是用于设置 HTML 元素边框样式的 CSS 属性。

属性：

边框宽度：border-width

可以使用具体的数值表示，如1px、2px；也可以使用关键字，如thin、medium、thick来设置。

边框样式：border-style

常见的边框样式：

solid：实线边框
dashed：虚线边框
dotted：点状边框
double：双实线边框
groove：槽状边框
ridge：脊状边框
inset：凹陷边框
outset：凸起边框

边框颜色：border-color

可以使用颜色名称，如：red（红色）；十六进制颜色值、RGB值、RGBA值你、表示颜色。

边框弧度：border-radius

用于设置元素的四个角的边框圆角半径，如：10px，设置半径为10px的圆角。

示例：

通过内联 CSS 将一个div设置为宽 350 像素、高 200 像素、背景颜色为古董白、边框为 30 像素宽的黑色双实线且四个角有 15 像素半径的圆角。

html 复制代码

<body>
    <div style="background-color: antiquewhite; 
    width: 350px; height: 200px;
    border-radius: 15px;
    border: 30px double black;">
        
    </div>
</body>

展示效果：

背景：Background

background是一个用于设置元素背景的属性。它可以用来控制元素的背景颜色、背景图像、背景图像的位置、重复方式等多个方面。

属性：

背景颜色：background-color

可以使用颜色名称等方式，与上面的颜色使用方式相同。

背景图像：background-image

用于指定元素的背景图像。可以是相对路径或绝对路径指向的图像文件，也可以是数据 URI（用于内联图像）

背景重复：background-repeat

控制背景图像在元素内的重复方式。常见的取值有：

repeat：默认值，在水平和垂直方向上都重复图像，直到填满整个元素。
repeat-x：仅在水平方向重复图像。
repeat-y：仅在垂直方向重复图像。
no-repeat：背景图像不重复，只显示一次。

背景位置：background-position

用于指定背景图像在元素内的位置。可以使用关键字（如top、bottom、left、right、center）或者具体的数值（如10px 20px，表示水平方向 10 像素，垂直方向 20 像素的位置）。

背景大小：background-size

用来设置背景图像的大小。可以使用具体的数值（如100px 200px），也可以使用关键字，如：

cover：将背景图像拉伸以完全覆盖元素，可能会裁剪图像。
contain：将背景图像缩放以适应元素，保证图像完整显示，但可能会有空白区域。

背景附着：background-attachment

确定背景图像是固定在视口（fixed）还是随元素内容滚动（scroll）。

示例一：

设置一个宽350px，高200px有着10px宽度的蓝色边框的粉色背景

html 复制代码

<body>
    <div style="background-color: pink; 
    width: 350px; height: 200px;
    border: 10px ridge blue;">
        
    </div>
</body>

展示效果：

示例二：

设置一个宽 350 像素、高 200 像素，其背景使用名为 secai.jpg（位于 image 文件夹下）的图像，图像定位在元素中心且拉伸以完全覆盖该元素。

html 复制代码

<body>
    <div style="width: 350px; height: 200px;
    background-image: url('image/secai.jpg');
    background-position: center;
    background-size: cover;
    ">
        
    </div>
</body>

展示效果：