HTML

块级元素与行内元素

定义:

• 块级元素默认占据整行，形成一个块容器。
• 行内元素默认在同一行内与其他元素并排显示。

块级元素示例

• <h1>: 标题
• <p>: 段落
• <div>: 通用容器

块级元素特点

• 默认情况下，每个块级元素都会在其前后形成换行。
• 宽度和高度可以设置，并且可以填充整个容器宽度。
• 可以设置 margin 和 padding 的上下左右值。
• 通常作为其他元素的容器。

行内元素示例

• <a>: 链接
• <span>: 通用行内容器
• <img>: 图像（默认为行内元素）

行内元素特点

• 不会在前后形成换行，多个行内元素可以在一行内显示。
• 宽度和高度默认由内容决定，不能设置宽度和高度。
• 只能设置左右 margin 和 padding。
• 通常用于文本或小部件。

示例

假设我们有以下 HTML 结构：

1
2
3

<h1>Title</h1>
<p>This is a paragraph. <a href="#">Link</a></p>
<div>Block level <span>inline</span> elements.</div>

我们可以观察到以下默认行为：

• <h1> 和 <p> 是块级元素，它们各自占据一行。
• <a> 和 <span> 是行内元素，它们在 <p> 和 <div> 内与其他文本并排显示。

转换元素类型

你可以使用 display 属性来转换元素的显示方式：

• 将行内元素转换为块级元素：

1
2
3

a {
  display: block;
}

• 将块级元素转换为行内元素：

1
2
3

div {
  display: inline;
}

行内块元素

• 元素可以与其他行内元素或行内块元素在同一行显示。
• 可以直接设置宽度和高度。
• 可以设置内边距和外边距，包括上下值。

注意事项

• 块级元素和行内元素的行为可以通过 display 属性进行修改。
• 根据布局需求选择合适的元素类型可以提高页面的可读性和可维护性。
• 了解元素的默认行为有助于更有效地进行样式设计。
• h1~h6标签不能相互嵌套
• p标签中不要写块级元素

文本标签

HTML 文本标签 是用来格式化网页上的文本内容的。合理使用这些标签可以使你的网页更加易读和语义化。

基础文本格式化标签

• <strong>: 强调文本的重要性，通常以粗体显示。
• <em>: 强调文本，通常以斜体显示。
• <mark>: 高亮文本，通常以黄色背景色显示。
• <small>: 缩小文本尺寸，常用于版权信息等。
• <del>: 删除线效果，表示文本已被删除。
• <ins>: 下划线效果，表示文本被插入。
• <sub>: 下标，用于化学公式等。
• <sup>: 上标，用于指数等。
• <u>: 为文本添加下划线，不建议使用，推荐使用 <ins> 或 CSS。
• <s>: 为文本添加删除线，不建议使用，推荐使用 <del> 或 CSS。
• <b>: 粗体文本，不表示重要性，仅用于视觉效果。

注意事项

• 使用语义化的标签，例如 <article>、<section>、<header> 和 <footer> 等，可以使文档结构更加清晰。
• 保持良好的编码习惯，如闭合标签、缩进等，以便于阅读和维护。
• 确保所有标签正确嵌套，避免交叉嵌套。
• 通过使用 CSS 进一步增强样式和布局。

超链接标签

HTML 超链接 是网页中不可或缺的一部分，它允许用户从一个页面跳转到另一个页面或其他资源。超链接由 <a>（anchor）标签定义。

基本语法

1

<a href="URL">Link Text</a>

• href: 指定链接的目标地址。
• Link Text: 显示给用户的链接文本。

示例

1

<a href="https://www.example.com">Visit Example</a>

不同类型的超链接

1. 内部链接

   • 链接到同一网站内的其他页面。
   • 可以使用相对路径或绝对路径。

   1	<a href="/about.html">About Us</a>

2. 外部链接

   • 链接到其他网站。
   • 必须使用完整的URL。

   1	<a href="https://www.google.com" target="_blank">Google</a>

3. 锚点链接

   • 在当前页面内跳转到指定位置。
   • 通过在目标元素上设置 id 属性，并在链接中使用 # 加上该 id。

   1 2	<a href="#section2">Jump to Section 2</a> <h2 id="section2">Section 2</h2>

4. 电子邮件链接

   • 直接打开用户的默认邮件客户端。
   • 使用 mailto: 协议。

   1	<a href="mailto:support@example.com">Contact Support</a>

5. 文件下载链接

   • 当链接指向一个文件时，浏览器会尝试下载这个文件。

   1	<a href="/downloads/report.pdf">Download Report</a>

6. JavaScript 功能

   • 可以使用 javascript: 协议来触发 JavaScript 代码。

   1	<a href="javascript:alert('Hello!')">Click me</a>

属性

• target: 控制链接打开的方式。
  • _self: 默认值，链接在当前窗口或标签页打开。
  • _blank: 链接在新窗口或标签页打开。
  • _parent: 链接在父框架集打开。
  • _top: 链接在顶层窗口打开。
• rel: 定义与链接文档的关系。
  • noopener: 告诉浏览器不要给予新打开的窗口访问当前窗口的权限。
  • noreferrer: 隐藏 HTTP Referer 头。
  • nofollow: 告诉搜索引擎不要跟踪此链接。
  • noopener noreferrer nofollow: 综合以上三个属性。
• download: 如果出现，则强制将链接作为文件下载而不是导航。
  • 可选地，可以提供一个文件名提示。

1

<a href="/downloads/report.pdf" download>Download Report</a>

最佳实践

• 可用性: 确保链接文本描述了链接的目的。
• 可访问性: 使用 aria-label 或 title 属性提供额外的信息。
• 安全性: 对外部链接使用 rel="noopener noreferrer"。
• 性能: 对于较大的文件，考虑使用渐进式加载技术。

表单

HTML 表单 是收集用户输入的主要方式之一。表单由 <form> 标签定义，并包含一系列表单控件，如文本框、按钮、下拉列表等。

基本语法

1
2
3
4
5
6

<form action="submit.php" method="post">
  <!-- 表单控件 -->
  <input type="text" name="username" placeholder="Username">
  <input type="password" name="password" placeholder="Password">
  <button type="submit">Submit</button>
</form>

• action: 表单数据提交的URL。
• method: 提交表单数据的方式，常见值为 get 和 post。

表单控件

• 文本输入 (<input type="text">): 单行文本输入。
• 密码输入 (<input type="password">): 输入字符被隐藏。
• 复选框 (<input type="checkbox">): 多选输入。
• 单选按钮 (<input type="radio">): 互斥选择。
• 下拉列表 (<select>): 下拉选择列表。
• 文本区域 (<textarea>): 多行文本输入。
• 文件上传 (<input type="file">): 文件选择器。
• 提交按钮 (<input type="submit">): 提交表单。
• 重置按钮 (<input type="reset">): 重置表单。
• 按钮 (<button>): 通用按钮，可以定义 type 为 button, submit, 或 reset。

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<form action="/submit.php" method="post">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" required>
  
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" required>
  
  <label for="gender">Gender:</label>
  <select id="gender" name="gender">
    <option value="male">Male</option>
    <option value="female">Female</option>
  </select>
  
  <label for="newsletter">Subscribe to newsletter:</label>
  <input type="checkbox" id="newsletter" name="newsletter" value="yes">
  
  <button type="submit">Submit</button>
</form>

表单属性

• name: 表单控件的名称，用于标识表单数据。
• id: 表单控件的唯一标识符，用于关联标签。
• value: 表单控件的初始值。
• placeholder: 提供给用户的提示文本。
• required: 标记控件为必需填写。
• disabled: 禁用控件。
• readonly: 只读控件，用户无法更改内容。
• pattern: 设置输入模式，用于验证输入。
• min 和 max: 限制数值或日期范围。
• multiple: 允许用户选择多个文件或选项。

最佳实践

• 使用 <label>: 为每个表单控件添加 <label>，提高可访问性。
• 表单验证: 使用 HTML5 的内置验证属性（如 required, pattern）或 JavaScript 进行验证。
• 响应式设计: 确保表单在不同设备上都能良好显示。
• 安全: 使用 HTTPS 加密传输数据，保护用户隐私。
• 用户体验: 提供即时反馈，减少不必要的步骤。

注意事项

• 服务器端验证: 即使进行了客户端验证，也需要在服务器端再次验证数据。
• 数据保护: 不要在表单中收集敏感信息，除非必要。
• 错误消息: 提供清晰的错误消息，帮助用户理解问题所在。

字符实体

特殊字符

数学符号

货币符号

箭头

下面是一个包含上述字符实体的HTML文档示例：

1
2
3
4
5
6
7
8
9
10
11
12
13

<!DOCTYPE html>
<html>
<head>
  <title>HTML Character Entities Example</title>
</head>
<body>
  <h1>字符实体示例</h1>
  <p>Special characters: &lt; &gt; &amp; &quot; &apos; &nbsp;</p>
  <p>Math symbols: &plusmn; &times; &divide; &frac12; &frac14; &frac34; &deg; &infin; &ne;</p>
  <p>Currency symbols: &euro; &yen; &pound; &cent;</p>
  <p>Arrows: &larr; &uarr; &rarr; &darr;</p>
</body>
</html>

在这个示例中，我们使用了各种字符实体来展示特殊字符、数学符号、货币符号以及箭头。

其他标签

video视频标签

HTML5 的 <video> 标签用于在网页中嵌入视频内容。它提供了一种简单的方式让用户在浏览器中观看视频，而不需要额外的插件如 Flash。以下是 <video> 标签的一些关键属性和用法的总结：

基本用法

1
2
3
4
5

<video controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

主要属性

1. controls:

   • 显示播放控件，如播放/暂停按钮、音量控制等。
   • 示例：

     1	<video controls></video>

2. autoplay:

   • 视频将自动播放。
   • 前提是开启静音
   • 示例：

     1	<video autoplay></video>

3. loop:

   • 视频结束后自动重新播放。
   • 示例：

     1	<video loop></video>

4. muted:

   • 默认情况下静音播放视频。
   • 这是自动播放的前提
   • 示例：

     1	<video muted></video>

5. preload:

   • 指定视频加载方式：
     • auto: 自动加载整个视频（默认）
     • metadata: 只加载元数据
     • none: 不预先加载任何数据
   • 示例：

     1	<video preload="metadata"></video>

