HTML-CSS-常见标签和样式

Created2025-05-17|Updated2025-05-22

|Word Count:274|Reading Time:1mins|Post Views:

25/5/17

![526c1749361129a3a58ccfd9f47a2c4d](C:\Users\67546\Documents\Tencent Files\675466480\nt_qq\nt_data\Pic\2025-05\Ori\526c1749361129a3a58ccfd9f47a2c4d.jpg)

![3fa1ae4321620dfa861b6b97670f0f74](C:\Users\67546\Documents\Tencent Files\675466480\nt_qq\nt_data\Pic\2025-05\Ori\3fa1ae4321620dfa861b6b97670f0f74.jpg)

25/5/18

![bac1a385d20a296b528555d9c7fbc395](C:\Users\67546\Documents\Tencent Files\675466480\nt_qq\nt_data\Pic\2025-05\Ori\bac1a385d20a296b528555d9c7fbc395.jpeg)

![1f26f9a047e344bba2ea3b2e098d53b7_720](C:\Users\67546\Documents\Tencent Files\675466480\nt_qq\nt_data\Pic\2025-05\Thumb\1f26f9a047e344bba2ea3b2e098d53b7_720.jpg)

![b05f33d1a566f93f6453d292c72c1658_720](C:\Users\67546\Documents\Tencent Files\675466480\nt_qq\nt_data\Pic\2025-05\Thumb\b05f33d1a566f93f6453d292c72c1658_720.jpg)

![5edd10290764edbb75b2897f812b36c9_720](C:\Users\67546\Documents\Tencent Files\675466480\nt_qq\nt_data\Pic\2025-05\Thumb\5edd10290764edbb75b2897f812b36c9_720.jpg)

25/5/20

![4722c5e8151cddd2511a14c21ea7dfe0_720](C:\Users\67546\Documents\Tencent Files\675466480\nt_qq\nt_data\Pic\2025-05\Thumb\4722c5e8151cddd2511a14c21ea7dfe0_720.jpg)

justify-content: space-between是每个元素“左右”分配相同的外部间距（margin-like 间隔）。
比如有3个元素的话，中间元素之间的间距会是两倍的边缘间距。

![8d6e24aff6d72557a5d0d8964433d86b](C:\Users\67546\Documents\Tencent Files\675466480\nt_qq\nt_data\Pic\2025-05\Ori\8d6e24aff6d72557a5d0d8964433d86b.jpg)

![f4a997f0b5b02549db2308a6c5e595f9](C:\Users\67546\Documents\Tencent Files\675466480\nt_qq\nt_data\Pic\2025-05\Ori\f4a997f0b5b02549db2308a6c5e595f9.jpg)

25/5/22

![94fa324f3461642abebb12185bfa31a2_720](C:\Users\67546\Documents\Tencent Files\675466480\nt_qq\nt_data\Pic\2025-05\Thumb\94fa324f3461642abebb12185bfa31a2_720.jpg)

25/5/22 HTML-CSS-课程总结

![23b2c2ae5ad86d582a2c4be115ec26f8_720](C:\Users\67546\Documents\Tencent Files\675466480\nt_qq\nt_data\Pic\2025-05\Thumb\23b2c2ae5ad86d582a2c4be115ec26f8_720.jpg)

![23b2c2ae5ad86d582a2c4be115ec26f8_720](C:\Users\67546\Documents\Tencent Files\675466480\nt_qq\nt_data\Pic\2025-05\Thumb\23b2c2ae5ad86d582a2c4be115ec26f8_720.jpg)

Author: GoshenC

Link: http://example.com/2025/05/17/HTML-CSS-%E5%B8%B8%E8%A7%81%E6%A0%87%E7%AD%BE%E5%92%8C%E6%A0%B7%E5%BC%8F/

Copyright Notice: All articles on this blog are licensed under CC BY-NC-SA 4.0 unless otherwise stated.

Related Articles

HTML + CSS 选择器用法详解

🌟 一、基础选择器（Basic Selectors）1. 元素选择器选择某种标签的所有元素。 123456789p { color: blue;}<p>我是段落文字</p><div>我不会变蓝</div> 2. 类选择器（Class Selector）使用 . 开头，选择 class 属性的元素。 1234567.box { border: 1px solid black;}<div class="box">我是一个盒子</div> 3. ID 选择器使用 # 开头，选中具有特定 id 的元素（一个页面中只能有一个相同 ID）。 123456789#main { background-color: yellow;}<div id="main">我是主区域</div> 🌟 二、组合选择器（Group, Descendant, Child, etc）4....

📘 一站式详解：什么是 JSON？一、🌟 JSON 的定义JSON（JavaScript Object Notation）是一种基于文本的、用于结构化数据表示的格式。它来源于 JavaScript，但现在是独立于语言的通用格式。用来表示数据结构：如对象、数组、键值对。最常用于：前后端数据交互、配置文件、数据存储、API 响应等。 ✅ 官方定义（来自 json.org）： “JSON is a lightweight data-interchange format. It is easy for humans to read and write. It is easy for machines to parse and generate.” 二、📦 JSON 的结构和语法JSON 支持两种基本结构： 1. 对象（Object）用 {} 包裹内部是键值对键必须是字符串，值可以是任意 JSON 支持的数据类型 12345{ "name": "Tom", ...

DOM用法指南

完整版：DOM 操作详解技术文档一、DOM 概述 DOM（Document Object Model）：浏览器将 HTML/XML 文档解析后，生成的以节点（Node）为单位的树形结构。目标：提供一组标准 API，通过脚本访问、修改、插入或删除文档内容和结构，实现页面动态互动。 DOM 树示例： 123456789Document├─ html ├─ head └─ body ├─ header ├─ main │ ├─ section │ └─ article └─ footer 二、DOM 节点类型节点类型常量描述元素节点 Node.ELEMENT_NODE (1) <div>, <p> 等标签文本节点 Node.TEXT_NODE (3) 标签或属性中的文本内容属性节点 Node.ATTRIBUTE_NODE (2) 元素的属性，如 class="item" 注释节点 Node.COMMENT_NODE...

25/5/22![7cbd3fa2817909ec0840651b9e786743_720](C:\Users\67546\Documents\Tencent Files\675466480\nt_qq\nt_data\Pic\2025-05\Thumb\7cbd3fa2817909ec0840651b9e786743_720.jpg) ![53fcee7cedd8c1d25629e32043f74091_720](C:\Users\67546\Documents\Tencent Files\675466480\nt_qq\nt_data\Pic\2025-05\Thumb\53fcee7cedd8c1d25629e32043f74091_720.jpg) ![721ec4e948770e70f1210515a02d81d3_720](C:\Users\67546\Documents\Tencent...

简介Vue.js 是一款渐进式的前端框架，核心库专注于视图层，易于上手且与其他库或已有项目轻松集成。Vue 3 在性能、体积和 TypeScript 支持上都有重大改进，引入了 Composition API 等新特性。环境搭建与项目创建通过 CDN 引入适合快速试用与小型页面。 12345678html复制编辑<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script><div id="app">{{ message }}</div><script> const App = { data() { return { message: 'Hello Vue!' } } }; ...

Loading Database