【2024】前端学习笔记8-内外边距-边框-背景
外边距：Margin
用于控制元素周围的空间，它在元素边框之外创建空白区域，可用于调整元素与相邻元素（包括父元素和兄弟元素）之间的距离。
属性：
| 属性 | 释义 |
|---|---|
| margin-top | 上外边距 |
| margin-bottom | 下外边距 |
| margin-left | 左外边距 |
| margin-right | 右外边距 |
| margin | 四个方向，顺序上右下左 |
示例：
如果我们有两个<div>元素，想要他们之间创建一个垂直间距。
<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个像素的距离。
展示效果：
其他用法：
# 表示上下左右的外边距一样都是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。注意：增加内边距会扩大原本的元素。
<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 像素半径的圆角。
<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宽度的蓝色边框的粉色背景
<body>
<div style="background-color: pink;
width: 350px; height: 200px;
border: 10px ridge blue;">
</div>
</body>
展示效果：
示例二：
设置一个宽 350 像素、高 200 像素，其背景使用名为 secai.jpg（位于 image 文件夹下）的图像，图像定位在元素中心且拉伸以完全覆盖该元素。
<body>
<div style="width: 350px; height: 200px;
background-image: url('image/secai.jpg');
background-position: center;
background-size: cover;
">
</div>
</body>
展示效果：
原文地址：https://blog.csdn.net/qq_42527269/article/details/142352277
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！