3.Web安全——div,css基础

一、什么是CSS？

在网页开发中，HTML（超文本标记语言）主要负责构建网页的结构，例如定义段落、标题、列表等元素。然而，HTML 本身在样式呈现方面的功能比较有限。CSS 的出现就是为了弥补这一不足，它能够让开发者精确地控制网页的外观，使网页更加美观和易于阅读。

二、div

在网页设计中，div标签是一种通用的容器元素。它本身没有特定的语义（像<h1>表示标题、<p>表示段落等有明确语义），主要用于将网页内容划分成不同的区域，方便进行页面布局。

<div>可插入各种内容</div>

三、CSS

1.样式表类型

1.嵌入式样式

在原有的HTML文件基础上，嵌入式添加CSS样式
嵌入式样式是写在 HTML 文档的<head>标签内的<style>标签中。它可以方便地对当前页面的特定部分进行样式设置。例如，在一个小型项目或者单个网页中，如果只想改变某个特定页面的整体布局风格，如将一个关于公司产品介绍页面的背景颜色设置为淡蓝色，文字颜色设置为深灰色，就可以在这个页面的<head>部分使用嵌入式样式。

<!DOCTYPE html>
<html>
<head><style>h2 {font - size: 24px;color: #333;font - family: Arial, sans - serif;}</style>
</head>
<body><h2>章节标题1</h2><p>这是章节1的内容。</p><h2>章节标题2</h2><p>这是章节2的内容。</p>
</body>
</html>

2.外部样式

在原有的html中使用link标签引入外部CSS文件
外部样式表是一个独立的.css 文件，它可以被多个 HTML 页面引用。这对于一个具有多个页面的网站来说，能够保证所有页面具有统一的样式风格。例如，一个企业网站有首页、产品页、关于我们页等多个页面，通过引用同一个外部样式表，可以确保所有页面的标题字体、导航栏样式、按钮样式等都是一致的。
假设外部样式表文件名为 styles.css，其中包含了以下样式来设置网页标题的字体和颜色：

css">h1 {font - family: 'Times New Roman', serif;color: #006699;
}

<!DOCTYPE html>
<html>
<head><link rel = "stylesheet" type = "text/css" href = "styles.css">
</head>
<body><h1>网站首页标题</h1>
</body>
</html>

3.内联样式

内联样式是直接在 HTML 标签内部通过style属性来设置样式的。它可以快速地为某个特定的元素设置样式，并且内联样式的优先级最高。在一些需要对个别元素进行特殊样式设置，且这个样式不希望被其他样式覆盖的情况下非常有用。例如，在一个网页中有一个按钮，其他按钮都有默认的样式，但是这个按钮需要有独特的颜色和大小，就可以使用内联样式。

<button style = "background - color: orange; width: 120px; height: 40px;">特殊按钮</button>

2.注释

在CSS文件中的注释与HTML的注释不同，功能都大致相同/*注释内容*/

css">h1 {font - family: 'Times New Roman', serif;/*设置网站标题和颜色*/color: #006699;
}

3.样式选择器