6. src:

   • 视频文件的 URL。
   • 示例：

     1	<video src="movie.mp4"></video>

7. poster:

   • 在视频开始播放之前显示的图像。
   • 示例：

     1	<video poster="thumbnail.jpg"></video>

8. width 和 height:

   • 设置视频播放器的宽度和高度。
   • 示例：

     1	<video width="480" height="320"></video>

9. playsinline:

   • 视频将在标准模式下播放，而不是全屏模式。
   • 示例：

     1	<video playsinline></video>

10. autoplay="true":

    • 同 autoplay，但明确指定了布尔值 true。

<source> 元素

• <source> 元素用于指定多个视频源，以确保在不同浏览器中都能播放视频。
• 示例：

  1 2 3 4 5 6

  <video controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> <source src="movie.webm" type="video/webm"> Your browser does not support the video tag. </video>

audio音频标签

HTML5 的 <audio> 标签用于在网页中嵌入音频内容。它提供了一种简单的方式让用户在浏览器中播放音频文件，而不需要额外的插件如 Flash。以下是 <audio> 标签的一些关键属性和用法的总结：

基本用法

1
2
3
4
5

<audio controls>
  <source src="song.mp3" type="audio/mpeg">
  <source src="song.ogg" type="audio/ogg">
  Your browser does not support the audio element.
</audio>

主要属性

1. controls:

   • 显示播放控件，如播放/暂停按钮、音量控制等。
   • 示例：

     1	<audio controls></audio>

2. autoplay:

   • 音频将自动播放。
   • 示例：

     1	<audio autoplay></audio>

3. loop:

   • 音频结束后自动重新播放。
   • 示例：

     1	<audio loop></audio>

4. muted:

   • 默认情况下静音播放音频。
   • 示例：

     1	<audio muted></audio>

5. preload:

   • 指定音频加载方式：
     • auto: 自动加载整个音频文件（默认）
     • metadata: 只加载元数据(例如歌曲长度)
     • none: 不预先加载任何数据
   • 示例：

     1	<audio preload="metadata"></audio>

6. src:

   • 音频文件的 URL。
   • 示例：

     1	<audio src="song.mp3"></audio>

7. width:

   • 设置音频播放器的宽度。
   • 示例：

     1	<audio width="320"></audio>

8. autoplay="true":

   • 同 autoplay，但明确指定了布尔值 true。

<source> 元素

• <source> 元素用于指定多个音频源，以确保在不同浏览器中都能播放音频。
• 示例：

  1 2 3 4 5 6

  <audio controls> <source src="song.mp3" type="audio/mpeg"> <source src="song.ogg" type="audio/ogg"> <source src="song.wav" type="audio/wav"> Your browser does not support the audio element. </audio>

事件

• <audio> 元素支持多种事件，可以使用 JavaScript 来监听这些事件。
• 示例：

  1 2 3 4

  var myAudio = document.querySelector('audio'); myAudio.addEventListener('play', function() { console.log('The audio has started playing.'); });

表格标签

• 标签：table

  1	<table></table>

  属性border：规定表格边框的宽度，width：规定表格的宽度，cellspacing：规定单元之间的空间

• tr：表格的行，可以包裹多个td

• td：表格的单元格(普通)，可以包裹内容，如果是表头单元格可以用标签th

全局属性

1. 什么是全局属性？

• 定义：全局属性是可以应用于所有HTML元素的属性。这意味着无论你使用什么元素，都可以附加这些属性以增加更多的功能或信息。

2. 常见的全局属性

• class: 定义元素的一个或多个类名，用于CSS样式或JavaScript操作。

  1	<div class="container"></div>

• id: 定义元素的唯一标识符，用于CSS样式或JavaScript操作。

  1	<div id="main"></div>

• title: 定义元素的额外信息，通常作为工具提示显示。

  1	<a href="#" title="Click here for more information">Link</a>

• style: 定义元素的内联样式。

  1	<p style="color: red;">This is a styled paragraph.</p>

• tabindex: 定义元素在文档中的Tab顺序。

  1	<input type="text" tabindex="1">

• lang: 定义元素的语言。

  1	<p lang="es">Este es un párrafo en español.</p>

• dir: 定义元素的文本方向。

  1	<p dir="rtl">This is right-to-left text.</p>

• hidden: 表示元素不可见。

  1	<div hidden>This is a hidden element.</div>

• contenteditable: 允许用户编辑元素的内容。

  1	<p contenteditable="true">Edit this text.</p>

• draggable: 指示元素是否可拖动。

  1	<img draggable="true" src="image.jpg" alt="Draggable Image">

• spellcheck: 指示浏览器是否应该检查拼写和语法。

  1	<textarea spellcheck="false"></textarea>

• accesskey: 定义一个键盘快捷键来激活元素。

  1	<button accesskey="1">Button</button>

• data-\*: 自定义数据属性，用于存储页面或应用程序的私有数据。

  1	<div data-user-id="123">User Profile</div>

对于自定义属性来说，访问方式如下：

• 通过dataset来读取

1

<div id="example" data-custom-attribute="hello"></div>

1
2

var element = document.getElementById('example');
var customAttribute = element.dataset.customAttribute; // "hello"

• 通过dataset来设置属性

1
2

var element = document.getElementById('example');
element.dataset.customAttribute = 'world';

• 如果你的自定义属性名包含连字符，如 data-my-attr，在 dataset 对象中，连字符会被转换成驼峰式命名，即 myAttr。
• 如果你的自定义属性名与某个标准属性名冲突（比如 data-class），那么在 dataset 对象中，你必须使用 class_（带下划线）的形式来引用它。
• 自定义属性只应该用于存储简单的字符串数据。如果需要存储复杂的数据结构，考虑使用JSON格式的字符串。

CSS基础

1.行内样式

直接写在标签上，通过style属性来指定样式

1
2
3

<body>
    <h1 style="color: aqua;">这是一段话</h1>
</body>

效果

2.内部样式

一般位于head标签内，这时，我们需写style标签，并在其中指定样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        h1{
            color: aqua;
        }
        
    </style>
</head>
<body>
    <h1>这是一段话</h1>
</body>
</html>

效果

3.外部样式

通过外部引入的方式，来进行样式的匹配。

语法:

通过href来指定外部css文件的路径

1

<link rel="stylesheet" href="">

1
2
3
4

/*这outCSS.css内的内容 */
h1{
    color: red;
}

1
2
3
4
5
6
7
8
9
10

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
<link rel="stylesheet" href="./外部CSS文件/outCSS.css">
</head>
<body>
    <h1>这是一段话</h1>
</body>
</html>

效果

4.样式表的优先级

• 优先级规则：行内样式 > 内部样式 = 外部样式
  • 内部样式 和外部样式优先级相同，但是后面写的会覆盖前面写的样式
  • 同一个样式表中，优先级也和编写顺序有关，同样后面的也会覆盖前面的样式。

5.CSS语法规范

CSS语法由两部分构成：

• 选择器：找到要添加样式的元素
• 声明块：设置具体的样式，可以有多个，格式：属性名：属性值;

CSS选择器

CSS基本选择器

1. 通配选择器
2. 元素选择器
3. 类选择器
4. id选择器

1.通配选择器

• 选中html中所有元素

• 语法：

  • * {
        属性名:属性值
    }
    1
    2
    3
    4
    5
    6
    7
    
    * 例子
    
      * ```css
        * {
            color: red;
        }
    
    

2.元素选择器

• 作用：为页面中 某种元素 统一设置样式

• 语法：

  • 标签名 {
        属性名:属性值;
    }
    1
    2
    3
    4
    5
    6
    7
    8
    
    * 例子：
    
      * ```css
        /* 选中所有h1元素 */
        h1 {
            color: blue;
        }
    
    

3.类选择器

• 作用：根据元素的class值，来选中某些元素

• 语法：

  1 2 3

  .类名 { 属性名:属性值; }

• 举例

  1 2 3 4 5 6

  /* 选中所有class值为test的元素 */ .test{ color:red; font-size:90px; }

4.ID选择器

• 作用：根据元素的id属性来精准选择某个元素。

• 语法：

  1 2 3

  #id值 { 属性值:属性名; }

• 举例

  1 2 3 4 5

  /* 选中id为test的元素 */ #test { color: red; font-size:40px; }

CSS复合选择器

1.交集选择器

• 交集选择器是由两个或多个选择器直接连接（没有空格）组成。
• 它们匹配同时符合所有组成部分的选择器的元素。
• 如果其中一个部分是类型选择器（例如 div），它通常被省略，因为所有元素都是某种类型的元素。
• 交集有并且的含义

语法示例：

1
2
3

div.myClass {
  /* styles go here */
}

这个选择器会选择所有带有 myClass 类的 <div> 元素。

示例

假设我们有以下 HTML 结构：

1
2
3
4
5
6

<div class="container">
 <div class="item myItem"></div>
  <div class="item"></div>
</div>

<div class="otherItem"></div>

我们可以使用交集选择器来选择同时具有 item 和 myItem 类的 <div> 元素：

1
2
3

.item.myItem {
  color: blue;
}

这会使得第一个 <div>（即 .item.myItem）的文字颜色变为蓝色，而其他元素则不受影响。

注意事项：

• 交集选择器不会选择那些只具有其中一个类的元素。
• 如果一个选择器包含多个类，那么元素必须拥有这些类的所有值。

2.并集选择器

定义:

• 并集选择器由多个选择器通过逗号分隔组成。
• 这些选择器匹配的是各自独立选择的元素集合的并集。
• 并集选择器是或的意思。

语法:

1
2
3

selector1, selector2, selector3 {
  /* styles go here */
}

例如，以下选择器会选择所有的 <p> 元素和所有带有 highlight 类的元素：

1
2
3

p, .highlight {
  color: red;
}

示例

假设我们有以下 HTML 结构：

1
2
3

<p>This is a paragraph.</p>
<div class="highlight">This is highlighted text.</div>
<span>This is a span element.</span>

我们可以使用并集选择器来选择所有的 <p> 元素以及带有 highlight 类的任何元素：

1
2
3

p, .highlight {
  color: red;
}

