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