目录
1.Emmet写法
2.背景属性
（1） background-color
（2） background-image
（3） background-repeat
（4）background-position
（5）background-size
（6）background-attachment
（7）background
2.显示模式
（1）作用
①块级元素
②行内元素
③行内块元素
（2）实例
3.转换显示模式
（1）属性名：display
（2）属性值
4.综合应用
1.Emmet写法
代码的简写方式，输入缩写VS Code会自动生成对应的代码
- HTML
| 说明 | 标签结构 | Emmet |
| 类选择器 | <div class = "box">< /div > | 标签名.类名 |
| id选择器 | < div id ="box"></div> | 标签名#id名 |
| 同级标签 | <div></div><p></p> | div+p |
| 父子级标签 | <div><p></p></div> | div>p |
| 多个相同标签 | <span>1</span><span>2</span><span>3</span> | span*3 |
| 有内容的标签 | <div>内容</div> | div{内容} |
- CSS：大多数简写方式为属性单词的首字母
2.背景属性
（1） background-color
-
作用：设定元素的背景颜色。
-
含义：背景颜色就是元素背后所显示的颜色。
-
用法：直接在 CSS 中为元素指定
background-color属性。 -
属性值：可以是颜色名称（如
red、blue）、十六进制值（如#FF0000）、RGB 值（如rgb(255, 0, 0)）、RGBA 值（如rgba(255, 0, 0, 0.5)）等。
div {background-color: lightblue;
}（2） background-image
-
作用：设定元素的背景图像。
-
含义：背景图像就是元素背后显示的图片。
-
用法：使用
background-image属性并指定图像的 URL。 -
属性值：图像的 URL（如
url('image.jpg')），也可以使用线性渐变、径向渐变等。
body {background-image: url('background.jpg');
}（3） background-repeat
-
作用：定义背景图像的重复方式。（平铺方式）
-
含义：当背景图像尺寸小于元素时，可通过此属性决定图像如何重复填充。
-
用法：直接在 CSS 中为元素指定
background-repeat属性。 -
属性值：
-
repeat：默认值，背景图像在水平和垂直方向都重复（平铺，默认效果）。 -
repeat-x：背景图像只在水平方向重复（水平方向平铺）。 -
repeat-y：背景图像只在垂直方向重复（垂直方向平铺）。 -
no-repeat：背景图像不重复（不平铺）。
-
-
div {background-image: url('pattern.png');background-repeat: no-repeat; }（4）background-position -
作用：设定背景图像的起始位置。
-
含义：可以指定背景图像相对于元素的起始位置。
-
用法：直接在 CSS 中为元素指定
background-position属性。 -
属性值：可以是具体的长度值（如
10px 20px）、百分比值（如50% 50%），也可以使用关键字【如top（顶部）；bottom（底部）；left（左侧）；right（右部）；center（居中）；】。
div {background-image: url('icon.png');background-repeat: no-repeat;background-position: center;
}（5）background-size
-
作用：设定背景图像的尺寸。
-
含义：可调整背景图像的大小以适应元素。
-
用法：直接在 CSS 中为元素指定
background-size属性。 -
属性值：
-
具体的长度值（如
100px 200px）。 -
百分比值（如
50% 50%）。 -
cover：背景图像会缩放以完全覆盖元素，可能会有部分图像被裁剪。 -
contain：背景图像会缩放以适应元素，图像全部可见，但可能会有空白区域。
-
div {background-image: url('big-image.jpg');background-size: cover;
}（6）background-attachment
-
作用：设定背景图像是固定的还是随页面滚动。
-
含义：可以控制背景图像在页面滚动时的表现。
-
用法：直接在 CSS 中为元素指定
background-attachment属性。 -
属性值：
-
scroll：默认值，背景图像随页面滚动。 -
fixed：背景图像固定，不随页面滚动。 -
local：背景图像随元素内容滚动。
-
body {background-image: url('parallax.jpg');background-attachment: fixed;
}（7）background
-
作用：是一个简写属性，可同时设置多个背景属性。
-
含义：可以一次性设置背景颜色、图像、重复方式、位置等。
-
用法：直接在 CSS 中为元素指定
background属性。 -
属性值：可以按照
background-color、background-image、background-repeat、background-attachment、background-position的顺序指定值，中间用空格分隔。
div {background: lightblue url('pattern.png') no-repeat fixed center;
}2.显示模式
（1）作用
布局网页时，根据标签的显示模式选择合适的标签摆放内容
①块级元素
- 独占一行；
- 宽度默认是父级的100%；
- 添加宽高属性生效。
②行内元素
- 一行可显示多个；
- 设置宽高属性不生效；
- 宽高尺寸由内容撑开。
③行内块元素
- 一行可显示多个；
- 设置宽高属性生效；
- 宽高尺寸也可以由内容撑开。
（2）实例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>页面</title><style>.div1{background-color: brown;width: 100px;height: 100px;}.div2{background-color: orange;width: 100px;height: 100px;}/*行内：一行共存多个；尺寸由内容撑开；加宽高 不生效*/span{width: 200px;height: 200px;}.span1{background-color: brown;}.span2{background-color: orange;}/*行内块：一行共存多个；默认尺寸由内容撑开；加宽高生效*/img{width: 100px;height: 100px;}</style>
</head>
<body>
<!--块元素--><div class="div1">div标签1</div><div class="div2">div标签2</div><br>
<!--行内元素--><span class="span1">span标签1</span><span class="span2">span标签2</span><br>
<!--行内块元素--><img src="图像/灰太狼.png"/><img src="图像/灰太狼.png"/></body>
</html>效果图：
3.转换显示模式
（1）属性名：display
（2）属性值
①block：块级 （常用）
②inline-block：行内块 （常用）
③inline：行内
4.综合应用
效果图：
源代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>网页</title><style>/*默认效果*/a {display: block;width: 200px;height: 80px;background-color: #0977d2;color: #fff;text-decoration: none;text-align: center;line-height: 80px;font-size: 20px;}/*鼠标悬停效果*/a:hover{background-color: #00bbff}</style>
</head>
<body>
<a href="#">HTML</a>
<a href="#">CSS</a>
<a href="#">JavaScript</a>
<a href="#">Vue</a>
<a href="#">React</a>
</body>
</html> 