1.元素选择器 div{属性:值}
元素选择器是通过 HTML 标签名来选择元素并应用样式的。它会匹配文档中所有该类型的标签。例如使用div{}选择器，会对页面中所有的<div>标签应用相应的样式规则。这种选择器非常基础且直观，适用于对某一类 HTML 标签统一设置样式。
比如想要将页面中所有的段落<p>标签文字颜色设置为黑色，字体大小设为 16px，可以这样写样式：
```
css">p {color: black;font-size: 16px;
}
```
- 2.ID选择器 #id{属性:值}
ID 选择器通过元素的id属性值来精准选择单个元素。在 HTML 中，id属性在一个页面内应该是唯一的，所以 ID 选择器针对性很强，只会匹配具有对应id值的那一个元素。例如页面中有一个<div>元素，其id属性值为 “header”，使用#header{}选择器就能单独为这个<div>设置样式，而不会影响到其他元素。
示例代码如下，假设要设置这个id为 “header” 的<div>的背景颜色为蓝色：
```
css">#header {background-color: blue;
}
```
- 3.class选择器 .类名{属性:值}
- class 选择器通过元素的class属性值来选择元素。多个元素可以共享同一个class值，这样可以方便地将相同的样式应用到多个不同的元素上，实现样式的复用。例如有多个按钮，都希望具有相同的外观样式，如背景颜色、边框样式等，就可以给它们设置相同的class，然后通过对应的 class 选择器来设置样式。
- 代码示例如下，假设有一个名为 “btn” 的类，用于设置按钮样式：
```
css">.btn {background-color: green;border: 1px solid gray;padding: 10px 20px;
}
```
- 4.子选择器元数空格元素{属性:值}
- 子选择器用于选择某个元素的直接子元素并应用样式。它只会匹配作为直接后代的元素，中间的空格表示层级关系。例如，div p{}选择器会选择<div>元素下的所有直接子<p>元素，而不会选择嵌套在更深层级的<p>元素（比如<div>内部的<section>里面的<p>元素）。
- 示例代码如下，假设要将<div>下的直接子<ul>列表的文字颜色设置为红色：
```
css">div ul {color: red;
}
```
- 5.后代选择器元数 > 元数{属性:值}
- 后代选择器和子选择器类似，也是基于元素的层级关系来选择元素，但它选择的是指定元素的所有后代元素（包含子元素、孙元素等更深层级的元素）。例如，div > p{}选择器会选择<div>元素下所有的<p>元素后代，无论其嵌套层级有多深。
- 示例代码如下，若要将<article>元素下所有的<p>段落文字都设置为特定字体，可以这样写：
```
css">article > p {font-family: Arial, sans-serif;
}
```
- 6.属性选择器元素[属性]{}
- 属性选择器可以根据元素是否具有某个特定属性来选择元素并应用样式。还可以进一步基于属性值等更精确的条件进行选择。例如，input[type="text"]{}选择器会选择所有type属性值为 “text” 的<input>元素，这样就能针对文本输入框这种特定类型的输入元素单独设置样式。
- 示例代码如下，要给所有href属性的<a>链接设置下划线样式，可以这样写：
```
css">a[href] {text-decoration: underline;
}
```
- 7.通配符选择器 *{属性:值}
- 通配符选择器会匹配页面中的所有元素，通常用于进行一些全局的基础样式重置或者默认样式设置。比如可以用它来去除所有元素默认的内外边距，将页面元素的默认样式统一初始化，方便后续进行更精细的样式布局。
- 示例代码如下，将所有元素的内外边距设为 0：
```
css">* {margin: 0;padding: 0;
}
```
- 8.群组选择器
- 群组选择器可以将多个选择器组合在一起，对它们应用相同的样式规则。各个选择器之间用逗号隔开。这样可以减少重复的样式代码编写，提高样式表的编写效率。例如，如果希望<h1>、<h2>、<h3>标题都具有相同的字体颜色，可以使用群组选择器写成h1, h2, h3{ color: purple; }。
- 示例代码如下，假设要让多个不同类型的按钮（通过不同的类名区分）以及一个特定id的按钮都具有相同的背景颜色和边框样式：

css">.btn-primary,.btn-secondary, #submit-btn {background-color: orange;border: 1px solid black;
}

4.背景

background-color 规定要使用的背景颜色。
background-position 规定背景图像的位置。
background-size 规定背景图片的尺寸。
background-repeat 规定如何重复背景图像。
background-origin规定背景图片的定位区域。
background-clip 规定背景的绘制区域。
repeat 默认。背景图像将在垂直方向和水平方向重复。
repeat-x 背景图像将在水平方向重复。
repeat-y 背景图像将在垂直方向重复。
no-repeat 背景图像将仅显示一次。
inherit 规定应该从父元素继承 background-repeat 属性的设置。
background-attachment 规定背景图像是否固定或者随着页面的其余部分滚动。
background-image 规定要使用的背景图像。

css">aside {background-image: url('pattern.png');background-repeat: repeat-x; /* 背景图案只在水平方向重复 */
}

