行内元素
CSS中的行内元素（Inline Elements）是指那些默认情况下在一行内显示的元素，它们不会独占一行。以下是一些常见的CSS行内元素：
-
<span>：用于在文本中标记或包裹特定的内容。 -
<a>：用于创建超链接。 -
<strong>：用于表示强调的文本。 -
<em>：用于表示强调的斜体文本。 -
<img>：用于插入图像。 -
<input>：用于创建各种类型的输入字段。 -
<label>：用于为表单元素添加标签。 -
<button>：用于创建按钮。
这些元素默认情况下都是行内元素，它们可以在一行内显示，并且可以与其他行内元素共享同一行。可以使用CSS的display属性来修改元素的显示方式，例如将行内元素转换为块级元素或其他类型的元素。
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>行内元素</title>
</head>
<!-- 无法设置宽高，而是本身的变化而变化 -->
<body>
<span style="background-color: aqua;">哇哈哈哈哈</span>
<span>哇哈哈哈哈</span> <span>哇哈哈哈哈</span> <span>哇哈哈哈哈</span>
</body>
</html>
块级元素
CSS中的块级元素（Block Elements）是指那些默认情况下会独占一行的元素，它们会在页面上以块的形式显示。以下是一些常见的CSS块级元素：
-
<div>：用于创建一个无语义的块级容器，常用于布局和组织页面结构。 -
<p>：用于表示段落。 -
<h1> - <h6>：用于表示标题，其中<h1>是最高级别的标题，<h6>是最低级别的标题。 -
<ul>：用于创建无序列表。 -
<ol>：用于创建有序列表。 -
<li>：用于表示列表项。 -
<table>：用于创建表格。 -
<form>：用于创建表单。
<!DOCTYPE html>
<html>
<head>
<title>块级元素demo</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
nav {
background-color: #f2f2f2;
padding: 10px;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav ul li {
display: inline-block;
margin-right: 10px;
}
main {
padding: 20px;
}
footer {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<header>
<h1>CSS块级元素demo</h1>
</header>
<nav>
<ul>
<li><a href="#">主页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">内容</a></li>
</ul>
</nav>
<main>
<h2>欢迎来到我的HTML网页</h2>
<p>这个网页主要展示的是CSS块级元素的demo</p>
</main>
<footer>
©miaow
</footer>
</body>
</html>
行内元素-块级元素的模式切换
display属性：使用CSS的display属性可以改变元素的显示模式。通过将行级元素设置为display: block;，可以将其转换为块级元素；通过将块级元素设置为display: inline;，可以将其转换为行级元素。例如：
/* 将行级元素转换为块级元素 */
span {
display: block;
}
/* 将块级元素转换为行级元素 */
div {
display: inline;
}**包裹元素：**可以使用一个父级元素来包裹行级元素或块级元素，从而改变其显示模式。通过将行级元素放置在块级元素中，或将块级元素放置在行级元素中，可以实现模式转换。例如：
<!-- 将行级元素包裹在块级元素中 -->
<div>
<span>行级元素</span>
</div>
<!-- 将块级元素包裹在行级元素中 -->
<span>
<div>块级元素</div>
</span>需要注意的是，并非所有的行级元素都可以转换为块级元素，也并非所有的块级元素都可以转换为行级元素。具体转换效果还取决于元素本身的特性和CSS规则的限制。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>模式转换</title>
<style>
a {
width: 100px;
hegiht: 200px;
background-color: aqua;
/* 由于是行内元素所以无法设置宽高，应该模式转换，转成块级元素 */
display: block;
}
div {
width: 100px;
hegiht: 200px;
background-color: red;
/* 转换行内元素 */
display: inline;
}
</style>
</head>
<body>
<a href="#">我是链接</a>
<div>你好</div>
<div>你好</div>
<div>你好</div>
</body>
</html>
背景图片
在CSS中，可以使用background-image属性来设置元素的背景图像。
使用相对路径或者绝对路径：
.element {
background-image: url("path/to/image.jpg");
}使用URL链接：
.element {
background-image: url("https://example.com/image.jpg");
}使用线性渐变背景：
.element {
background-image: linear-gradient(to right, #ff0000, #00ff00);
}使用重复背景图像：
.element {
background-image: url("path/to/image.jpg");
background-repeat: repeat;
}使用背景图像位置：
.element {
background-image: url("path/to/image.jpg");
background-position: center;
}使用背景图像大小：
.element {
background-image: url("path/to/image.jpg");
background-size: cover;
}示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景图片</title>
<style>
body {
background-image: url(img/5ea6519528f62.jpg);
background-repeat: no-repeat;
}
.element1 {
background-image: url("img/5ea6519528f62.jpg");
}
.element2 {
background-image: url("img/5ea6519528f62.jpg");
}
.element3 {
background-image: linear-gradient(to right, #ff0000, #00ff00);
}
.element4 {
background-image: url("img/5ea6519528f62.jpg");
background-repeat: repeat;
}
.element5 {
background-image: url("img/5ea6519528f62.jpg");
background-position: center;
}
.element6 {
background-image: url("img/5ea6519528f62.jpg");
background-size: cover;
}
</style>
</head>
<body>
<div class="element1">1111111111111</div>
<div class="element2">2222222222</div>
<div class="element3">333333333333</div>
<div class="element4">444444444444</div>
<div class="element5">55555555555</div>
<div class="element6">666666666666</div>
</body>
</html>
超大背景图片
与背景图无太大差异
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>超大背景</title>
<style>
body {
background-image: url(img/bg.jpg);
background-repeat: no-repeat;
/* position: absolute; */
background-position: center top;
background-attachment: scroll;
background-size: 200%; /*可以自定义图片尺寸，也可以注释*/
}
p{
color: red;;
}
</style>
</head>
<body>
<p>我是miaow</p>
<p>我是miaow</p>
<p>我是miaow</p>
<p>我是miaow</p>
<p>我是miaow</p>
<p>我是miaow</p>
<p>我是miaow</p>
<p>我是miaow</p>
<p>我是miaow</p>
<p>我是miaow</p>
<p>我是miaow</p>
<p>我是miaow</p>
<p>我是miaow</p>
<p>我是miaow</p>
<p>我是miaow</p>
</body>
</html>
$\color{green}{你知道了嘛？}$