一、标签显示模式（display）
（一）、什么是标签显示模式
顾名思义就是标签以什么样的方式进行显示，比如div会自己显示一行，span一行可以显示多个，那如果我们想把div在一行内显示多个如何去做，那就需要用到display显示模式了。而display显示模式有以下几种类型：
（二）、块级元素（block-level）
每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。
1.常见的块级元素有
div h1-h6 p ul li ol br hr，其中div是典型的块级元素。
2.块级元素的特点：
（1）会独占一行。
（2）可以设置宽度高度。
（3）块级元素里面可以容纳任意的元素和内容。
（三）、行内元素（inline-level）
行内元素（内联元素）不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。
1.常见的行内元素有
span input a b i s u，其中span是典型的行内元素。
2.行内元素的特点：
（1）不会独占一行。
（2）不可以设置宽度高度。
（3）行内元素里面只能容纳文本和图片和其他的行内元素。
（四）、行内块元素（inline-block）
对块元素进行转换，把块级元素转换为在一行内显示，是较为常用的标签显示模式。
1.行内块元素有几个特殊的：
img和input 可以对它们设置属性，这是比较特殊的两个。
2.行内块元素的特点：
（1）不会独占一行。
（2）可以设置宽度高度。
（3）块级元素里面可以容纳任意的元素和内容。
（五）、标签显示模式转换语句
块转行内：display:inline;
行内转块：display:block;
块、行内转换为行内块：display:inline-block;
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
span{
font-size: 30px;
}
.s1{
color: white;
display: inline-block;
}
</style>
</head>
<body>
<div>
<div class="s1">首页</div>
<div class="s1">新闻</div>
<div class="s1">游戏</div>
<div class="s1">角色</div>
<div class="s1">世界</div>
</div>
</body>
</html>结果示例：
二、背景样式
（一）、背景颜色
1.设置盒子背景的颜色：background-color
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.s1{width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div>
<div class="s1"></div>
</div>
</body>
</html>结果示例：
（二）、背景图片
设置背景的图片：background-image
注意这里会自动默认铺满整个盒子。
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.s1{width: 100px;
height: 100px;
background-image: url(./images/ditu.jpg /*这里填写的属性为图片的地址*/);
}
</style>
</head>
<body>
<div>
<div class="s1"></div>
</div>
</body>
</html>结果示例：
（三）、图片的重复方式
1.不平铺no-repeat 不改变背景大小
background-repeat: no-repeat;
2.横向平铺
background-repeat: repeat-x;
3.纵向平铺
background-repeat: repeat-y;
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.s1{
width: 200px;
height: 200px;
background-image: url(./images/ditu.jpg);
background-repeat: repeat-x;
/* background-repeat: no-repeat; 不平铺*/
/* background-repeat: repeat-y; 纵向平铺*/
}
</style>
</head>
<body>
<div>
<div class="s1"></div>
</div>
</body>
</html>结果示例：
（四）、图片位置
设置背景图片的位置：background-position
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.s1{
width: 200px;
height: 200px;
background-image: url(./images/ditu.jpg);
background-repeat: no-repeat;
background-position: 100px 100px;
/* 此处的属性值分别为：水平位置 垂直位置 */
/* 也可用百分比表示：50% 50% */
}
</style>
</head>
<body>
<div>
<div class="s1"></div>
</div>
</body>
</html>结果示例：
（五）、图片附着
| 属性名 | background-attachment |
| 属性值 | scroll | fixed |
| 默认值 | scroll |
| 描述 | 设置背景图像是否固定或者随着页面的其余部分滚动。 |
（四）、简写属性
| 属性名 | background |
| 属性值 | color image repeat attachment position |
| 默认值 | 每个属性的默认值 |
| 描述 | 设置背景图像是否固定或者随着页面的其余部分滚动。 |
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.s1{
border: 1px solid red;
width: 200px;
height: 200px;
background: red url(./images/ditu.jpg) no-repeat 100px 100px fixed;
}
</style>
</head>
<body>
<div>
<div class="s1"></div>
</div>
</body>
</html>结果示例：
三、盒子模型
所谓盒子模型： 就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。CSS盒模型本质上是一个盒子，封装周围的HTML 元素，它包括： 外边距（ margin ）、边框 （ border ）、内边距（ padding ）、实际内容（ content ）四个属性。（一）、盒子边框（border）
| 属性 | 作用 |
| border-width | 定义边框粗细，单位是 px |
| border-style | 边框的样式 |
| border-color | 边框颜色 |
可以设置盒子不同方向不同的边框样式。
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.s1{
width: 200px;
height: 200px;
border-top: 5px solid yellow;
border-bottom: 5px double blue;
border-left: 5px dashed red;
border-right: 5px dotted green;
}
</style>
</head>
<body>
<div>
<div class="s1"></div>
</div>
</body>
</html>结果示例：
（二）、border的三角形原理
当我们加大边框并且各个颜色不一样时，我们先来看看border的表现形式。
当我们减小盒子的宽高时，边框的形状会发生改变而当元素降低到0时，边框就会变成三角形。然后我们可以通过设置边框为透明，来实现三角形。
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.s1{
width: 0px;
height: 0px;
border-top: 20px solid rgba(255, 255, 0, 0);
border-bottom: 20px solid rgba(0, 0, 255, 0);
border-left: 20px solid blue;
border-right: 20px solid rgba(0, 128, 0, 0);
}
</style>
</head>
<body>
<div>
<div class="s1"></div>
</div>
</body>
</html>结果示例：
（三）、圆角边框（radius）
radius可以让你设置元素的外边框圆角，当使用一个半径时确定一个圆形，当使用两个半径时确定一个椭圆。这个(椭)圆与边框的交集形成圆角效果。
语法格式：
border-radius: 左上角 右上角 右下角 左下角;
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.s1{
width: 100px;
height: 100px;
border: 2px solid red;
border-radius: 50%;
}
</style>
</head>
<body>
<div>
<div class="s1"></div>
</div>
</body>
</html>结果示例：
四、总结
今天周一周一，这一周才刚刚开始啊........我累了 0.0 毁灭吧！！！！！！
标签：repeat,示例,元素,基础知识,HTML,background,边框,border,CSS From： https://blog.csdn.net/qq_73990369/article/details/139751897