5.文字属性
1.color:red; 文字颜色
功能概述：用于设定文本内容的颜色。可以通过多种方式来指定颜色值，常见的有以下几种：
- 颜色名称：像 “red”（红色）、“blue”（蓝色）、“green”（绿色）等，直接使用预定义的英文颜色名称来表示相应颜色，但这种方式能表示的颜色种类有限。
- 十六进制值：格式为 “#RRGGBB”，其中 “RR” 表示红色通道的值，“GG” 表示绿色通道的值，“BB” 表示蓝色通道的值，取值范围是 00 - FF（十六进制），通过不同组合可以表示出非常丰富的颜色。例如 “#ffeeee” 表示一种浅粉色，它对应的 RGB 值大约为（255, 238, 238）。
- RGB 或 RGBA 值：RGB 表示法形如 “rgb (255, 0, 0)” 表示红色（三个参数分别对应红、绿、蓝通道的值，取值范围是 0 - 255），RGBA 则多了一个表示透明度的参数，格式为 “rgba (255, 0, 0, 0.5)”，最后一个参数取值范围是 0 - 1，0 表示完全透明，1 表示完全不透明。
- HSL 或 HSLA 值：HSL 是基于色相（Hue）、饱和度（Saturation）、亮度（Lightness）来描述颜色的方式，格式如 “hsl (0, 100%, 50%)” 表示红色（色相 0 度对应的是红色，饱和度和亮度各有其对应的取值范围），HSLA 同样多了透明度参数，如 “hsla (0, 100%, 50%, 0.5)”。

css">p {color: #ffeeee; /* 将段落文字颜色设置为浅粉色 */
}

2.font-size:12px;

功能概述：用于控制文字的大小尺寸，单位通常有以下几种：
- 像素（px）：是一种绝对单位，在不同屏幕分辨率下显示的实际物理尺寸相对固定，例如 “font-size: 12px;” 表示将文字大小设置为 12 像素。这是比较常用的单位，能精确控制文字大小，保证在大多数页面布局中呈现出预期的效果。
- 百分比（%）：相对单位，是相对于父元素字体大小的比例。例如如果父元素字体大小是 16px，子元素设置 “font-size: 125%;”，则子元素字体大小为 16px * 125% = 20px。常用于创建具有一定比例关系的文字大小布局，使页面文字大小更具层级感。
- em：也是相对单位，1em 相当于当前元素的父元素字体大小，例如父元素字体为 16px，子元素设置 “font-size: 0.75em;”，则子元素字体大小就是 16px * 0.75 = 12px。它在进行响应式排版等场景中应用较多，方便基于父元素进行灵活的字体大小调整。
- rem：根元素相对单位，是相对于 HTML 根元素（<html>标签）字体大小的比例。例如在 HTML 中设置 “font-size: 16px;”，页面中元素设置 “font-size: 1.5rem;”，则该元素字体大小就是 16px * 1.5 = 24px。在做响应式网页设计时，利用 rem 可以方便地实现整体文字大小的统一缩放控制。
```
css">h1 {font-size: 32px; /* 设置一级标题文字大小为32像素 */
}
```
- 3.font-weight:bolds
- 功能概述：用于调整文字的粗细程度，主要取值有以下几种：
  - “normal”：表示正常粗细，通常是系统默认的普通文字粗细状态，例如大多数浏览器下普通段落文字的默认粗细就是 “normal”。
  - “bold”：加粗样式，使文字显得更粗重、突出，常用于标题、重要提示等需要强调的文本内容，比如 “font-weight: bold;” 会将文字加粗显示。
  - 数值表示（100 - 900）：其中 “400” 等同于 “normal”，“700” 等同于 “bold”，其他数值则介于两者之间，提供了更精细的文字粗细调整选择，不过并非所有字体都能完整支持这么多不同数值对应的粗细变化。
- ```
css">strong {font-weight: bold; /* 将强调的文本（如被 <strong> 标签包裹的内容）加粗显示 */
}
```
  - 4.font-family:”宋体”