这会使得 <p> 元素和 .highlight 类的 <div> 的文字颜色都变为红色。

注意事项：

• 并集选择器中的每个选择器都是独立的，它们之间没有关系。
• 每个选择器都会应用样式规则到其匹配的元素上。
• 可以通过这种方式组合不同类型的选择器（如类型选择器、类选择器等）。

3.后代选择器

定义:

• 后代选择器用于选择某个元素的所有后代元素（子元素的子元素等等）。
• 后代选择器由两个或多个选择器通过空格分隔组成。

语法:

1
2
3

parent-selector child-selector {
  /* styles go here */
}

例如，以下选择器会选择所有 <ul> 下的 <li> 元素：

1
2
3

ul li {
  color: blue;
}

示例

假设我们有以下 HTML 结构：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<div class="container">
  <p>Outside the list.</p>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3
      <ul>
        <li>Sub-item 1</li>
        <li>Sub-item 2</li>
      </ul>
    </li>
  </ul>
  <p>Another paragraph outside the list.</p>
</div>

我们可以使用后代选择器来选择所有位于 <ul> 内的 <li> 元素：

1
2
3

.container ul li {
  color: blue;
}

这会使得所有 <ul> 内的 <li> 元素的文字颜色变为蓝色。

注意事项：

• 后代选择器中的选择器是按照从父到子的顺序排列的。
• 空格表示“后代”关系，意味着选择器匹配的是第一个选择器所选元素的所有后代元素。
• 可以通过这种方式选择特定层级的元素或者更深层的元素。

图示

4.子代选择器

定义:

• 子代选择器用于选择某个元素的**直接子元素(儿子元素)**。
• 子代选择器由两个或多个选择器通过大于号 (>) 分隔组成。

语法:

1
2
3

parent-selector > child-selector {
  /* styles go here */
}

例如，以下选择器会选择所有 <ul> 的直接子元素 <li>：

1
2
3

ul > li {
  color: blue;
}

示例

假设我们有以下 HTML 结构：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<div class="container">
  <p>Outside the list.</p>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3
      <ul>
        <li>Sub-item 1</li>
        <li>Sub-item 2</li>
      </ul>
    </li>
  </ul>
  <p>Another paragraph outside the list.</p>
</div>

我们可以使用子代选择器来选择所有 <ul> 的直接子元素 <li>：

1
2
3

.container ul > li {
  color: blue;
}

这会使得 <ul> 的直接子元素 <li> 的文字颜色变为蓝色，但不会影响 <ul> 内部的子 <ul> 中的 <li>。

注意事项：

• 子代选择器中的选择器是按照从父到子的顺序排列的。
• 大于号 (>) 表示“直接子元素”关系，意味着选择器仅匹配第一个选择器所选元素的直接子元素。
• 可以通过这种方式精确地选择特定层级的元素。

5.兄弟选择器

定义:

• 兄弟选择器用于选择与另一个元素具有相同父元素的元素。
• CSS 提供了两种主要类型的兄弟选择器：相邻兄弟选择器 (+) 和一般兄弟选择器 (~)。

相邻兄弟选择器 (+):

• 相邻兄弟选择器用于选择紧接在另一个元素后的元素，且这两个元素有相同的父元素。
• 语法：element1 + element2 选择紧接在 element1 后面的 element2 元素。

一般兄弟选择器 (~):

• 一般兄弟选择器用于选择前面有另一个元素的元素，且这两个元素有相同的父元素。
• 语法：element1 ~ element2 选择位于 element1 后面的所有 element2 元素。

示例

假设我们有以下 HTML 结构：

1
2
3
4
5
6
7

<div class="container">
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
  <div>Some div content</div>
  <p>Paragraph 3</p>
  <p>Paragraph 4</p>
</div>

我们可以使用相邻兄弟选择器来选择紧接在第一个 <p> 元素后面的 <p> 元素：

1
2
3

p + p {
  color: blue;
}

这会使得紧接在第一个 <p> 元素后面的 <p> 元素的文字颜色变为蓝色。

我们也可以使用一般兄弟选择器来选择所有位于第一个 <p> 元素后面的 <p> 元素：

1
2
3

p ~ p {
  color: green;
}

这会使得所有位于第一个 <p> 元素后面的 <p> 元素的文字颜色变为绿色。

注意事项：

• 相邻兄弟选择器 (+) 仅选择紧接在前一个元素后面的元素。
• 一般兄弟选择器 (~) 选择所有位于前一个元素后面的元素。
• 这些选择器要求元素有相同的父元素。

6.属性选择器

定义:

• 属性选择器用于选择具有指定属性或属性值的元素。
• 这种选择器允许你根据元素的属性来选择元素，非常灵活且强大。

语法:

• [attribute]: 选择具有给定属性的元素。
• [attribute=value]: 选择具有给定属性和值的元素。
• [attribute^=value]: 选择属性值以指定字符串开头的元素。
• [attribute$=value]: 选择所有属性值以指定的字符串 value 结尾的元素。
• [attribute*=value]: 选择属性值包含指定字符串的元素。

示例

假设我们有以下 HTML 结构：

1
2
3
4

<a href="https://example.com">Link to Example</a>
<a href="https://google.com">Google</a>
<a href="https://example.com/about">About Example</a>
<a href="https://example.org">Example Org</a>

我们可以使用属性选择器来选择所有具有 href 属性的 <a> 元素，并将它们的颜色设置为蓝色：

1
2
3

a[href] {
  color: blue;
}

如果我们要选择所有链接到 example.com 的 <a> 元素，并将它们的颜色设置为绿色：

1
2
3

a[href^="https://example.com"] {
  color: green;
}

如果我们要选择所有链接以 .com 结尾的 <a> 元素，并将它们的颜色设置为红色：

1
2
3

a[href$=".com"] {
  color: red;
}

如果我们要选择所有链接中包含 example 字符串的 <a> 元素，并将它们的颜色设置为 orange：

1
2
3

a[href*="example"] {
  color: orange;
}

注意事项：

• 属性选择器可以非常具体，因此它们的优先级高于大多数其他类型的选择器。
• 使用这些选择器可以更精细地控制样式，特别是在处理具有特定属性或属性值的元素时。
• 属性选择器可以与其他选择器结合使用，例如类选择器或 ID 选择器。

7.伪类选择器

定义:

• 伪类选择器用于选择处于特定状态的元素。
• 这些状态通常是用户交互的结果，比如鼠标悬停或激活链接。

常见伪类选择器

用户动作相关的伪类

• :hover: 当用户将鼠标指针悬停在元素上时选择该元素。
• :active: 当元素被激活（例如，鼠标点击时）时选择该元素。
• :focus: 当元素获得焦点（例如，通过键盘导航）时选择该元素。
• :focus-within: 当元素或其后代获得焦点时选择该元素。
• :focus-visible: 当元素获得焦点且浏览器认为应显示焦点指示时选择该元素。

链接相关的伪类

• :link: 选择未被访问过的链接。
• :visited: 选择已被用户访问过的链接。
• :target: 选择当前被激活的 URL 锚点的目标元素。
• :scope: 选择当前作用域内的元素，通常与自定义伪元素一起使用。

结构相关的伪类

• :first-child: 选择其父元素的第一个子元素。
• :last-child: 选择其父元素的最后一个子元素。
• :only-child: 选择其父元素中唯一的一个子元素。
• :nth-child(n): 选择其父元素的第 n 个子元素。
• :nth-last-child(n): 选择其父元素倒数第 n 个子元素。
• :nth-of-type(n): 选择其父元素的第 n 个同类型子元素。
• :nth-last-of-type(n): 选择其父元素倒数第 n 个同类型子元素。
• :first-of-type: 选择其父元素的第一个同类型子元素。
• :last-of-type: 选择其父元素的最后一个同类型子元素。
• :only-of-type: 选择其父元素中唯一的同类型子元素。

状态相关的伪类

• :checked: 选择被选中的 <input type="checkbox"> 或 <input type="radio"> 元素。
• :enabled: 选择可交互的 <input> 或 <button> 元素。
• :disabled: 选择不可交互的 <input> 或 <button> 元素。
• :indeterminate: 选择未完全选中的 <input type="checkbox"> 或 <progress> 元素。
• :valid: 选择有效表单控件。
• :invalid: 选择无效表单控件。
• :in-range: 选择在范围内的 <input type="number"> 或 <input type="range"> 元素。
• :out-of-range: 选择超出范围的 <input type="number"> 或 <input type="range"> 元素。
• :placeholder-shown: 选择显示占位符文本的 <input> 或 <textarea> 元素。
• :read-only: 选择只读的 <input> 或 <textarea> 元素。
• :read-write: 选择可编辑的 <input> 或 <textarea> 元素。
• :required: 选择被标记为必填的 <input> 或 <select> 元素。
• :optional: 选择未被标记为必填的 <input> 或 <select> 元素。

否定伪类

语法：

:not(选择器):排除满足括号中条件的元素。

假设我们有以下 HTML 结构：

1
2
3
4
5
6
7

<a href="https://example.com" class="link">Visit Example</a>
<button>Click Me</button>
<ul>
  <li>First Item</li>
  <li>Second Item</li>
  <li>Third Item</li>
</ul>

我们可以使用伪类选择器来改变链接在不同状态下的颜色：

1
2
3
4
5
6
7
8
9
10
11

.link:hover {
  color: blue;
}

.link:active {
  color: red;
}

.link:visited {
  color: purple;
}

我们还可以使用伪类选择器来高亮列表的第一项和最后一项：

1
2
3
4
5
6
7

li:first-child {
  background-color: yellow;
}

li:last-child {
  background-color: lightblue;
}

注意事项：

• 伪类选择器不改变文档的实际结构，只影响样式。
• 伪类选择器可以与其他选择器组合使用，例如类选择器或属性选择器。
• 伪类选择器可以用来实现复杂的交互效果和动态样式变化。
• 伪类选择器要注意状态的执行顺序。一个标准的执行状态是lvha
• 伪类选择器中link和visted是a标签独有的
• 伪类选择器中focus在表单类元素(输入等)中使用
• 伪类选择器中的有关n的值
  

8.伪元素选择器

定义:

• 伪元素选择器用于选择元素的特定部分，而不是整个元素本身。
• 这些选择器通常用于添加装饰性内容或调整元素内部的布局。