- 功能概述：用于指定文字的字体类型，可设置一个或多个字体名称，按照优先顺序排列，浏览器会按照顺序尝试加载字体，如果第一个字体不可用，则尝试第二个，依此类推。字体名称需要用引号括起来（如果字体名称包含空格等特殊字符），例如 “宋体”“Arial” 等。另外，为了保证在不同操作系统和浏览器下有更好的兼容性，通常会在最后添加一个通用字体族（如 “sans-serif”“serif”“monospace” 等）作为兜底。
- ```
css">body {font-family: "宋体", "SimSun", Arial, sans-serif; /* 优先尝试使用宋体、SimSun字体，若都不可用则使用Arial字体，最后使用无衬线通用字体 */
}
```
  - 5.font-variant:small-caps
  - 功能概述：该属性用于将小写字母以大写字母的小型化形式显示，也就是创建小型大写字母的文本效果。其主要取值有 “normal”（正常显示，不做特殊处理）和 “small-caps”（将小写字母转换为小型大写字母）。
  - ```
  css">span {font-variant: small-caps; /* 将<span>标签内的小写字母以小型大写字母形式显示 */
  }
```
  6.文本属性
  - 1.text-align:center;
- 功能概述：用于控制文本在块级元素内的水平对齐方式。
- left：文本向左对齐，这是大多数浏览器中文本的默认对齐方式。例如，在一个<div>元素中，如果设置text-align: left;，那么其中的段落、标题等文本内容都会靠元素的左侧排列。
- right：文本向右对齐。常用于将某些特定的文本内容，如版权信息等放置在页面的右侧。
- center：文本在元素内水平居中。在网页设计中，常用于标题、按钮上的文字等，以营造对称、整齐的视觉效果。

css">h1 {text-align: center; /* 将一级标题文本水平居中 */
}
p {text-align: left; /* 将段落文本向左对齐 */
}

2.line-height:10px;

功能概述：用于设置文本行与行之间的垂直间距，也称为行高。它的值可以是具体的长度单位（如像素px、厘米cm等）、相对单位（如相对于字体大小的倍数，如1.5表示行高是字体大小的 1.5 倍）或者百分比。
当行高等于字体大小时，文本行之间紧密排列；当行高大于字体大小时，行与行之间会产生间距。可以通过巧妙地设置行高来实现文本在元素内的垂直居中。例如，在一个固定高度的<div>元素中，如果行高等于元素高度，那么文本就会在垂直方向上居中。

css">p {font-size: 16px;line-height: 24px; /* 行高设置为24px，行与行之间有一定间距 */
}
div {height: 100px;line-height: 100px; /* 使文本在div元素内垂直居中 */
}

3.text-indent:20px;

功能概述：用于设置文本块的首行缩进。它的值可以是具体的长度单位（如20px表示首行缩进 20 像素）或者百分比（相对于元素的宽度）。这是在排版文章、书籍等长文本内容时常用的属性，符合传统的排版习惯，能够使文章的段落结构更加清晰。

css">p {text-indent: 20px; /* 段落首行缩进20px */
}

- 4.letter-spacing: 字间距
功能概述：用于控制文本中字符之间的水平间距，也称为字间距。它的值可以是具体的长度单位（如像素px）或者是相对单位（如em）。正值会增加字间距，负值会减小字间距。通过调整字间距可以改变文本的紧凑程度或松散程度，以达到不同的视觉效果。

css">h1 {letter - spacing: 2px; /* 增加一级标题的字间距为2px */
}
p {letter - spacing: -0.5px; /* 减小段落文字的字间距为 -0.5px */
}

7.超链接

1.a{text-decoration: none;}

这行代码使用元素选择器选择了所有的<a>标签（超链接元素），并将它们的 “text-decoration” 属性设置为 “none”，也就是去除了超链接默认的下划线装饰。这样做的目的通常是为了让超链接在页面中的呈现更加简洁、美观，使其外观更贴近普通文本，避免下划线可能带来的视觉干扰，尤其在一些整体设计风格较为简约或者希望超链接与其他文本元素融合度更高的网页中会经常用到。