常见伪元素选择器

• ::before: 在元素的内容之前插入内容。
• ::after: 在元素的内容之后插入内容。
• ::first-letter: 选择元素的第一字母。
• ::first-line: 选择元素的第一行。
• ::selection: 选择用户选取的文本。
• ::placeholder: 选择 <input> 或 <textarea> 元素的占位符文本。（注意：此伪元素在某些浏览器中可能不可用）

语法

伪元素选择器使用两个冒号 (::) 来表示，这是因为早期的单冒号 (:) 语法被保留给伪类选择器。

示例

假设我们有以下 HTML 结构：

1
2

<p>这是一个段落。</p>
<input type="text" placeholder="输入文字">

我们可以使用伪元素选择器来向段落的开始添加一个图标：

1
2
3
4

p::before {
  content: "👉";
  color: green;
}

我们还可以使用伪元素选择器来更改输入框的占位符文本颜色：

1
2
3

input::placeholder {
  color: gray;
}

注意事项：

• 伪元素选择器创建的内容不会成为文档的一部分，因此不能通过 JavaScript 访问。
• content 属性通常与伪元素选择器一起使用，用于插入实际的内容。
• 伪元素选择器可以与其他选择器组合使用，例如类选择器或属性选择器。

选择器的优先级

行内样式 > ID选择器 > 类选择器 > 元素选择器 > 通配选择器 > 继承过来的样式

选择器的权重

在CSS中，选择器的权重（也称为优先级或特异性）决定了当多个规则应用于同一个元素时，哪个规则将被应用。权重越高，该规则就越有可能被浏览器采用。了解选择器的权重对于预测和控制样式如何显示非常重要。

CSS 选择器权重规则

1. 内联样式 (style 属性)：
   • 权重: 1000
   • 示例: <p style="color: red;">Text</p>
2. ID 选择器：
   • 权重: 100
   • 示例: #uniqueId { color: red; }
3. 类选择器、属性选择器、伪类：
   • 权重: 10
   • 示例:
     • .className { color: red; }
     • [attr=value] { color: red; }
     • :hover { color: red; }
4. 类型选择器、伪元素：
   • 权重: 1
   • 示例:
     • p { color: red; }
     • ::before { content: ' '; }
5. 通配符、子代选择器、相邻兄弟选择器、通用兄弟选择器等：
   • 权重: 0
   • 示例:
     • * { color: red; }
     • div > p { color: red; }
     • h1 + p { color: red; }
     • p ~ div { color: red; }
6. 继承：
   • 不计算权重，但继承的样式会根据其来源元素的规则来决定。
7. 重要性 (!important)：
   • 权重: 无限大
   • 示例: .className { color: red !important; }

计算方法

• 将每个选择器分解为其组成部分，并为每种类型分配一个权重值。
• 将这些值相加以得出最终的权重总和。
• 如果两个规则具有相同的权重，则最后定义的规则会覆盖之前的规则（除非其中一个使用了 !important）。

示例

假设我们有以下CSS规则：

1. .classA .classB { color: blue; } —— 类选择器 (10 + 10 = 20)
2. #idA.classA { color: green; } —— ID 选择器 (100 + 10 = 110)
3. div > p { color: yellow; } —— 类型选择器 (1)
4. body p { color: red; } —— 类型选择器 (1)

如果 <p> 元素同时具有 .classB 和 #idA，则将应用绿色文本，因为它的权重最高 (110)。

注意事项

• !important 应谨慎使用，因为它可以导致意外的结果并使得样式难以维护。
• 使用更具体的选择器通常会导致更高的权重，但这可能会使代码变得复杂且难以管理。
• 在实际开发中，尽量避免复杂的嵌套选择器和不必要的 !important 使用。

CSS的三大特性

能继承的属性不会影响元素的布局。简单来说就是和盒子模型相关的都不可以继承

CSS像素

像素说白了就是屏幕上的一个个小的像素点。

CSS颜色属性

1. 概述

• 用途：在网页设计中设置元素的背景色、文字颜色等。
• 语法：color: value;
• 值：CSS 支持多种颜色表示方式，包括颜色名、十六进制数、RGB、RGBA、HSL、HSLA等。

2. 基本颜色名称

• 提供了140种预定义的颜色名称，例如：
  • red, blue, green, yellow, purple, orange等。

3. 十六进制数（HEX）

• 格式：#RRGGBB
• 说明：每个RR, GG, BB分别代表红、绿、蓝三色的亮度值（00到FF）。
  • 示例：#FF0000 (红色), #00FF00 (绿色), #0000FF (蓝色).

4.十六进制颜色加Alpha通道（HEXA）

格式

• HEXA颜色采用#RRGGBBAA的格式，其中RR、GG和BB与HEX相同，而AA表示Alpha通道的透明度值，范围同样是从00到FF。
• Alpha通道的值同样由两位十六进制数表示，00表示完全透明，FF表示不透明。

示例

• 不透明的红色：#FF0000FF
• 半透明的红色（50%透明度）：#FF000080 （因为80大约是FF的一半）
• 完全透明：#00000000

5.RGB

1. RGB (Red, Green, Blue)

• 格式：rgb(r, g, b) 或 rgb(r g b)
• 说明：r, g, b 分别代表红、绿、蓝三色的亮度值（0到255）。
  • 示例：rgb(255, 0, 0) (红色)

2. RGBA (Red, Green, Blue, Alpha)

• 格式：rgba(r, g, b, a) 或 rgba(r g b / a)
• 说明：r, g, b 同上；a 是透明度（0.0 到 1.0）。
  • 示例：rgba(255, 0, 0, 0.5) (半透明红色)

6.HSL (Hue, Saturation, Lightness)

1. HSL (Hue, Saturation, Lightness)

• 格式：hsl(h, s%, l%) 或 hsl(h s% l%)
• 说明：h 表示色调角度（0到360），s 表示饱和度（0%到100%），l 表示亮度（0%到100%）。
  • 示例：hsl(0, 100%, 50%) (红色)

2. HSLA (Hue, Saturation, Lightness, Alpha)

• 格式：hsla(h, s%, l%, a) 或 hsla(h s% l% / a)
• 说明：同HSL，a 表示透明度（0.0 到 1.0）。
  • 示例：hsla(0, 100%, 50%, 0.5) (半透明红色)

HSL和HSLA依靠色相环来定颜色，下面是色相环

CSS字体属性

1. 概述

• 用途：用于控制文本的外观，包括字体家族、大小、样式等。
• 适用性：这些属性主要应用于文本元素，如<p>, <h1>, <span>等。

2. font-size

• 作用：设置字体大小。
• 语法：font-size: value;
• 单位：像素(px)，百分比(%), em, rem等。
  • 示例：font-size: 16px; 或 font-size: 1.5em;

3. font-family

• 作用：指定字体家族。
• 语法：font-family: value;
• 值：一个或多个字体名称，或通用字体家族名称。
  • 示例：font-family: Arial, sans-serif;
  • font-family: "微软雅黑";
  • font-family: "楷体";
  • font-family: "宋体";
  • font-family: "华文彩云";
• 多个字体家族，会按顺序查找，如果找到即可用，找到能用的为止。并且写多个字体族时，通常在最后写上serif(衬线字体)或sans-serif(非称线字体)

• 衬线字体：有棱有角，笔画分明
• 非衬线字体：棱角不明显或根本没有，圆润。

4.font-style

font-style 属性用于设置或更改文本的字体样式，主要用于控制文本是否以斜体 (italic) 或正常 (normal) 显示。此外，还有一个特殊的值 oblique，它会倾斜文本但不使用真正的斜体字体。

语法

1

font-style: normal | italic | oblique;

• normal:
  • 使用字体的正常样式。
  • 这是默认值，如果一个元素没有定义 font-style，那么它将使用正常样式。
• italic:
  • 使用字体的斜体样式。
  • 如果字体系列包含斜体字体，则使用该斜体字体；如果没有，则浏览器会尝试模拟斜体效果。
• oblique:
  • 倾斜文本。
  • 与 italic 类似，但是它不会查找斜体字体，而是直接倾斜文本来模仿斜体效果。

5.font-weight

font-weight 属性用于设置或更改文本的粗细程度。它可以让你控制文本显示为粗体、正常体或其他粗细等级。

语法

1

font-weight: normal | bold | bolder | lighter | 100 | 200 | ... | 900;

• normal:
  • 使用字体的正常粗细。
  • 默认值通常是400（除非字体特别指定）。
• bold:
  • 使用字体的粗体版本。
  • 如果字体系列包含粗体字，则使用该粗体字；如果没有，则通常会使用加粗效果。
• bolder:
  • 设置文本比其父元素更粗。
  • 这是一个相对值，取决于父元素的 font-weight。
• lighter:
  • 设置文本比其父元素更细。
  • 同样是一个相对值。
• 100 至 900:
  • 数字值，表示字体的粗细级别。
  • 100是最细的，900是最粗的。
  • 常见的数值包括100、200、300、400（正常）、500、600、700（粗体）、800和900。

6.字体复合属性

• 定义：在 CSS 中，font 是一个复合属性，它允许开发者同时设置多个与字体相关的单一属性。
• 优点：简化 CSS 代码，提高可维护性和可读性。

1. 字体复合属性包含哪些子属性？

• 字体风格 (font-style)：normal | italic | oblique
• 字体变体 (font-variant)：normal | small-caps
• 字体加粗 (font-weight)：normal | bold | 100 | 200 … 900
• 字体尺寸 (font-size)：16px | 1em | 100%
• 行高 (line-height)：24px | 1.5 | 150%
• 字体家族 (font-family)：Arial | sans-serif | serif | monospace

2. 使用顺序

• 顺序：font-style → font-variant → font-weight → font-size/[line-height] → font-family
• 注意：font-size 和 font-family 是必需的，其他属性是可选的。line-height 可以写在 font-size 后面，用 / 分隔。

3.示例

1
2
3

p {
  font: italic small-caps bold 16px/1.5 Georgia, serif;
}

CSS常用文本属性

1.文本颜色

1. 什么是文本颜色属性？

• 定义：CSS 中的文本颜色属性用于控制文本的颜色。
• 主要属性：color 和 text-decoration-color。

2.color 属性