2.a:link {color:#FF0000;}

“a:link” 是一个伪类选择器，它用于选择所有未被访问过的超链接元素，并为其设置样式。在这里，将 “color” 属性设置为 “#FF0000”（红色），意味着在页面初始加载且用户还没有点击访问过这些链接时，它们会以红色文字显示。通过为未访问链接单独设置颜色，可以方便用户直观地区分哪些链接是自己还未曾点击查看过的，有助于引导用户去探索页面中的相关内容。

3.a:visited {color:#00FF00;}

“a:visited” 同样是伪类选择器，专门针对已经被用户访问过的超链接元素进行样式设置。把 “color” 属性设为 “#00FF00”（绿色），则表示一旦用户点击访问过某个链接后，当再次看到该链接（比如返回之前的页面或者在同一页面的其他位置再次出现该链接时），它就会显示为绿色。这种对已访问和未访问链接设置不同颜色的方式，能进一步帮助用户在浏览网页过程中对自己的浏览轨迹有清晰的认知，提升浏览体验。

4.a:hover {color:#FF00FF;}

“a:hover” 伪类选择器用于定义当鼠标指针悬停在超链接元素上时的样式变化。此处将 “color” 属性设置为 “#FF00FF”（紫红色），意味着只要用户把鼠标移动到某个超链接上方，该链接的文字颜色就会瞬间变为紫红色，这种动态的颜色变化效果可以给用户一个明显的视觉提示，让用户清晰地感知到当前鼠标所指向的元素是可点击的超链接，增强了页面的交互性和用户体验。

5.a:active {color:#0000FF;}

“a:active” 伪类选择器针对的是超链接被激活时的瞬间样式，也就是在用户按下鼠标左键点击超链接但还未松开鼠标的这个短暂时间段内的样式呈现。将 “color” 属性设为 “#0000FF”（蓝色），表示在点击的瞬间链接文字会变为蓝色，这个短暂的颜色变化同样是一种交互反馈，让用户在操作超链接时能感受到明确的点击响应，从视觉上确认自己的操作正在被处理。

8.盒子模型

1.盒子模型的组成部分

外边距（margin）、边框（border）、内边距（padding）、内容（content）四个

2.属性

1.自身的长宽 width height

定义：
width和height属性用于定义元素内容区域的宽度和高度。内容区域是指盒子模型中放置实际内容（如文本、图像等）的部分。
例如，对于一个<div>元素，如果设置width: 200px;和height: 100px;，那么这个<div>内部用于放置内容的空间的宽度就是 200 像素，高度是 100 像素。
单位选择：
可以使用多种单位，如像素（px）、百分比（%）、em、rem 等。像素是一个绝对单位，它表示的大小是固定的。百分比则是相对于父元素的宽度或高度的比例。例如，如果一个子元素的width设置为50%，父元素的宽度是 400px，那么子元素的宽度就是 200px。em 单位是相对于元素自身的字体大小，rem 单位是相对于根元素（<html>）的字体大小。
注意事项：
在一些情况下，如设置为width:auto;（默认值），元素的宽度会根据内容的多少自动调整。当内容过多，超出了设置的width和height范围时，可能会导致内容溢出，这时候可以通过overflow属性来控制溢出内容的显示方式。

2.内边距 padding

定义：
padding是指元素内容区域与边框之间的空间。它是围绕在内容周围的空白区域，可以分别设置上（padding - top）、右（padding - right）、下（padding - bottom）、左（padding - left）四个方向的内边距。
例如，对于一个<div>元素，设置padding: 10px;，这意味着在这个<div>的内容四周都有一个 10 像素宽的空白区域。如果分别设置，如padding - top: 20px; padding - right: 15px; padding - bottom: 20px; padding - left: 15px;，那么这个<div>的上内边距是 20 像素，右内边距是 15 像素，下内边距是 20 像素，左内边距是 15 像素。

3.盒子边框 border

定义：
border用于定义元素的边框。边框围绕在内边距的外面，它有三个主要属性可以设置：边框宽度（border - width）、边框样式（border - style）和边框颜色（border - color）。
例如，设置border - width: 2px; border - style: solid; border - color: black;就创建了一个宽度为 2 像素、样式为实线、颜色为黑色的边框。也可以使用缩写形式，如border: 2px solid black;。
边框样式种类：
常见的边框样式有solid（实线）、dashed（虚线）、dotted（点线）、double（双线）等。不同的样式可以用于不同的设计需求，例如，dashed和dotted边框可能会给人一种更轻盈的感觉，而solid边框则更显稳重。
边框圆角（border - radius）：
除了基本的边框属性，还可以设置边框的圆角。例如，border - radius: 5px;可以使元素的四个角都变成半径为 5 像素的圆角。也可以分别设置每个角的圆角半径，如border - top - left - radius: 10px; border - top - right - radius: 5px;等。

4.与其他盒子的距离 margin 外边距

定义：
margin是指元素边框与相邻元素之间的距离。和内边距一样，它也可以分别设置上（margin - top）、右（margin - right）、下（margin - bottom）、左（margin - left）四个方向的外边距。
例如，对于两个相邻的<div>元素，第一个<div>设置margin - bottom: 20px;，第二个<div>设置margin - top: 10px;，那么它们之间的垂直间距就是 30px（20px + 10px）。
外边距合并（Margin Collapse）：
在垂直方向上，相邻的外边距可能会发生合并现象。例如，一个父元素没有内边距和边框，子元素设置了margin - top: 20px;，那么这个外边距会 “溢出” 到父元素的外面，看起来就像是父元素有了一个 20px 的margin - top。这种现象在布局时需要特别注意。

9.Border边框

常见的写法 border:1px solid #foo;

属性:

dotted 点状虚线

dashed（虚线）

solid（实线）

double（双实线）

border-color(颜色)

10.margin padding

padding:内边距

值：像素/厘米等长度单位、百分比

padding:10px; 上下左右

padding:10px 10px; 上下左右

padding:10px 10px 10px; 上左右下

padding:10px 10px 10px 10px; 上右下左（设置4个点-->顺时针方向）

单独属性

padding-top:

padding-right:

padding-bottom:

padding-left:

当设置内边距的时候会把盒子撑大，为了保持盒子原来的大小，应该高度和宽度进行减小，根据width和height减小

margin 外边距

值：与padding相同

单独属性：与padding相同

外边距合并：两个盒子同时设置了外边距，会进行一个外边距合并

margin

margin:10px 上下左右都会腾出10px出来

margin:0px auto; 居中

11.定位

1.Position属性及其定位方式

1.static（静态定位）

这是position属性的默认值，意味着元素遵循正常的文档流布局，就按照其在 HTML 文档中出现的先后顺序依次排列，不会受到top、bottom、left、right以及z-index这些用于定位相关属性声明的影响。例如，一个<div>元素如果是static定位（默认情况），它在页面中的位置完全由文档流决定，后续元素会依次排在它后面，它自身不会有位置的偏移等特殊定位表现。
大多数普通的页面元素在没有特殊定位需求时，都处于这种静态定位状态，像网页中常规的段落文本、普通的图片展示等元素，按正常顺序排列呈现内容即可。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Static Position Example</title>
</head><body><div style="width: 100px; height: 100px; background-color: lightblue;">这是一个静态定位的div，遵循正常文档流布局。</div><div style="width: 100px; height: 100px; background-color: lightgreen;">另一个按文档流排列的div，在上面那个div后面。</div>
</body></html>

2.fixed（固定定位）

参照物及定位方式：
其参照物是浏览器窗口。当一个元素设置为fixed定位后，无论页面如何滚动，它都会固定在浏览器窗口的某个位置上。通过使用left、top、right以及bottom属性可以精确规定它相对于浏览器窗口四条边的距离。比如，要制作一个始终位于浏览器窗口右上角的弹窗广告，可以设置position: fixed; top: 0; right: 0;，这样该元素就会固定在右上角，不随页面滚动而移动。
常用于创建一些需要始终在用户视野内的元素，除了弹窗广告外，像网页的导航栏固定在顶部、侧边的快捷操作栏固定在一侧等场景，方便用户随时操作相关功能，无需考虑页面滚动的影响。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Fixed Position Example</title>
</head><body><div style="width: 100px; height: 100px; background-color: lightblue;">正常文档流中的div。</div><div style="width: 150px; height: 50px; background-color: orange; position: fixed; top: 10px; right: 10px;">这是一个固定定位的div，会固定在浏览器窗口的右上角，距离顶部10px，距离右边10px，无论页面如何滚动，它的位置都不变。</div><p style="height: 1000px;">这里是一些长文本内容，用于模拟页面滚动，查看固定定位元素的效果。</p>
</body></html>

3.relative（相对定位）

参照物及定位方式：
参照物是以元素本身的正常位置。当对元素设置relative定位后，它会相对于其原本在文档流中的位置进行一定的偏移定位。比如，一个原本在文档流中处于某个位置的<div>，设置position: relative; top: 10px; left: 20px;，那么它就会相对于自己原来的位置向下偏移 10 像素、向右偏移 20 像素，而原本在文档流中占据的空间依然保留，其他元素不会占据它原来的位置。
常用来对元素进行微调定位，在不破坏文档流整体布局的基础上，对元素的显示位置做小幅度的改变，例如对某个图标在其原本所在文本块中的位置进行稍微的调整等情况。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Relative Position Example</title>
</head><body><div style="width: 200px; height: 200px; background-color: lightblue; position: relative; top: 20px; left: 30px;">这是一个相对定位的div，相对于它原本在文档流中的位置向下偏移20px，向左偏移30px，原本占据的空间仍保留，其他元素布局不受影响。</div><div style="width: 100px; height: 100px; background-color: lightgreen;">按文档流正常排列在后面的div。</div>
</body></html>

4.absolute（绝对定位）

参照物及定位方式：
它的参照物是除了static定位以外的第一个父元素。也就是说，它会从当前元素的父元素开始向上查找，找到第一个具有非static定位（如relative、fixed、absolute等定位）的父元素，然后相对于这个父元素来进行定位。如果一直向上都没有找到这样的父元素，那最终就会相对于浏览器窗口进行定位。同样通过left、top、right以及bottom属性来规定具体位置。例如，在一个具有relative定位的父<div>中有一个子<span>元素设置为absolute定位，那这个<span>元素就会相对于该父<div>来确定自己的位置。
在复杂的页面布局中，当需要某个元素脱离文档流并精确地相对于某个特定的父元素或者容器来进行定位时很有用，比如在制作一些具有多层嵌套且内部元素位置需精准控制的页面模块，像网页中的下拉菜单、模态框内部的内容定位等场景。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Absolute Position Example</title>
</head><body><div style="width: 300px; height: 300px; background-color: lightblue; position: relative;">这是父div，设置了相对定位，作为子div绝对定位的参照物。<div style="width: 100px; height: 100px; background-color: orange; position: absolute; top: 20px; left: 20px;">这是一个绝对定位的子div，相对于有相对定位的父div进行定位，距离父div的顶部20px，距离父div的左边20px。</div></div><div style="width: 100px; height: 100px; background-color: lightgreen;">按文档流正常排列的div。</div>
</body></html>

2.z-index属性

作用及原理：
z-index属性主要用于设置元素的堆叠顺序。在网页中，元素是存在于一个三维空间里的，除了有水平和垂直方向的位置，还有垂直于页面的 “深度” 概念。当多个元素在空间上有重叠部分时，拥有更高z-index值（即更高堆叠顺序）的元素总是会显示在堆叠顺序较低（z-index值小）的元素前面。例如，有两个<div>元素，一个设置z-index: 10;，另一个设置z-index: 5;，当它们发生重叠时，z-index为 10 的那个<div>会覆盖在z-index为 5 的<div>之上显示。

定位的整体思想

定位相关的这些属性和规则，核心思想就是打破常规的文档流布局限制，让开发者能够根据实际的页面设计需求，灵活地定义元素框相对于其正常位置、父元素、其他元素或者浏览器窗口本身的位置，从而构建出各种复杂且符合特定视觉和交互要求的页面布局，无论是固定某些元素方便操作、精准控制元素之间的相对位置，还是处理元素重叠时的显示顺序等，都可以通过合理运用定位相关知识来实现。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Z-index Example</title>
</head><body><div style="width: 100px; height: 100px; background-color: lightblue; position: relative; z-index: 5;">这个div的z-index为5，相对定位便于展示堆叠顺序。</div><div style="width: 100px; height: 100px; background-color: orange; position: relative; z-index: 10; top: -50px; left: 50px;">这个div的z-index为10，会覆盖在上面那个z-index为5的div之上，通过top和left属性调整了位置，便于观察重叠效果。</div>
</body></html>

四、总结

介绍了什么是CSS，简单的讲解了常见的CSS的语法，可以尝试练习制作一些简单的网页，下篇文章将讲解的是HTML中的JavaScript的用法，可以订阅我的专栏，一起学习网络安全技术。