• 用途：设置文本颜色。
• 语法：color: <color-value>;
• 值：
  • 关键字：如 red, blue, green。
  • 十六进制：如 #FF0000（红色）。
  • RGB：如 rgb(255, 0, 0)（红色）。
  • RGBA：如 rgba(255, 0, 0, 0.5)（半透明红色）。
  • HSL：如 hsl(0, 100%, 50%)（红色）。
  • HSLA：如 hsla(0, 100%, 50%, 0.5)（半透明红色）。

2.文本间距

1. 什么是文本间距？

• 定义：文本间距指的是文本字符之间的空间，包括字符间距、单词间距、行间距等。

2. letter-spacing 属性

• 用途：设置字符之间的间距。
• 语法：letter-spacing: <spacing-value>;
• 值：
  • 正数增加字符间的间距。
  • 负数减少字符间的间距。

示例

1
2
3

p {
  letter-spacing: 2px; /* 字符间增加 2px 的间距 */
}

3. word-spacing 属性

• 用途：设置单词之间的间距。
• 语法：word-spacing: <spacing-value>;
• 值：
  • 正数增加单词间的间距。
  • 负数减少单词间的间距。

4. line-height 属性

• 用途：设置行间距。
• 语法：line-height: <line-height-value>;
• 值：
  • 单位值（如 24px）：固定行高。
  • 无单位值（如 1.5）：基于字体大小的比例行高。

5. text-indent 属性

• 用途：设置首行缩进。
• 语法：text-indent: <indent-value>;
• 值：
  • 单位值（如 2em）：首行缩进的距离。

3.文本修饰

1. 什么是文本修饰？

• 定义：文本修饰是指对文本进行额外的视觉处理，如添加下划线、删除线等。

2. text-decoration 属性

• 用途：设置文本的修饰效果。
• 语法：text-decoration: none | underline | overline | line-through;
• 值：
  • none：取消所有修饰。
  • underline：在文本下方添加下划线。
  • overline：在文本上方添加一条线。
  • line-through：在文本中间添加一条线，表示文本被删除。

1
2
3
4
5
6
7
8
9
10
11

a {
  text-decoration: none; /* 取消链接的默认下划线 */
}

.highlight {
  text-decoration: underline; /* 添加下划线 */
}

.deleted {
  text-decoration: line-through; /* 添加删除线 */
}

3.text-decoration 复合属性

下面的组合实际上是text-decoration-line 属性，text-decoration-style 属性，text-decoration-color 属性的组合

我们可以把这三个属性写在一个当中

示例

1
2
3

a {
    text-decoration:underline wavy red
 }

text-decoration-line的属性值有：

• none：无修饰线。
• underline：下划线。
• overline：上划线。
• line-through：中划线。

text-decoration-style 的属性值有：

• solid：实线。
• double：双线。
• dotted：点线。
• dashed：虚线。
• wavy：波浪线。

text-decoration-color即是颜色属性。

4.文本对齐

1. 什么是文本对齐？

• 定义：文本对齐是指文本在容器内的水平或垂直方向上的排列方式。

2. text-align 属性(水平对齐)

• 用途：设置文本的水平对齐方式。

• 语法：text-align: left | right | center | justify;

• 值

  ：

  • left：文本左对齐。
  • right：文本右对齐。
  • center：文本居中对齐。
  • justify：文本两端对齐，自动调整单词间距使每行文本长度相等。

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

p {
  text-align: center; /* 文本居中对齐 */
}

.left-align {
  text-align: left; /* 文本左对齐 */
}

.right-align {
  text-align: right; /* 文本右对齐 */
}

.justify-text {
  text-align: justify; /* 文本两端对齐 */
}

3.垂直对齐

5.行高

1. 什么是行高？

• 定义：行高是指文本行之间的垂直间距。
• 重要性：良好的行高可以提高文本的可读性和美观度。

2. line-height 属性

• 用途：设置或更改文本的行高。
• 语法：line-height: <line-height-value>;
• 值：
  • 单位值：如 24px，表示固定的高度。
  • 比例值：如 1.5 或 150%，表示相对于当前字体大小的比例高度。数字比较常用

3. 示例

1
2
3
4

p {
  font-size: 16px; /* 字体大小 */
  line-height: 1.5; /* 行高为字体大小的 1.5 倍 */
}

4. 计算行高

• 计算公式：行高 = 字体大小 * 行高比例值
• 示例：
  • 如果字体大小为 16px，并且 line-height 设置为 1.5，那么行高就是 16px * 1.5 = 24px。

5.行高的应用场景

• 调整多行文字

• 单行文字的垂直居中

  • 写法：height=line-height即可

  • p {
        heigth: 100px;
        line-height:100px;
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    
    **要注意是单行文字**。
    
    ### 6.关于行高的一些注意事项
    
    ![image-20240729153706567](../images/JavaScript/image-20240729153706567.png)
    
    ## 6.vertical-align
    
    ### 1. 什么是 `vertical-align`？
    
    - **定义**：`vertical-align` 属性用于设置行内元素（如 `<span>`、`<img>` 或 `<input>`）在其包含块中的垂直对齐方式。
    - **适用范围**：**仅适用于行内元素或行内块元素。**
    
    ### 2. `vertical-align` 的语法
    
    ```css
    vertical-align: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length>;
    
    

3. vertical-align 的值

• **baseline**：默认值，元素底部与文本基线对齐。
• **sub**：元素作为下标对齐。
• **super**：元素作为上标对齐。
• **top**：元素顶部与包含块的顶部对齐。
• **text-top**：元素顶部与文本顶部对齐。
• **middle**：元素垂直居中对齐。
• **bottom**：元素底部与包含块的底部对齐。
• **text-bottom**：元素底部与文本底部对齐。
• **<percentage>**：元素垂直对齐的百分比，相对于包含块的高度。
• **<length>**：元素垂直对齐的具体长度，如 2px。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

span {
  vertical-align: middle; /* 垂直居中对齐 */
}

img {
  vertical-align: bottom; /* 图像底部与文本底部对齐 */
}

sup {
  vertical-align: super; /* 上标对齐 */
}

sub {
  vertical-align: sub; /* 下标对齐 */
}

4. 注意事项

• 行内元素：vertical-align 只适用于行内元素。
• 块级元素：对于块级元素，可以使用 Flexbox 或 Grid 布局来实现垂直居中。
• 百分比值：使用百分比时，该百分比是相对于包含块的高度计算的。
• 长度值：使用长度值时，可以精确控制元素的垂直位置

CSS列表相关属性

1. 什么是列表？

• 定义：列表是一种常见的 HTML 元素，用于展示一系列条目。

• 类型

  ：主要有两种类型的列表：

  • 有序列表（<ol>）：带有编号的列表。
  • 无序列表（<ul>）：带有项目符号的列表。

2. list-style 属性

• 用途：list-style 是一个复合属性，用于设置列表项的样式。

• 语法：list-style: <list-style-type> <list-style-position> <list-style-image>;

• 值：

  • **list-style-type**：定义列表项的标记类型。
  • **list-style-position**：定义列表项标记相对于文本的位置。
  • **list-style-image**：定义列表项标记为图像。

3. list-style-type 属性

• 用途：设置列表项的标记类型。

• 语法：list-style-type: disc | circle | square | decimal | lower-roman | upper-roman | ...;

• 值：

  • disc：实心圆点。
  • circle：空心圆圈。
  • square：方块。
  • decimal：阿拉伯数字。
  • lower-roman：小写罗马数字。
  • upper-roman：大写罗马数字。
  • 更多值，如 lower-alpha、upper-alpha 等。

4. list-style-position 属性

• 用途：设置列表项标记的位置。

• 语法：list-style-position: inside | outside;

• 值：

  • inside：列表标记位于文本之内。

• outside：列表标记位于文本之外（默认值）。

5. list-style-image 属性

• 用途：设置列表项标记为图像。

• 语法：list-style-image: url("image-url");

• 值：

  • url("image-url")：指定图像 URL。

6. list-style 复合属性

• 用途：同时设置 list-style-type、list-style-position 和 list-style-image。

• 语法：list-style: <list-style-type> <list-style-position> <list-style-image>;

  示例：

  1 2 3

  ul { list-style: square inside url("marker.png"); }

7.示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

/* 无序列表 */
ul {
  list-style-type: square;
  list-style-position: inside;
}

/* 有序列表 */
ol {
  list-style-type: lower-roman;
}

/* 自定义列表项图像 */
ul.custom-list {
  list-style-image: url("marker.png");
}

CSS边框相关属性

1. 什么是边框？

• 定义：边框是在元素周围绘制的线，用于定义元素的边界。
• 用途：边框可以用来美化元素、强调内容或分隔不同的区域。

2. border 属性

• 用途：设置边框的宽度、样式和颜色。
• 语法：border: <width> <style> <color>;
• 值：
  • <width>：边框的宽度，如 1px。
  • <style>：边框的样式，如 solid、dashed、dotted 等。
  • <color>：边框的颜色，可以是颜色名称、十六进制值、RGB 值等。

3. border-width 属性

• 用途：设置边框的宽度。
• 语法：border-width: <top> <right> <bottom> <left>;
• 值：
  • <top>：上边框宽度。
  • <right>：右边框宽度。
  • <bottom>：下边框宽度。
  • <left>：左边框宽度。
• 简写形式：可以使用一个值（四边相同），两个值（上下、左右），或三个值（上、左右、下）。

4. border-style 属性

• 用途：设置边框的样式。
• 语法：border-style: <top> <right> <bottom> <left>;
• 值：
  • none：没有边框。
  • hidden：隐藏边框，类似于 none，但在表格中有所不同。
  • dotted：点线。
  • dashed：虚线。
  • solid：实线。
  • double：双线。
  • groove：三维凹槽。
  • ridge：三维凸起。
  • inset：三维内嵌。
  • outset：三维外嵌。
• 简写形式：同 border-width。

5. border-color 属性

• 用途：设置边框的颜色。
• 语法：border-color: <top> <right> <bottom> <left>;
• 值：
  • <top>：上边框颜色。
  • <right>：右边框颜色。
  • <bottom>：下边框颜色。
  • <left>：左边框颜色。
• 简写形式：同 border-width。

6. border-radius 属性(C3)

• 用途：设置边框的圆角。
• 语法：border-radius: <top-left> <top-right> <bottom-right> <bottom-left>;
• 值：
  • <top-left>：左上角圆角半径。
  • <top-right>：右上角圆角半径。
  • <bottom-right>：右下角圆角半径。
  • <bottom-left>：左下角圆角半径。
• 简写形式：可以使用一个值（四个角相同），两个值（水平、垂直），三个值（第一个值用于顶部角，第二个值用于右下角，第三个值用于左下角，顶部角使用第一个值。），或四个值（第一和第三为水平，第二和第四为垂直）。

7. border-top, border-right, border-bottom, border-left 属性

• 用途：分别设置顶部、右侧、底部和左侧的边框。
• 语法：border-top: <width> <style> <color>;
• 简写形式：border-top-width, border-top-style, border-top-color。

8. 示例

1
2
3
4
5
6
7
8
9
10
11
12

div {
  border: 2px solid #000; /* 2px 实线黑色边框 */
  border-radius: 10px; /* 圆角半径为 10px */
  padding: 20px; /* 内边距 */
  margin: 10px; /* 外边距 */
}

button {
  border: 1px dashed #ccc; /* 1px 虚线灰色边框 */
  border-radius: 5px; /* 圆角半径为 5px */
  padding: 10px 20px; /* 内边距 */
}

9. 小贴士

• 简写形式：border 属性可以一次性设置边框的宽度、样式和颜色。
• **border-radius**：可以给元素添加圆角效果，使界面更加友好。
• 兼容性：这些属性在所有现代浏览器中都得到了很好的支持。
• 如果只写了边框的宽度，但是没有样式，会造成边框不显示

CSS表格独有属性

1. border-collapse 属性

• 用途：控制表格边框是否合并为单一线条。
• 语法：border-collapse: collapse | separate;
• 值：
  • collapse：边框合并为单一线条。
  • separate：边框各自独立（默认值）。

2. border-spacing 属性

• 用途：设置表格单元格之间的间距。
• 语法：border-spacing: <horizontal-spacing> <vertical-spacing>;
• 值：
  • <horizontal-spacing>：水平间距。
  • <vertical-spacing>：垂直间距。
• 注意：仅在 border-collapse: separate; 时有效。

3. empty-cells 属性

• 用途：控制是否显示空白单元格的边框和背景。
• 语法：empty-cells: show | hide;
• 值：
  • show：显示空白单元格的边框和背景（默认值）。
  • hide：隐藏空白单元格的边框和背景。

4. caption-side 属性

• 用途：设置表格标题的位置。
• 语法：caption-side: top | bottom;
• 值：
  • top：标题位于表格上方（默认值）。
  • bottom：标题位于表格下方。

5. table-layout 属性

• 用途：控制表格的布局算法。
• 语法：table-layout: auto | fixed;
• 值：
  • auto：根据内容自动调整列宽（默认值）。
  • fixed：使用固定的列宽，即使内容超出也会截断。

6. 示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

table {
  border-collapse: collapse; /* 合并边框 */
  border: 1px solid #ccc; /* 添加边框 */
  width: 100%; /* 表格宽度 */
  table-layout: fixed; /* 固定列宽 */
  empty-cells: show; /* 显示空白单元格 */
  caption-side: bottom; /* 标题位于下方 */
}

th, td {
  border: 1px solid #ddd; /* 单元格边框 */
  padding: 8px; /* 内边距 */
  text-align: left; /* 文本左对齐 */
}

th {
  background-color: #f2f2f2; /* 表头背景色 */
}

7. 小贴士

• **border-collapse: collapse;**：通常用于创建清晰的表格边框。
• **table-layout: fixed;**：适用于需要固定列宽的情况，例如打印或限制宽度的设计。
• **empty-cells: hide;**：可以隐藏空白单元格的边框，使表格看起来更整洁。

CSS背景相关属性

1. background-color

• 用途：设置元素的背景颜色。

• 语法：background-color: <color>;

• 示例：

  1 2 3

  .example { background-color: #ff0000; }

2. background-image

• 用途：设置元素的背景图像。

• 语法：background-image: url(<image-url>);

• 示例：

  1 2 3

  .example { background-image: url('path/to/image.jpg'); }

3. background-repeat

• 用途：控制背景图像的重复方式。

• 可选值：

  • repeat (默认) - 横向和纵向重复
  • no-repeat - 不重复
  • repeat-x - 横向重复
  • repeat-y - 纵向重复

• 语法：background-repeat: <repeat-style>;

• 示例：

  1 2 3

  .example { background-repeat: no-repeat; }

4. background-position

• 用途：设置背景图像的位置。

• 语法：background-position: <horizontal-value> <vertical-value>;

• 可选值：

  • 关键字：top, center, bottom, left, right
  • 百分比：如 50% 50% 表示居中位置
  • 长度：如 20px 40px

• 示例：

  1 2 3

  .example { background-position: center bottom; }

5. background-size(C3)

• 用途：定义背景图像的尺寸。

• 可选值：

  • auto (默认) - 图像保持原始大小
  • cover - 图像会拉伸以覆盖整个容器，可能会被裁剪
  • contain - 图像会拉伸以适应容器，但不改变比例
  • 长度或百分比

• 语法：background-size: <size>;

• 示例：

  1 2 3

  .example { background-size: cover; }

6. background-attachment

• 用途：设置背景图像是否随页面滚动而滚动。

• 可选值：

  • scroll (默认) - 背景图像随页面滚动
  • fixed - 背景图像固定在视窗上

• 语法：background-attachment: <attachment>;

• 示例：

  1 2 3

  .example { background-attachment: fixed; }

7. background(C3)

• 用途：组合多个背景属性为一个声明。

• 语法：background: <color> <image> <repeat-style> <attachment> <position>;

• 示例：

  1 2 3

  .example { background: #f0f0f0 url('pattern.jpg') repeat-x scroll 0 0; }

8. background-blend-mode(C3)

• 用途：指定背景图层间的混合模式。

• 语法：background-blend-mode: <blend-mode>;

• 示例：

  1 2 3 4

  .example { background-image: url('bg1.jpg'), url('bg2.jpg'); background-blend-mode: multiply; }

属性值

• normal (默认值)
  • 表示背景图层之间没有特殊混合效果，即上层背景完全覆盖下层背景。
• multiply
  • 乘法混合模式。上层背景的颜色与其下的背景颜色相乘，得到的结果颜色通常比原始颜色更深。
• screen
  • 屏幕混合模式。上层背景的颜色与其下的背景颜色的补色相乘，得到的结果颜色通常比原始颜色更亮。
• overlay
  • 覆盖混合模式。根据底层颜色的不同，可能会使上层颜色变暗或变亮。
• darken
  • 取两层颜色中较暗的颜色作为结果颜色。
• lighten
  • 取两层颜色中较亮的颜色作为结果颜色。
• color-dodge
  • 避开颜色混合模式。通常会使颜色变得更亮，除非下层颜色接近黑色。
• color-burn
  • 烧灼颜色混合模式。通常会使颜色变得更暗，除非下层颜色接近白色。
• hard-light
  • 硬光混合模式。如果混合色比50%灰亮，则混合色变亮；否则混合色变暗。
• soft-light
  • 柔光混合模式。类似于硬光，但过渡更加平滑。
• difference
  • 差异混合模式。取上层和下层颜色的差值作为结果颜色。
• exclusion
  • 排除混合模式。类似差异混合模式，但对比度较低。
• hue
  • 色相混合模式。保持下层背景的亮度和饱和度，而使用上层背景的颜色作为色相。
• saturation
  • 饱和度混合模式。保持下层背景的亮度和色相，而使用上层背景的颜色作为饱和度。
• color
  • 颜色混合模式。保持下层背景的亮度，而使用上层背景的颜色作为色相和饱和度。
• luminosity
  • 亮度混合模式。保持下层背景的颜色（色相和饱和度），而使用上层背景的颜色作为亮度。

9. background-origin(C3)

• 用途：确定背景图像的位置相对于哪个盒子边缘。

• 可选值：

  • padding-box (默认)
  • border-box
  • content-box

• 语法：background-origin: <origin>;

• 示例：

  1 2 3

  .example { background-origin: border-box; }

属性值

• padding-box: 背景图像相对于内边距区域定位。
  • 这意味着背景图像不会延伸到内边距以外的部分，即不会覆盖边框和外边距。
• border-box: 背景图像相对于边框区域定位。
  • 这意味着背景图像会延伸到边框的外部边缘，覆盖边框区域。
• content-box: 背景图像相对于内容区域定位。
  • 这意味着背景图像仅在内容区域内显示，不会延伸到内边距或边框以外的部分。

10. background-clip(C3)

• 用途：确定背景剪切到哪个边界盒。

• 可选值：

  • border-box(默认值)
  • padding-box
  • content-box
  • text：背景图只呈现在文字上，前提是该文字是透明的

• 语法：background-clip: <clip-area>;

• 示例：

  1 2 3

  .example { background-clip: content-box; }

CSS鼠标相关属性

• 作用：控制鼠标在某元素上显示的图示
• 语法：cursor:value

下面列举几个比较常用的属性值

• pointer:小手
• move：移动图标
• text：文字选择器
• crosshair：十字架
• wait：等待
• help：帮助

拓展：自定义鼠标图片

1
2
3

div {
    cursor: url(image),pointer;
}

!!!注意

不要忘了指定光标类型poniter。

CSS盒子模型(重点)

1.常用的长度单位

• 像素（px）

  • 最常用的长度单位。
  • 在大多数情况下，1px等于屏幕上的一个物理像素。
  • 注意不同设备的像素密度可能不同。

• 百分比（%）

  • 相对于父元素的尺寸。
  • 非常适合响应式设计。
  • 例如，如果一个元素的宽度设置为50%，那么它的宽度将是其父元素宽度的一半。

• 视口单位（vw, vh, vmin, vmax）

  • 比如我现在的屏幕大小是750 * 1200
  • vw: 视口宽度的百分比（1vw = 1% of viewport width）。则1vw = 7.5px
  • vh: 视口高度的百分比（1vh = 1% of viewport height）。则1vh = 12px
  • vmin: 视口较小尺寸的百分比（或两个百分比中的较小者）。
  • vmax: 视口较大尺寸的百分比（或两个百分比中的较大者）。
  • 这些单位非常适合响应式设计，因为它们基于浏览器窗口的尺寸。

• em

  • 相对于当前元素的字体大小。
  • 如果当前元素没有显式设置字体大小，则相对于父元素的字体大小。
  • 例如，如果一个元素的字体大小为16px，并且设置了2em的宽度，那么该元素的宽度就是32px。

• rem

  • 相对于根元素（通常是<html>元素）的字体大小。
  • 与em类似，但是更易于全局控制，因为它始终相对于根元素。

• rpx（Responsive Pixel）

  • 定义：rpx 是一种基于屏幕宽度的相对单位，它可以根据屏幕的宽度自动调整大小，从而实现不同屏幕尺寸下的适配。

  • 计算方式：

    • 750rpx = 设备宽度（对于iPhone 6/7/8来说，设备宽度为375px）
    • 因此，1rpx = 375px / 750 = 0.5px

  • 适用场景：

    • 主要用于微信小程序、React Native、Weex等移动应用开发环境。
    • 特别适合用于跨平台的移动应用开发，可以简化不同屏幕尺寸的适配工作。

示例代码：

在微信小程序中使用rpx的例子如下：

1
2
3
4
5
6
7
8
9

/* 微信小程序中的CSS样式 */
.view {
  width: 100rpx; /* 宽度为屏幕宽度的1/7.5 */
  height: 200rpx; /* 高度为屏幕宽度的2/7.5 */
}

.text {
  font-size: 32rpx; /* 字体大小为屏幕宽度的32/750 */
}

总结

• rpx 单位可以确保在不同屏幕尺寸的设备上元素的尺寸保持一致的比例。
• 750rpx 相当于 iPhone 6/7/8 的屏幕宽度（375px），这意味着1rpx 大约等于 0.5px。
• rpx 单位非常适合用于微信小程序和跨平台移动应用开发，能够轻松处理不同设备的屏幕适配问题。

2.元素的显示模型

块级元素 (Block Elements)

• 定义：块级元素默认独占一行，即每个块级元素都会从新的一行开始，并且其后的块级元素也会在新的一行开始。
• 特性：
  • 宽度默认为容器的100%。
  • 可以设置高度、宽度、对齐等属性。
  • 内部可以包含块级元素和其他类型的元素。
• 示例：
  • <div>、<p>、<ul>、<table>、<h1> 到 <h6> 等。
  • ol、ul、li、dl、dt、dd
  • form

行内元素 (Inline Elements)

• 定义：行内元素不会独占一行，它们只占据实际所需的宽度，并与相邻的行内元素位于同一行。
• 特性：
  • 不可设置宽度和高度。
  • 默认宽度由内容撑开
  • 默认高度由内容撑开
• 示例：
  • <span>、<a>、<img>、<strong>、<em> 等。

行内块元素 (Inline-Block Elements)

• 定义：行内块元素结合了块级元素和行内元素的特点，它们像行内元素一样在同一行显示，但又像块级元素那样可以设置宽度和高度。
• 特性：
  • 可以设置宽度和高度。
  • 不会独占一行，可以与其他行内元素并排显示。
  • 默认宽度由内容撑开
  • 默认高度由内容撑开
• 示例：
  • 使用 CSS 属性 display: inline-block; 将任何元素变为行内块元素。

总结

• 块级元素：独占一行，可设置宽高。
• 行内元素：不独占一行，不可设置宽高。
• 行内块元素：在同一行显示，可设置宽高。

3.盒子模型的组成

1. 盒子模型概述

• 定义：CSS盒子模型描述了HTML元素如何在页面上渲染，每个元素都被视为一个矩形盒子。

• 组成部分

  ：盒子由四个部分组成：

  • **Content (内容)**：元素的实际内容，如文本或图片。
  • **Padding (内边距)**：内容与边框之间的空间。
  • **Border (边框)**：围绕内容和内边距的一条线。
  • **Margin (外边距)**：边框与周围元素之间的空白区域。

2. 盒子模型的计算

• 元素的总宽度 = width + padding + border + margin
• 元素的总高度 = height + padding + border + margin

3.盒子模型图示

4.盒子的内边距(padding)

padding实际上是一个复合属性。使用方法如下

• padding:10px：会在四个方向上同时使用10px的内边距
• padding:10px 20px：10px会应用在上下方向，20px会应用在左右方向
• padding:10px 20px 30px：依次是上10px，左右20px，下30px
• padding:10px 20px 30px 40px：依次是上10px，右20px，下30px，左40px

你也可以单独给一个方向去设置。语法如下

padding-方向:value

方向可以写left，right，top，bottom

注意：

1. padding不能为负数
2. padding设置于行内元素时，上下方向的内边距有可能会出现占位问题。左右方向没有问题
3. 块级元素和行内块级元素没有问题

5.盒子的边框(border)

详见CSS边框相关属性

6.盒子的外边距(margin)

margin实际上是一个复合属性。使用方法如下

• margin:10px：会在四个方向上同时使用10px的外边距
• margin:10px 20px：10px会应用在上下方向，20px会应用在左右方向
• margin:10px 20px 30px：依次是上10px，左右20px，下30px
• margin:10px 20px 30px 40px：依次是上10px，右20px，下30px，左40px

你也可以单独给一个方向去设置。语法如下

margin-方向:value

方向可以写left，right，top，bottom

注意事项：

1. 子元素的 margin ，是参考父元素的 content 计算的。(因为是父亲的 content 中承装着子元素)
2. 上 margin、左 margin:影响自己的位置;下 margin、右 margin:影响后面兄弟元素的位置。
3. 块级元素、行内块元素，均可以完美地设置四个方向的 margin;但行内元素，左右 margin 可以完美设置，上下 margin 设置无效。
4. margin 的值也可以是 auto，如果给一个块级元素设置左右 margin 都为 auto，该块级元素会在父元素中水平居中。
5. margin 的值可以是负值。

7.margin塌陷问题

什么是 margin 塌陷?
第一个子元素的上 margin 会作用在父元素上，最后一个子元素的下 margin 会作用在父元素上。
如何解决 margin 塌陷?

• 方案一:给父元素设置不为0的 padding。
• 方案二:给父元素设置宽度不为0的 border。
• 方案三:给父元素设置 css样式 overflow:hidden

8.margin合并问题

有设定浮动和绝对定位的元素不会发生外边距折叠。

什么情况下会发生元素折叠？

• 相邻的兄弟元素

  相邻的同级元素之间的外边距会被折叠（除非后面的元素需要清除之前的浮动）。

• 没有内容将父元素和后代元素分开

  如果没有设定边框（border）、内边距（padding）、行级（inline）内容，也没有创建区块格式化上下文或间隙来分隔块级元素的上边距（margin-top）与其内一个或多个子代块级元素的上边距（margin-top）；或者没有设定边框、内边距、行级内容、高度（height）或最小高度（min-height）来分隔块级元素的下边距（margin-bottom）与其内部的一个或多个后代后代块元素的下边距（margin-bottom），则会出现这些外边距的折叠，重叠部分最终会溢出到父代元素的外面。

• 空的区块

  如果块级元素没有设定边框、内边距、行级内容、高度（height）、最小高度（min-height）来分隔块级元素的上边距（margin-top）及其下边距（margin-bottom），则会出现其上下外边距的折叠。

如何解决上述的margin合并问题呢？

9.处理内容溢出

CSS元素隐藏

1.visibility属性

visibility属性默认值是show，如果设置为hidden，元素会隐藏，虽然元素看不到了，但是还占有原来的位置

2.display属性

设置display:none，就可以让元素隐藏了，元素会彻底隐藏，不会占位。

CSS默认样式

对于一个元素，我们不设置任何样式，那么浏览器也会自动的为其添加一些样式，这些样式就被成为默认样式。

如果查看默认样式呢？

通过F12打开浏览器工具，找到要查看的元素，找到右上角写着user agent stylesheet就是默认样式。

优先级：元素的默认样式 > 继承的样式。可以通过选中该元素来重置元素的默认样式。

CSS布局技巧(重要)

1.元素间的空白问题

2.行内块的幽灵空白问题

CSS浮动

什么是浮动？

• 浮动让一个元素从正常的文档流中“浮出”，并且可以向左或向右移动，直到碰到容器的边缘或其他浮动元素。
• 其他非浮动元素会围绕着浮动元素排列。

基本语法

1
2
3

.element {
  float: left; /* 或 right, none */
}

可选值

• left: 元素向左浮动。
• right: 元素向右浮动。
• none: 元素不浮动（默认值）。

浮动的例子

假设我们有三个<div>元素，我们将第一个设置为向左浮动，第二个设置为向右浮动，第三个保持不浮动。

1
2
3

<div class="box box1">Box 1</div>
<div class="box box2">Box 2</div>
<div class="box box3">Box 3</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

.box {
  width: 100px;
  height: 100px;
  margin: 10px;
}

.box1 {
  float: left;
  background-color: red;
}

.box2 {
  float: right;
  background-color: blue;
}

.box3 {
  background-color: green;
}

在这个例子中，Box 1将向左浮动，Box 2将向右浮动，而Box 3将根据Box 1和Box 2的位置来排列自身。

清除浮动(处理浮动后的影响)

当元素浮动时，它们会影响后续的非浮动元素，有时需要使用清除（clear）属性来避免这种情况。

1
2
3

.clear {
  clear: both; /* 或 left, right, none */
}

• both: 在元素之前不允许任何浮动元素。
• left: 在元素之前不允许左侧的浮动元素。
• right: 在元素之前不允许右侧的浮动元素。
• none: 不清除任何浮动元素（默认值）。

其他方法：

1. 方案一：给父元素指定高度。

2. 方案二: 给父元素也设置浮动，带来其他影响。

3. 方案三:给父元素设置 overflow:hidden

4. 方案四: 在所有浮动元素的最后面，添加一个块级元素，并给该块级元素设置 clear:both。

5. 方案五: 给浮动元素的父元素，设置伪元素，通过伪元素清除浮动，原理与方案四相同。=-=>推荐使用

   1 2 3 4 5

   .parent::after { content:''; display:block; clear:both }

注意事项

• 浮动可能会导致父容器的高度塌陷问题。可以使用额外的clearfix类或者overflow属性来解决这个问题。
• 浮动元素不能被包含在一个固定高度的容器内，因为浮动元素会使容器自动扩展以容纳它们。
• 浮动只适用于块级元素。对于内联元素，可以先将其转换为块级元素再应用浮动。

浮动的特点

浮动后的影响

• 对兄弟元素的影响：浮动元素后面的兄弟元素，会占据浮动之前的位置，在浮动元素的下面显示；而位于浮动元素前面的兄弟元素无影响
• 对父元素的影响：不能撑起父元素的高度，导致父元素高度塌陷；但父元素的宽度依然控制着浮动元素。

(面试题)使用clear清除浮动的原理？

CSS定位(重要)

1.CSS相对定位

1.如何设置相对定位

在CSS中，可以通过设置position属性为relative来使一个元素成为相对定位元素。相对定位意味着元素相对于其正常位置进行偏移。换句话说，元素的位置相对于它原本应有的位置（即如果该元素没有被定位）进行调整。

1
2
3
4
5
6

/* 示例代码 */
.element {
  position: relative;
  left: 20px; /* 向右移动20像素 */
  top: -10px; /* 向上移动10像素 */
}

• left和top属性用于控制元素在其原始位置的基础上向右或向上移动的距离。
• 可以使用right和bottom属性来指定向左或向下移动的距离。
• 如果同时设置了left和right或者top和bottom，则仅最后一个声明有效。

2.相对定位的参考点

当元素被设置为相对定位时，其定位参考点是基于自身未被定位前的位置。也就是说，相对定位的元素会相对于它自己的原始位置进行移动。这种定位不会影响文档流中的其他元素，即其他元素仍然会像该元素不存在一样进行布局。

例如：

1
2
3
4

<div class="container">
  <div class="element">A</div>
  <div class="element">B</div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

.element {
  position: relative;
  width: 50px;
  height: 50px;
}

.element:first-child {
  background-color: red;
  left: 20px;
}

.element:last-child {
  background-color: blue;
}

在这个例子中，第一个.element会向右移动20像素，但它仍然占据原来的空间，并且不会影响到第二个.element的位置。

3.相对定位的特点

1. 不影响文档流：相对定位元素仍然占据原来的空间，因此不会影响其他元素的位置。
2. 相对于自身移动：相对定位元素是相对于它们自己在文档流中的初始位置进行移动的。
3. 层叠上下文：相对定位元素不会创建新的层叠上下文，这意味着位于它上面的元素可能会覆盖它。
4. 可与其他定位方式结合使用：相对定位可以与绝对定位或固定定位等其他定位类型结合使用，为元素提供更多灵活的布局选项。

相对定位通常用于微调元素的位置，或者作为更复杂布局的一部分，比如当一个父元素需要相对于自身定位一个绝对定位的子元素时。

当然可以。下面是关于CSS绝对定位的学习笔记概要，从如何设置绝对定位、绝对定位的参考点以及绝对定位的特点这三个方面来编写，力求简单易懂。

2.CSS绝对定位

1.如何设置绝对定位

在CSS中，可以通过设置position属性为absolute来使一个元素成为绝对定位元素。绝对定位意味着元素相对于最近的已定位祖先元素（具有非静态定位的父级元素）进行定位。

1
2
3
4
5
6

/* 示例代码 */
.element {
  position: absolute;
  left: 20px; /* 距离左侧20像素 */
  top: 10px; /* 距离顶部10像素 */
}

• left 和 top 属性用于确定元素距离其最近的已定位祖先元素的左侧和顶部的距离。
• 还可以使用 right 和 bottom 属性来指定距离右侧和底部的距离。
• 如果同时设置了 left 和 right 或者 top 和 bottom，则取值较小的那个属性生效。

2.绝对定位的参考点

• 参考它的包含块

什么是包含块呢？

1. 对于没有脱离文档流的元素，包含块就是父元素
2. 对于脱离了文档流的元素：包含块是第一个拥有定位属性的祖先元素（如果所有祖先都没有定位，那包含块就是整个页面）

3.绝对定位的特点

1. 脱离文档流：绝对定位元素不再占据文档流中的空间，即其他元素会像它不存在一样进行布局。
2. 相对于最近的已定位祖先元素定位：绝对定位元素会相对于最近的具有非静态定位（position: relative, position: absolute, position: fixed 或 position: sticky）的祖先元素进行定位。
3. 创建新的层叠上下文：绝对定位元素会创建一个新的层叠上下文，这意味着它后面的元素不会覆盖它。
4. 可与其他定位方式结合使用：绝对定位可以与相对定位的父元素结合使用，以实现更复杂的布局效果。
5. 无论什么元素（行内、行内块、块级）只要设置了绝对定位后，就会变为定位元素

4.！！！何为定位元素？

默认宽高都被内容撑开，且能自由设置宽高。

3.CSS固定定位

1.如何设置固定定位

在CSS中，可以通过设置position属性为fixed来使一个元素成为固定定位元素。固定定位意味着元素相对于浏览器窗口进行定位，而不是相对于文档或其他元素。

1
2
3
4
5
6

/* 示例代码 */
.element {
  position: fixed;
  left: 20px; /* 距离左侧20像素 */
  top: 10px; /* 距离顶部10像素 */
}

• left 和 top 属性用于确定元素距离浏览器窗口左侧和顶部的距离。
• 还可以使用 right 和 bottom 属性来指定距离右侧和底部的距离。
• 如果同时设置了 left 和 right 或者 top 和 bottom，则取值较小的那个属性生效。

2.固定定位的参考点

当元素被设置为固定定位时，其定位参考点始终是浏览器窗口。这意味着无论用户如何滚动页面，固定定位的元素都会保持在相同的位置。

例如：

1
2
3
4

<div class="content">
  <p>Some content here...</p>
</div>
<div class="fixed-element">Fixed Element</div>

1
2
3
4
5

.fixed-element {
  position: fixed;
  left: 20px;
  top: 10px;
}

在这个例子中，.fixed-element 不论页面如何滚动，都会保持在浏览器窗口左上角20像素、顶部10像素的位置不变。

3.固定定位的特点

1. 脱离文档流：固定定位元素不再占据文档流中的空间，即其他元素会像它不存在一样进行布局。
2. 相对于浏览器窗口定位：固定定位元素的位置始终相对于浏览器窗口，不会随着页面滚动而改变位置。
3. 创建新的层叠上下文：固定定位元素会创建一个新的层叠上下文，这意味着它后面的元素不会覆盖它。
4. 屏幕边缘定位：固定定位元素总是定位在浏览器窗口的边缘，即使浏览器窗口大小发生变化，位置也不会改变。

固定定位通常用于创建导航栏、侧边栏或者其他始终可见的界面元素，这些元素需要在整个页面滚动时保持不变的位置。

4.CSS黏性定位

1.如何设置黏性定位

在CSS中，可以通过设置position属性为sticky来使一个元素成为黏性定位元素。黏性定位允许元素在滚动到特定位置时变成固定定位。

1
2
3
4
5

/* 示例代码 */
.element {
  position: sticky;
  top: 0; /* 当元素滚动到视口顶部时，距离顶部0像素 */
}

• top 属性用于确定元素变为固定定位时距离顶部的距离。
• 还可以使用 left, right, 和 bottom 属性来指定其他方向的距离。
• 如果同时设置了多个方向的偏移量，那么它们分别应用于对应的边缘。

2.黏性定位的参考点

黏性定位的参考点：是离该元素最近的具有滚动行为的祖先元素。

1. 初始行为：默认情况下，黏性定位元素的行为类似于相对定位元素，占据文档流中的空间并相对于其正常位置进行偏移。
2. 转换为固定定位：当页面滚动使得黏性定位元素达到视口边界时（例如，滚动到视口顶部），它会变成固定定位元素，并保持在视口内特定的位置。
3. 恢复相对定位：当页面再次滚动时，如果黏性定位元素离开了视口边界，它将恢复为相对定位，并回到其原始位置。
4. 边界检测：黏性定位元素的边界检测依赖于视口的位置，因此当页面滚动时，它会根据视口的位置自动调整其定位状态。

3.黏性定位的特点

1. 动态行为：黏性定位元素根据页面滚动自动切换定位模式，从相对定位变为固定定位，再从固定定位变回相对定位。
2. 不影响文档流：黏性定位元素在文档流中占据空间，即使在变为固定定位时，其他元素也不会因此移动。
3. 视口相关：黏性定位元素的位置与视口边界有关，而不是与文档流中的其他元素相关。
4. 可定制的触发条件：通过设置top、right、bottom和left属性，可以控制黏性定位何时启动。

示例

假设我们有一个黏性定位的头部导航栏：

1
2
3
4
5
6
7
8

<header class="sticky-header">
  <nav>
    <!-- 导航链接 -->
  </nav>
</header>
<main>
  <!-- 主要内容 -->
</main>

1
2
3
4
5
6

.sticky-header {
  position: sticky;
  top: 0; /* 当滚动到距离顶部0像素时，元素变为固定定位 */
  background-color: #f9f9f9;
  padding: 20px;
}

5.CSS定位的层级

1. 定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的。
2. 如果位置发生重叠，默认情况是:后面的元素，会显示在前面元素之上。
3. 可以通过 css 属性 z-index 调整元素的显示层级。
4. z-index 的属性值是数字，没有单位，值越大显示层级越高。
5. 只有定位的元素设置 z-index 才有效。
6. 如果 z-index 值大的元素，依然没有覆盖掉 z-index 值小的元素，那么请检査其包含块的层级。

6.定位的特殊应用

！！！以下所说的特殊应用，只针对绝对定位和固定定位，不包括相对定位的元素。

1.让定位元素的宽充满包含块

1. 宽想与包含块一致，可以给定位元素同时设定left:0和right:0
2. 高想与包含块一致，可以给定位元素同时设置top:0和bottom:0

2.让定位元素在包含块中居中

• 方案一：

1
2
3
4
5
6
7
8
9
10

/* 在CSS代码中设置以下属性,切记要是定位元素 */
.test {
    /* 必须要有定位 */
    position:fixed | absolute
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:auto;
}

• 方案二：执行方案二的定位元素必须设置宽高

1
2
3
4
5
6
7
8
9