CSS学习

魔力大帅 發表於 2025-8-24 15:57:00

<h1 class="md-end-block md-heading">Web-CSS-Study</h1>
 
<div class="md-hr md-end-block"><hr></div>
 
 作者：jason-wrj 
 分类：服务器/网络服务器/CSS 
 标签：Server, Web Server, CSS 
 更多：www.dioit.com——迪欧IT——dio智能科技 
 更多：www.dioit.com——dioIT——嵌入式电子智能技术 
 
<div class="md-hr md-end-block"><hr></div>
 
<h2 class="md-end-block md-heading">1 概述</h2>
<h3 class="md-end-block md-heading">1.1 CSS 的基本概念</h3>
 CSS（Cascading Style Sheets，层叠样式表）是一种用于描述HTML或XML（包括 SVG、XHTML 等）网页结构化文档（外观和格式视觉表现）呈现方式的样式表语言，由W3C制定标准。
 CSS 通过定义网页元素的字体、间距、颜色、布局、动画等外观视觉属性，控制网页内容外观和布局，实现网页美化。
 CSS 通过将样式与内容分离，使得网页设计更加灵活、高效，并支持动态变化的布局和交互效果。
 CSS 是现代网页设计（前端开发）的核心技能之一，通过实践和参考优秀案例可以快速掌握。
<h3 class="md-end-block md-heading">1.2 CSS 的发展历程</h3>
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
1994年：由哈坤·利（Håkon Wium Lie）首次提出，旨在解决HTML样式与内容混杂导致的代码臃肿问题。
</li>
<li class="md-list-item">
1996年：CSS1成为W3C推荐标准，支持基础样式控制。
</li>
<li class="md-list-item">
1998年：CSS2增加浮动、定位等复杂布局功能。
</li>
<li class="md-list-item">
2010年：CSS3引入圆角、阴影、动画等现代特性，与HTML5共同成为网页开发主流。
</li>
</ul>
<h3 class="md-end-block md-heading">1.3 CSS 的版本演进</h3>
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
CSS3：当前主流版本，模块化引入弹性布局、动画、媒体查询等功能。
</li>
<li class="md-list-item">
向后兼容：新特性在不支持的老浏览器中可平稳降级。
</li>
</ul>
<h3 class="md-end-block md-heading">1.4 CSS 的应用场景</h3>
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
网页设计
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
网页视觉美化（字体、颜色、背景）。
</li>
<li class="md-list-item">
构建响应式网站，适配不同设备（手机、平板、桌面）。
</li>
<li class="md-list-item">
动态交互效果（悬停、点击反馈）。
</li>
<li class="md-list-item">
打印样式优化（<code>@media print</code>）。
</li>
<li class="md-list-item">
组件化开发（配合CSS-in-JS或CSS Modules）。
</li>
</ul>
</li>
<li class="md-list-item">
实现复杂的 UI 组件
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
如导航栏、卡片布局、模态框。
</li>
</ul>
</li>
<li class="md-list-item">
主题与样式库
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
开发可复用的 UI 框架（如 Bootstrap、Tailwind CSS）。
</li>
<li class="md-list-item">
动态切换主题（如暗色模式）。
</li>
</ul>
</li>
<li class="md-list-item">
性能优化
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
使用 CSS 压缩工具减少文件体积。
</li>
<li class="md-list-item">
利用缓存策略提升加载速度。
</li>
</ul>
</li>
<li class="md-list-item">
国际化与无障碍
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
通过逻辑属性支持多语言排版（如阿拉伯语的 RTL 布局）。
</li>
<li class="md-list-item">
确保样式兼容屏幕阅读器。
</li>
</ul>
</li>
</ul>
<h3 class="md-end-block md-heading">1.5 CSS 的核心特点</h3>
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
分离性
内容与表现分离，HTML 专注结构，CSS 控制样式，便于维护和协作。CSS 将样式与 HTML 结构分离，提升代码可维护性。修改样式无需调整 HTML 结构，只需更新 CSS 文件。
</li>
<li class="md-list-item">
层叠性
多个样式规则可叠加作用于同一元素，按优先级（如<code>!important</code>> 内联样式 > ID 选择器 > 类选择器 > 标签选择器）确定最终效果。
</li>
<li class="md-list-item">
继承性
父元素的样式（如字体、颜色）可自动传递到子元素，减少重复代码。
</li>
<li class="md-list-item">
响应式设计
通过媒体查询（Media Queries）适配不同设备屏幕（如手机、电脑），实现自适应布局。
</li>
<li class="md-list-item">
精准控制
像素级调整元素位置、大小、边框等。
</li>
<li class="md-list-item">
样式复用
一套样式可应用于多个页面，减少重复代码。
</li>
<li class="md-list-item">
性能优化
支持外部样式表缓存，减少重复代码加载。 
</li>
<li class="md-list-item">
丰富效果
支持渐变、圆角、阴影、动画等现代视觉特性（CSS3）。
</li>
<li class="md-list-item">
可扩展性
通过预处理器（如 Sass/Less）或后处理器（如PostCSS）增强功能。
</li>
<li class="md-list-item">
跨浏览器一致性
通过标准化属性（如 <code>display: flex</code>）减少样式差异。
</li>
</ul>
<h3 class="md-end-block md-heading">1.6 CSS 的功能作用</h3>
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
控制网页外观
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
颜色表示：支持十六进制（如 <code>#FFFF00</code> 表示黄色）、RGB 等格式。
</li>
<li class="md-list-item">
文本样式：字体、颜色、对齐方式。
</li>
<li class="md-list-item">
排版控制 ：可以精确地设置字体、字号、行距、字距等排版属性，实现丰富的文本排版效果，如不同的字体样式、大小写转换、文本阴影等。
</li>
<li class="md-list-item">
外观美化 ：可设置元素的颜色、背景图像、边框样式、圆角、阴影等外观属性，使网页更具视觉吸引力。
</li>
</ul>
</li>
<li class="md-list-item">
实现复杂的布局（（Flexbox）弹性盒子、（Grid）网格布局、响应式设计）。
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
布局设计 ：通过定位属性（如 <code>position</code>）、盒模型（<code>margin</code>、<code>padding</code>、<code>border</code>、<code>width</code>、<code>height</code> 等）以及弹性布局（<code>flex</code> 布局）、网格布局（<code>grid</code> 布局）等技术，实现复杂的网页布局，如响应式布局、多列布局等。
</li>
</ul>
</li>
<li class="md-list-item">
管理元素的动态状态（悬停效果、动画）。
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
交互效果 ：利用伪类和 CSS 动画（<code>@keyframes</code>）、过渡（<code>transition</code>）等特性，为网页添加交互效果，如按钮悬停效果、点击效果、元素的动画过渡、关键帧动画等。
</li>
</ul>
</li>
<li class="md-list-item">
内容与样式的分离
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
通过 CSS 将网页的结构（HTML）与表现（CSS 样式）解耦，实现内容（HTML）与样式（CSS）分离，便于维护和更新，提升代码可维护性和复用性。
</li>
<li class="md-list-item">
允许通过一个样式表文件统一管理多个页面的样式。
</li>
</ul>
</li>
</ul>
<ol class="ol-list" start="5">
<li class="md-list-item">
提升开发效率
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
避免重复的 HTML 标签（如 <code></code> 或表格布局），减少代码冗余。
</li>
<li class="md-list-item">
支持继承和层叠规则，简化样式覆盖逻辑。
</li>
</ul>
</li>
</ol>
<h3 class="md-end-block md-heading">1.7 CSS 的工作原理</h3>
<ol class="ol-list" start="">
<li class="md-list-item">
解析 HTML，生成 DOM 树。
</li>
<li class="md-list-item">
解析 CSS ，生成 CSSOM 树。
</li>
<li class="md-list-item">
合并 DOM + CSSOM，构建渲染树。
</li>
<li class="md-list-item">
布局与绘制，计算元素位置并渲染页面。
</li>
</ol>
<h3 class="md-end-block md-heading">1.8 CSS 的优势与局限</h3>
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
优势
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
性能优化：外部样式表可被浏览器缓存，减少重复加载。
</li>
<li class="md-list-item">
SEO友好：结构清晰的HTML更易被搜索引擎抓取。
</li>
<li class="md-list-item">
维护便捷：全局样式可通过单一CSS文件统一调整。
</li>
</ul>
</li>
<li class="md-list-item">
局限
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
浏览器兼容性问题（如旧版IE不支持部分CSS3属性）。
</li>
<li class="md-list-item">
学习曲线较陡，需掌握选择器优先级、盒模型等复杂概念。
</li>
<li class="md-list-item">
CSS 本身主要用于样式和布局，对于页面的结构和内容逻辑的控制能力较弱，通常需要与 HTML 和 JavaScript 配合使用来实现更复杂的网页功能。
</li>
<li class="md-list-item">
一些复杂的样式效果可能需要使用较多的代码和技巧来实现，并且在不同浏览器中可能存在兼容性问题，需要进行额外的测试和调整。
</li>
</ul>
</li>
</ul>
 
<div class="md-hr md-end-block"><hr></div>
 
<h2 class="md-end-block md-heading">2 CSS 引入方式与优先级</h2>
<h3 class="md-end-block md-heading">2.1 外部样式表（最常用）</h3>
 外部样式表（External style sheet），编写在HTML文档中的<code><head> </head></code>头部元素之间，通过<code><link></code>元素标签引入独立 CSS 文件，方便实现多页面复用：
<div class="cnblogs_code">
<pre><head>
<link rel="stylesheet" href="style.css">
</head></pre>
</div>
　　
<h3 class="md-end-block md-heading">2.2 内部样式表</h3>
 内部样式表（Internal style sheet），通常编写在HTML文档中的<code><head> </head></code>头部元素之间的<code><style> </style></code>元素内，通过在<code><style></code>元素内，（且需要写在 link 外部样式表的后面，否则会被外部样式表优先覆盖内部样式表），直接定义 CSS 样式，仅当前页面有效：
<div class="cnblogs_code">
<pre><style>
body { background: #f0f0f0; }
</style></pre>
</div>
 
<h3 class="md-end-block md-heading">2.3 内联样式表</h3>
 内联样式表（Inline style），直接写在 HTML 文档元素标签的<code>style</code>属性中，优先级最高但不利于维护：
<div class="cnblogs_code">
<pre><p style="color: purple;">示例文本</p></pre>
</div>
 
<h3 class="md-end-block md-heading">2.4 样式表的优先级</h3>
 内联样式 > 内部样式 > 外部样式 > 浏览器默认样式。
 
<div class="md-hr md-end-block"><hr></div>
 
<h2 class="md-end-block md-heading">3 CSS 的基础语法</h2>
<h3 class="md-end-block md-heading">3.1 CSS 样式规则</h3>
 由一系列规则集组成，规则集（ruleset）常简称为规则（rule）。每条规则集（ruleset）是由选择器（selector）和声明块构成。如下所示：
<div class="cnblogs_code">
<pre>selector_1, /* 选择器1 */
selector_2, /* 选择器2 */
selector_n { /* 选择器n */
property_1: value_1; /* 声明块1 */ /* 属性名_1: 属性值_1 */
property_2: value_2; /* 声明块2 */ /* 属性名_2: 属性值_2 */
property_n: value_n; /* 声明块n */ /* 属性名_n: 属性值_n */
}</pre>
</div>
 
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
选择器
选择器（Selectors）用于指定要应用样式的 HTML 或 XML 元素（如<code>#id</code>、<code>.class</code>、<code>h1</code>），例如： <code>#id</code> 用于选择具有特定 ID 的元素，<code>.class</code> 用于选择具有特定类的元素，<code>p</code> 用于选择所有段落元素等。
</li>
<li class="md-list-item">
声明块
声明块（Declaration Block）由一对大括号 <code>{}</code> 包围，其中包含一条或多条（<code>属性: 值;</code>）声明（Declaration）。每条声明都是由属性和值组成，用于指定元素的样式，例如（ <code>color: black;</code>）表示设置元素的文本颜色为黑色。
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
属性（Property）：是一个标识符，用可读的名称来表示其特性。如<code>color</code>、<code>font-size</code>、<code>margin</code>等样式属性（style attribute）。
</li>
<li class="md-list-item">
值（Value）：属性的具体设置，每个属性都包含一个有效值的集合，它有正式的语法和语义定义。如<code>red</code>、<code>16px</code>、<code>auto</code>等。（属性值与单位不能有空格，16 px是错误的，正确的写法是16px）。
</li>
</ul>
</li>
<li class="md-list-item">
注释
使用 <code>/* 注释内容 */</code>，添加 CSS 层叠样式表中的注释内容。
</li>
</ul>
<h3 class="md-end-block md-heading">3.2 CSS 样式选择器</h3>
 选择器（Selectors）至少要有一个，通过ID、类名、元素标签名等精准定位HTML元素，并指定要应用的样式（如 <code>#id</code>、<code>.class</code>、<code>p</code>），或通过属性、伪类等实现动态样式。如果包含多个选择器的集合分组，则用逗号<code>,</code>分隔。
<div class="cnblogs_code">
<pre>#header { background-color: gray; } /* ID选择器 */
.text-red { color: red; } /* 类选择器 */
{ border: 1px solid black; } /* 属性选择器 */
:hover { } /* 伪类（状态） */
::before { } /* 伪元素（生成内容） */
p { color: blue; } /* 元素标签选择器 */
div p { margin: 10px; } /* 关系组合选择器 */ /* 后代选择器 */
div > p { padding: 5px; } /* 关系组合选择器 */ /* 子选择器 */
h1 + p { font-weight: bold; } /* 关系组合选择器 */ /* 相邻兄弟选择器 */</pre>
</div>
 
 常见的选择器类型，有以下几种：
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
ID 选择器
使用唯一的 ID 标识符来选择元素，匹配具有同名 ID 属性值的元素，（ID 标识符不要以数字开头，个别浏览器不起作用）。ID 前需要加上（井号 <code>#</code>），如 <code>#myId</code> 只会选中页面上唯一具有 <code>id="myId"</code> 属性的元素。
例如：
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
<code>#bg1 { background: blue; }</code>，匹配具有 <code>id</code> 属性，且 <code>id</code> 属性值为 <code>bg1</code> 的所有元素。
</li>
</ul>
</li>
<li class="md-list-item">
类选择器
使用类名来选择元素，匹配具有同名 class 属性值的元素，（类名不要以数字开头，个别浏览器不起作用）。类名前需要加上（点号 <code>.</code>），如 <code>.myClass</code> 会选中所有具有 <code>class="myClass"</code> 属性的元素。
例如：
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
<code>.text1 { font-size: 16px; }</code>，匹配具有 <code>class</code> 属性，且 <code>class</code> 属性值为 <code>text1</code> 的所有元素。
</li>
</ul>
</li>
<li class="md-list-item">
属性选择器
根据元素的属性及其值来选择元素，如 <code></code> 会选中所有具有 <code>type="text"</code> 属性的元素。
例如：
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
<code> { background: red; }</code> ，匹配具有 <code>attribute</code> 属性的所有元素。
</li>
<li class="md-list-item">
<code> { background: red; }</code> ，匹配具有 <code>attribute1</code> 属性，且 <code>attribute1</code> 属性值与 <code>value1</code> 等同的所有元素。
</li>
<li class="md-list-item">
<code> { background: red; }</code>，匹配具有 <code>attribute2</code> 属性，且 <code>attribute2</code> 属性值以 <code>value2</code> 开头的所有元素。
</li>
<li class="md-list-item">
<code> { background: red; }</code>，匹配具有 <code>attribute3</code> 属性，且 <code>attribute3</code> 属性值以 <code>value3</code> 结尾的所有元素。
</li>
<li class="md-list-item">
<code> { background: red; }</code>，匹配具有 <code>attribute4</code> 属性，且 <code>attribute4</code> 属性值包含 <code>value4</code> 的所有元素。
</li>
<li class="md-list-item">
<code> { background: red; }</code>，匹配具有 <code>attribute5</code> 属性，且 <code>attribute5</code> 属性值包含一个以空格分隔的值与 <code>value5</code> 等同的所有元素。即 <code>attribute5</code> 属性的值里，必须有 <code>value5</code>这个单词，并且<code>value5</code>要与其它单词之间有空格分隔。
</li>
<li class="md-list-item">
<code> { background: red; }</code>，匹配具有 <code>attribute6</code> 属性，且 <code>attribute6</code> 属性值与 <code>value6</code> 等同或以 <code>value6</code> 开头的所有元素。
</li>
</ul>
</li>
<li class="md-list-item">
伪类选择器
用于选择处于特定状态的元素，如 <code>:hover</code> 用于选择鼠标悬停在元素上时的状态，<code>:active</code> 用于选择鼠标点击元素时的状态等。例如：<code>a:hover { color: green; }</code>。
例如：
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
<code>:first-child</code>，结构性伪类选择器，匹配在一组兄弟元素中的第一个元素。
</li>
<li class="md-list-item">
<code>:last-child</code>，结构性伪类选择器，匹配在一组兄弟元素中的最后一个元素。
</li>
<li class="md-list-item">
<code>:nth-child(n)</code>，结构性伪类选择器，根据元素在父元素内的子元素列表中的索引来匹配选择元素。<code>n</code> 表示元素在子元素列表中的第几个。
</li>
<li class="md-list-item">
<code>:nth-last-child(n)</code>，结构性伪类选择器，匹配子元素列表中的倒数第 n 个子元素。
</li>
<li class="md-list-item">
<code>:nth-child(odd)</code>，结构性伪类选择器，根据元素在父元素内的子元素列表中的索引来匹配选择元素。<code>odd</code> 表示元素在兄弟元素列表中的位置是奇数：1、3、5……。
</li>
<li class="md-list-item">
<code>:nth-child(even)</code>，结构性伪类选择器，根据元素在父元素内的子元素列表中的索引来匹配选择元素。<code>even</code> 表示元素在兄弟元素列表中的位置是偶数：2、4、6……。
</li>
<li class="md-list-item">
<code>:only-child</code>，结构性伪类选择器，匹配仅有一个子元素的元素。
</li>
<li class="md-list-item">
<code>:first-of-type</code>，结构性伪类选择器，匹配在一组兄弟元素中其类型的第一个元素。
</li>
<li class="md-list-item">
<code>:last-of-type</code>，结构性伪类选择器，匹配在（它父元素的）子元素列表中，最后一个给定类型的元素。
</li>
<li class="md-list-item">
<code>:only-of-type</code>，结构性伪类选择器，匹配任意一个元素，这个元素没有其他相同类型的兄弟元素。
</li>
<li class="md-list-item">
<code>:nth-of-type(n)</code>，结构性伪类选择器，匹配相同类型元素的第 n 个元素。
</li>
<li class="md-list-item">
<code>:nth-last-of-type(n)</code>，结构性伪类选择器，匹配相同类型元素的倒数第 n 个元素。
</li>
<li class="md-list-item">
<code>:checked</code>，UI元素状态伪类选择器，匹配选中状态的元素，选择任何处于选中状态的radio(<code><input type="radio"></code>)，checkbox (<code><input type="checkbox"></code>) 或 select 元素中的 (<code>"option"</code>) 元素。即匹配任意被勾选/选中的 radio(单选按钮),checkbox(复选框),或者 option(select 中的一项) 。
</li>
<li class="md-list-item">
<code>:enabled</code>，UI元素状态伪类选择器，匹配任何已启用的元素。如果元素可以被激活（例如被选择、单击、输入文本等），或者能够获得焦点，那么它就是启用的。
</li>
<li class="md-list-item">
<code>:disabled</code>，UI元素状态伪类选择器，匹配任何被禁用的元素。如果一个元素不能被激活（如选择、点击或接受文本输入）或获取焦点，则该元素处于被禁用状态。
</li>
<li class="md-list-item">
<code>:in-range</code>，UI元素状态伪类选择器，匹配指定范围以内值的元素。
</li>
<li class="md-list-item">
<code>:out-of-range</code>，UI元素状态伪类选择器，匹配指定范围以外值的元素。
</li>
<li class="md-list-item">
<code>:optional</code>，UI元素状态伪类选择器，匹配没有 "required" 属性的元素。
</li>
<li class="md-list-item">
<code>:required</code>，UI元素状态伪类选择器，匹配有 "required" 属性的元素。
</li>
<li class="md-list-item">
<code>:invalid</code>，UI元素状态伪类选择器，匹配无效的元素。
</li>
<li class="md-list-item">
<code>:read-only</code>，UI元素状态伪类选择器，匹配只读状态的元素，表示元素不可被用户编辑的状态（如锁定的文本输入框）。
</li>
<li class="md-list-item">
<code>:read-write</code>，UI元素状态伪类选择器，匹配可读可写状态的元素。
</li>
<li class="md-list-item">
<code>:focus</code>，UI元素状态伪类选择器，匹配获得焦点的元素（如表单输入）。当用户点击或轻触一个元素或使用键盘的 <code>Tab</code> 键选择它时，它会被触发。
</li>
<li class="md-list-item">
<code>:link</code>，UI元素状态伪类选择器，所有未访问链接。
</li>
<li class="md-list-item">
<code>:visited</code>，UI元素状态伪类选择器，匹配在用户访问链接后生效。但由于出于隐私保护的原因，使用该选择器可以修改的样式非常有限。
</li>
<li class="md-list-item">
<code>:hover</code>，UI元素状态伪类选择器，匹配在用户使用指针设备与元素进行交互时匹配，但不一定激活它。通常在用户将光标（鼠标指针）悬停在元素上时触发。
</li>
<li class="md-list-item">
<code>:active</code>，UI元素状态伪类选择器，匹配被用户激活的元素。它让页面能在浏览器监测到激活时给出反馈。当用鼠标交互时，它代表的是用户按下按键和松开按键之间的时间。
</li>
<li class="md-list-item">
<code>:empty</code>，UI元素状态伪类选择器，匹配没有子元素的元素。
</li>
</ul>
</li>
<li class="md-list-item">
否定反选伪类选择器（negation pseudo-class）
用来匹配不符合一组选择器的元素，它的作用是防止特定的元素被选中。
例如：
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
<code>:not(selectors)</code>，匹配与<code>selectors</code>选择器相反的所有元素。
</li>
</ul>
</li>
<li class="md-list-item">
元素选择器
直接使用 HTML 元素的名称作为选择器，如 <code>p</code> 会选中页面上所有的 <code></code> 元素。
例如：
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
<code>p { color: blue; }</code>，匹配所有<code>p</code>元素。
</li>
</ul>
</li>
<li class="md-list-item">
伪元素选择器
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
<code>::first-letter</code>，用于将样式应用于区块容器第一行的第一个字母，但仅当其前面没有其他内容（例如图像或行内表格）时才有效。
</li>
<li class="md-list-item">
<code>::first-line</code>，只能在块容器中，匹配在区块容器的第一行应用样式。
</li>
<li class="md-list-item">
<code>::before</code>，会创建一个伪元素，作为所选中元素的第一个子元素。通常用于为具有 <code>content</code> 属性的元素添加修饰性的内容。此元素默认情况下是行级的。
</li>
<li class="md-list-item">
<code>::after</code>，会创建一个伪元素，作为所选中元素的最后一个子元素。通常用于为具有 <code>content</code> 属性的元素添加修饰性的内容。此元素默认情况下是行向布局的。
</li>
</ul>
</li>
<li class="md-list-item">
关系组合选择器（combinator）
包含祖先后代选择器（<code>A B</code>）、第一级父子元素选择器（<code>A > B</code>）、相邻兄弟选择器（<code>A + B</code>）、后续兄弟选择器（<code>A ~ B</code>）等。
例如：
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
<code>div p { color: blue; }</code>，祖先后代选择器，匹配所有 <code>div</code> 元素内的所有 <code>p</code> 元素。
</li>
<li class="md-list-item">
<code>.class1>p { color: blue; }</code>，第一级父子元素选择器，匹配具有 <code>class</code> 类属性，且类属性的值为 <code>.class1</code> 的所有元素下的第一级 <code>p</code> 子元素。
</li>
<li class="md-list-item">
<code>h1+p { color: blue; }</code>，相邻兄弟选择器，匹配所有 <code>h1</code> 元素后面紧接相邻着的第一个 <code>p</code> 元素。
</li>
<li class="md-list-item">
<code>h2~p { color: blue; }</code>，后续兄弟选择器，匹配所有 <code>h2</code> 元素后面所有的 <code>p</code> 元素。
</li>
</ul>
</li>
<li class="md-list-item">
通配选择器（universal selector）
通配符选择器（<code>*</code>），用于匹配当前 HTML 文档中所有的元素。
例如：
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
<code>* { color: red; }</code>，匹配当前 HTML 文档中所有的元素，并设置颜色为红色。
</li>
</ul>
</li>
<li class="md-list-item">
集合分组选择器
上述所有选择器均可集合成同一分组选择器，通过（逗号 <code>,</code>）分隔不同的选择器。
例如：
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
<code>div p, .class1>p, h1+p, h2~p { color: red; }</code>，集合匹配所有 <code>div</code> 元素内的所有 <code>p</code> 元素，集合匹配具有 <code>class</code> 类属性，且类属性的值为 <code>.class1</code> 的所有元素下的第一级 <code>p</code> 子元素，集合匹配所有 <code>h1</code> 元素后面紧接相邻着的第一个 <code>p</code> 元素，集合匹配所有 <code>h2</code> 元素后面所有的 <code>p</code> 元素。
</li>
</ul>
</li>
</ul>
<h3 class="md-end-block md-heading">3.3 CSS 样式声明块</h3>
 包含一个或多个声明，用花括号 <code>{ }</code> 包裹。每个声明由属性和值组成，不同声明用分号<code>;</code>分隔。
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
样式属性与属性值
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
样式属性（如<code>color</code>、<code>margin</code>），用于定义样式特性。如 <code>background-color</code> 用于设置元素的背景颜色，<code>font-size</code> 用于设置字体大小等。
</li>
<li class="md-list-item">
属性值（如<code>red</code>、<code>20px</code>），为样式属性指定具体效果的值。如 <code>background-color: #ff0000;</code> 表示将背景颜色设置为红色，<code>font-size: 16px;</code> 表示将字体大小设置为 16 像素。
</li>
</ul>
</li>
<li class="md-list-item">
声明缩写优化
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
<code>margin: 10px 20px;</code>（上下10px，左右20px）。
</li>
</ul>
</li>
</ul>
<h3 class="md-end-block md-heading">3.4 CSS 的 at 规则</h3>
 以 @（）开始，随后是标识符，一直到以分号或右大括号结束。
 每个 at 规则由其标识符定义，可能有它自己的语法。
 at 规则涵盖了 meta 信息（比如 @charset @import）、条件信息（比如 @media @document）、描述信息（比如 @font-face）。
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
<code>@charset</code>——定义样式表使用的字符集。
</li>
<li class="md-list-item">
<code>@import</code>——告诉 CSS 引擎引入一个外部样式表。
</li>
<li class="md-list-item">
<code>@namespace</code>——告诉 CSS 引擎必须考虑 XML 命名空间。
</li>
<li class="md-list-item">
<code>@layer</code> ——声明了一个层叠层，同一层内的规则将级联在一起，这给予了开发者对层叠机制的更多控制。
</li>
</ul>
<h3 class="md-end-block md-heading">3.5 CSS 的语法示例</h3>
<div class="cnblogs_code">
<pre>body {
background: #f0f0f0; /* 浅灰色背景 */
font-family: "Microsoft YaHei"; /* 字体 */
}

h1 {
color: #0A0000; /* 深红色标题（RGB 10,0,0） */
}

/* 选择所有 标签，声明设置字体颜色和背景 */
p {
color: blue;
background-color: #f0f0f0;
}

/* 选择 class 为 "highlight" 的元素,声明 */
.highlight {
font-weight: bold;
border: 1px solid red;
}

/* 选择 id 为 "header" 的元素 */
#header {
text-align: center;
padding: 20px;
}</pre>
</div>
 
 
<div class="md-hr md-end-block"><hr></div>
 
<h2 class="md-end-block md-heading">4 核心组成</h2>
<h3 class="md-end-block md-heading">4.1 盒模型（Box Model）</h3>
 定义元素的空间占用规则，每个元素在页面中都被视为一个矩形盒子，由内容区（content）、内边距（padding）、边框 （border）和 外边距（margin）组成），是布局的基础。
 从内部到外围，分别为：
<ol class="ol-list" start="">
<li class="md-list-item">
<code>content</code>（内容）：盒子的内容，显示文本和图像。
</li>
<li class="md-list-item">
<code>padding</code>（内边距）：清除内容周围的区域，内边距是透明的。
</li>
<li class="md-list-item">
<code>border</code>（边框）：围绕在内边距和内容外的边框。
</li>
<li class="md-list-item">
<code>margin</code>（外边距）：清除边框外的区域，外边距是透明的。
</li>
</ol>
<div class="cnblogs_code">
<pre>.box {
width: 300px; /* 内容区宽度 */
padding: 20px; /* 内边距 */
border: 1px solid black; /* 边框 */
margin: 10px; /* 外边距 */
box-sizing: border-box; /* 宽度包含padding和border */
}</pre>
</div>
 
 通过设置 <code>box-sizing</code> 属性，可分为两种盒模型。
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
<code>box-sizing: content-box;</code>，设置为标准模式的盒模型，此种模式下，矩形盒子的总宽度和总高度，仅指内容区的宽度和高度。
</li>
<li class="md-list-item">
<code>box-sizing: border-box;</code>，设置为怪异模式的盒模型，此种模式下，矩形盒子的总宽度和总高度，包含了（内容区+内边距+边框）的宽度和高度。
</li>
</ul>
<div class="cnblogs_code">
<pre>/* 默认：width/height 仅指内容区域 */
box-sizing: content-box;

/* width/height 包含内容、内边距和边框 */
box-sizing: border-box;</pre>
</div>
 
<h3 class="md-end-block md-heading">4.2 布局系统</h3>
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
浮动（Float）
传统布局，通过 <code>float</code> 实现元素左右对齐，实现文字环绕效果，常用于早期的多列布局。可分为设置浮动（float）、清除浮动（clear）。
</li>
</ul>
<div class="cnblogs_code">
<pre>.float-left {
float: left; /* 浮动（Float） */
}
.clearfix::after {
content: " ";
display: table;
clear: both; /* 清除浮动 */
}</pre>
</div>
 
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
定位（Positioning）
传统布局，通过 <code>position: static/relative/absolute/fixed/sticky;</code> 控制元素的绝对或相对位置。可分为默认状态（static）、相对定位（relative）、绝对定位（absolute）、固定定位（fixed）、粘性定位（sticky）。
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
默认状态（static）：HTML 元素的默认值，即没有定位。
static 定位的元素不会受到 <code>top、bottom、left、right</code> 这4个属性影响。
</li>
<li class="md-list-item">
相对定位（relative）：<code>relative</code> 定位的元素位置，是相对其正常位置。
移动 relative 定位的元素，元素原本所占的空间（会保留）不会发生改变。
relative 定位元素经常被用来作为绝对定位元素的容器块。
</li>
<li class="md-list-item">
绝对定位（absolute）：<code>absolute</code> 定位的元素位置，是相对于已定位的父元素，如果没有已定位的父元素。那么absolute 定位的元素的位置，则是相对于 <code><html></code>。
absolute 定位的元素和其他元素重叠，与文档流无关，不占据空间。
</li>
<li class="md-list-item">
固定定位（fixed）：<code>fixed</code> 定位的元素位置相对于浏览器窗口是固定位置。
即使窗口是滚动的，fixed 定位的元素也不会移动。
fixed 定位的元素和其他元素重叠，与文档流无关，不占据空间。
</li>
<li class="md-list-item">
粘性定位（sticky）：<code>sticky</code> 定位的元素位置，是是依赖于用户的滚动位置来定位，且是在 relative 与 fixed 定位之间切换。
当页面滚动没有超出目标区域时（跨越特定阈值前），sticky 定位的行为，像 relative 。当页面滚动超出目标区域时（跨越特定阈值后），sticky 定位的表现，像 fixed，会固定在目标位置。
这个特定阈值指的是 <code>top、bottom、left、right</code> 这4个属性之一，指定这4个属性阈值的其中任何1个，才会使粘性定位生效。否则其行为与相对定位相同。
</li>
<li class="md-list-item">
定位的重叠属性：
定位后的元素与文档流无关，定位元素可以覆盖页面上的其它元素。通过 <code>z-index</code> 属性，可以指定元素的堆叠顺序（即指定哪个元素在前面，哪个在后面）。
一个元素可以有正数或负数的 <code>z-index</code> 堆叠顺序，具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。而如果两个定位元素重叠，没有指定 <code>z - index</code> 属性值，那么最后定位在 HTML 代码中的元素将被显示在最前面。
</li>
</ul>
</li>
</ul>
<div class="cnblogs_code">
<pre>.static {
position: static; /* 默认状态 */
}
.relative {
position: relative; /* 相对定位 */
}
.absolute {
position: absolute; /* 绝对定位 */
top: 10px;
left: 20px;
}
.fixed {
position: fixed; /* 固定定位 */
bottom: 0;
}
.sticky {
position: sticky; /* 粘性定位 */
top: 0;
}</pre>
</div>
 
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
定位相关属性
<table class="md-table">
<thead>
<tr class="md-end-block"><th>属性</th><th>说明</th><th>值</th></tr>
</thead>
<tbody>
<tr class="md-end-block">
<td><code>position</code></td>
<td>指定元素的定位类型。</td>
<td><code>static</code>、<code>relative</code>、 <code>absolute</code>、<code>fixed</code>、 <code>sticky</code>、<code>inherit</code></td>
</tr>
<tr class="md-end-block">
<td><code>top</code></td>
<td>定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。</td>
<td><code>auto</code>、<code>length</code>、 <code>%</code>、<code>inherit</code></td>
</tr>
<tr class="md-end-block">
<td><code>right</code></td>
<td>定义了定位元素右外边距边界与其包含块右边界之间的偏移。</td>
<td><code>auto</code>、<code>length</code>、 <code>%</code>、<code>inherit</code></td>
</tr>
<tr class="md-end-block">
<td><code>bottom</code></td>
<td>定义了定位元素下外边距边界与其包含块下边界之间的偏移。</td>
<td><code>auto</code>、<code>length</code>、 <code>%</code>、<code>inherit</code></td>
</tr>
<tr class="md-end-block">
<td><code>left</code></td>
<td>定义了定位元素左外边距边界与其包含块左边界之间的偏移。</td>
<td><code>auto</code>、<code>length</code>、 <code>%</code>、<code>inherit</code></td>
</tr>
<tr class="md-end-block">
<td><code>z-index</code></td>
<td>设置元素的堆叠顺序。</td>
<td><code>number</code>、<code>auto</code>、 <code>inherit</code></td>
</tr>
<tr class="md-end-block">
<td><code>overflow</code></td>
<td>只工作于指定高度的块元素上，用于控制内容溢出元素框时显示的方式。</td>
<td><code>auto</code>、<code>hidden</code>、 <code>scroll</code>、<code>visible</code>、 <code>inherit</code></td>
</tr>
<tr class="md-end-block">
<td><code>overflow-x</code></td>
<td>指定如何处理右边/左边边缘的内容溢出元素的内容区域。</td>
<td><code>auto</code>、<code>hidden</code>、 <code>scroll</code>、<code>visible</code>、 <code>no-display</code>、<code>no-content</code></td>
</tr>
<tr class="md-end-block">
<td><code>overflow-y</code></td>
<td>指定如何处理顶部/底部边缘的内容溢出元素的内容区域。</td>
<td><code>auto</code>、<code>hidden</code>、 <code>scroll</code>、<code>visible</code>、 <code>no-display</code>、<code>no-content</code></td>
</tr>
<tr class="md-end-block">
<td><code>clip</code></td>
<td>剪辑一个绝对定位的元素。</td>
<td><code>shape</code>、<code>auto</code>、 <code>inherit</code></td>
</tr>
<tr class="md-end-block">
<td><code>cursor</code></td>
<td>显示光标移动到指定的类型。</td>
<td><code>auto</code>、<code>default</code>、 <code>pointer</code>、<code>crosshair</code>、 <code>move</code>、<code>wait</code>、 <code>text</code>、<code>help</code>、<code>url</code>、 <code>e-resize</code>、<code>ne-resize</code>、 <code>nw-resize</code>、<code>n-resize</code>、 <code>se-resize</code>、<code>sw-resize</code>、 <code>s-resize</code>、<code>w-resize</code>、</td>
</tr>
</tbody>
</table>
</li>
<li class="md-list-item">
弹性盒子（Flexbox）
现代新式布局，设置一维弹性布局，用于简化响应式布局。适合简单对齐和空间分配。
弹性盒子由弹性容器（Flex container）和弹性子元素（Flex item）组成。
通过设置 <code>display</code>属性的值为 <code>flex</code> 或 <code>inline-flex</code> ，将显示布局定义为弹性容器。弹性容器内包含了一个或多个弹性子元素。
相关属性：<code>flex</code>，<code>flex-basis</code>，<code>flex-direction</code>，<code>flex-flow</code>，<code>flex-grow</code>，<code>flex-shrink</code>，<code>flex-wrap</code>，<code>order</code>，<code>align-content</code>，<code>align-items</code>，<code>align-self</code>，<code>justify-content</code>，<code>place-content</code>，<code>row-gap</code>，<code>column-gap</code>，<code>gap</code>。
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
<code>flex-direction</code>（指定弹性子元素在父容器中的位置）：<code>row | row-reverse | column | column-reverse;</code>。
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
<code>row</code>：横向从左到右排列（左对齐），默认的排列方式。
</li>
<li class="md-list-item">
<code>row-reverse</code>：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
</li>
<li class="md-list-item">
<code>column</code>：纵向排列。
</li>
<li class="md-list-item">
<code>column-reverse</code>：反转纵向排列，从后往前排，最后一项排在最上面。
</li>
</ul>
</li>
<li class="md-list-item">
<code>flex-wrap</code>（用于指定弹性盒子的子元素换行方式）：<code>nowrap | wrap | wrap-reverse | initial | inherit;</code>。
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
<code>nowrap</code>：默认，弹性容器为单行。该情况下弹性子项可能会溢出容器。
</li>
<li class="md-list-item">
<code>wrap</code>：弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行。
</li>
<li class="md-list-item">
<code>wrap-reverse</code>：反转 wrap 排列。
</li>
</ul>
</li>
<li class="md-list-item">
<code>flex-flow</code>（设置或检索弹性盒模型对象的子元素排列方式）：<code>flex-direction flex-wrap|initial|inherit;</code>。
</li>
<li class="md-list-item">
<code>flex</code>（设置弹性盒子的子元素如何分配空间）：<code>flex-grow flex-shrink flex-basis|auto|initial|inherit;</code>。
</li>
<li class="md-list-item">
<code>flex-grow</code>（设置或检索弹性盒子的扩展比率）：<code>number | initial | inherit;</code>。
</li>
<li class="md-list-item">
<code>flex-shrink</code>（flex 元素的收缩大小）：<code>number | initial | inherit;</code>。
</li>
<li class="md-list-item">
<code>flex-basis</code>（设置或检索弹性盒伸缩基准值）：<code>number | auto | initial | inherit;</code>。
</li>
<li class="md-list-item">
<code>justify-content</code>（沿着弹性容器的主轴线（横轴），进行内容对齐）：<code>flex-start | flex-end | center | space-between | space-around;</code>。
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
<code>flex-start</code>：弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放。
</li>
<li class="md-list-item">
<code>flex-end</code>：弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放。
</li>
<li class="md-list-item">
<code>center</code>：弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）。
</li>
<li class="md-list-item">
<code>space-between</code>：弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。否则，第1个弹性项的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，然后剩余的弹性项分布在该行上，相邻项目的间隔相等。
</li>
<li class="md-list-item">
<code>space-around</code>：弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。否则，弹性项目沿该行分布，且彼此间隔相等（比如是20px），同时首尾两边和弹性容器之间留有一半的间隔（1/2*20px=10px）。
</li>
</ul>
</li>
<li class="md-list-item">
<code>align-items</code>（设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式）：<code>flex-start | flex-end | center | baseline | stretch;</code>。
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
<code>flex-start</code>：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
</li>
<li class="md-list-item">
<code>flex-end</code>：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
</li>
<li class="md-list-item">
<code>center</code>：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
</li>
<li class="md-list-item">
<code>baseline</code>：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
</li>
<li class="md-list-item">
<code>stretch</code>：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。
</li>
</ul>
</li>
<li class="md-list-item">
<code>align-content</code>（用于修改 <code>flex-wrap</code> 属性的行为）：<code>flex-start | flex-end | center | space-between | space-around | stretch;</code>。
<code>align-content</code> 类似于 <code>align-items</code>, 但 <code>align-content</code> 不是设置弹性子元素的对齐，而是设置各个行的对齐。
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
<code>stretch</code>：默认。各行将会伸展以占用剩余的空间。
</li>
<li class="md-list-item">
<code>flex-start</code>：各行向弹性盒容器的起始位置堆叠。
</li>
<li class="md-list-item">
<code>flex-end</code>：各行向弹性盒容器的结束位置堆叠。
</li>
<li class="md-list-item">
<code>center</code>：各行向弹性盒容器的中间位置堆叠。
</li>
<li class="md-list-item">
<code>space-between</code>：各行在弹性盒容器中平均分布。
</li>
<li class="md-list-item">
<code>space-around</code>：各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。
</li>
</ul>
</li>
<li class="md-list-item">
<code>align-self</code>（在弹性子元素上使用，覆盖容器的 align-items 属性）：<code>auto | stretch | center | flex-start | flex-end | baseline | initial | inherit;</code>。
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
<code>auto</code>：默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 "stretch"。
</li>
<li class="md-list-item">
<code>stretch</code>：元素被拉伸以适应容器。
</li>
<li class="md-list-item">
<code>center</code>：元素位于容器的中心。
</li>
<li class="md-list-item">
<code>flex-start</code>：元素位于容器的开头。
</li>
<li class="md-list-item">
<code>flex-end</code>：元素位于容器的结尾。
</li>
<li class="md-list-item">
<code>baseline</code>：元素位于容器的基线上。
</li>
<li class="md-list-item">
<code>initial</code>：设置该属性为它的默认值。
</li>
<li class="md-list-item">
<code>inherit</code>：从父元素继承该属性。
</li>
</ul>
</li>
<li class="md-list-item">
<code>order</code>（设置弹性盒子的子元素排列顺序）：<code>number | initial | inherit;</code>。
</li>
</ul>
</li>
</ul>
<div class="cnblogs_code">
<pre>.flexbox-container {
display: flex; /* 创建弹性容器 */
justify-content: center; /* 水平居中对齐 */
/* justify-content: space-between; */ /* 主轴对齐方式 */
align-items: center; /* 垂直居中对齐 */
/* align-items: center; */ /* 交叉轴对齐方式 */
}</pre>
</div>
 
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
网格布局（Grid）
现代新式布局，设置二维网格布局，用于实现复杂页面结构。网格是一组相交的水平线和垂直线，分别定义网格的列和行。
通过设置 <code>display</code>属性的值为 <code>grid</code> 或 <code>inline-grid</code> ，将显示布局定义为网格容器。网格容器带有行和列，可以更轻松地设计网页，而无需使用浮动和定位。
网格引入了（fr 单位），可以创建灵活的网格轨道。一个（fr 单位）代表网格容器中可用空间的一等份。
相关属性：<code>grid-template-columns</code>，<code>grid-template-rows</code>，<code>grid-template-areas</code>，<code>grid-template</code>，<code>grid-auto-columns</code>，<code>grid-auto-rows</code>，<code>grid-auto-flow</code>，<code>grid</code>，<code>grid-row-start</code>，<code>grid-column-start</code>，<code>grid-row-end</code>，<code>grid-column-end</code>，<code>grid-row</code>，<code>grid-column</code>，<code>grid-area</code>，<code>grid-row-gap</code>，<code>grid-column-gap</code>，<code>grid-gap</code>。
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
<code>grid</code>（ CSS 所有网格容器的简写属性），可以用来设置以下属性：
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
显式网格属性： <code>grid-template-rows</code>、<code>grid-template-columns</code> 和 <code>grid-template-areas</code>。
</li>
<li class="md-list-item">
隐式网格属性： <code>grid-auto-rows</code>、<code>grid-auto-columns</code> 和 <code>grid-auto-flow</code>。
</li>
<li class="md-list-item">
间距属性： <code>grid-row-gap</code> 和 <code>grid-column-gap</code>。
</li>
</ul>
</li>
<li class="md-list-item">
<code>grid-template</code>（设置网格中行、列与分区）：<code>none | grid-template-rows/grid-template-columns | grid-template-areas | initial | inherit;</code>。
</li>
<li class="md-list-item">
<code>grid-template-rows</code>（定义网格中的行）：<code>none | auto | max-content | min-content | length | initial | inherit;</code>。
</li>
<li class="md-list-item">
<code>grid-template-columns</code>（定义网格中的列）：<code>none | auto | max-content | min-content | length | initial | inherit;</code>。
</li>
<li class="md-list-item">
<code>grid-template-areas</code>（指定如何显示行和列，使用网格元素的名称来布局网格）：<code>none | itemnames;</code>。
</li>
<li class="md-list-item">
<code>grid-auto-rows</code>（设置网格容器中行的默认大小）：<code>auto | max-content | min-content | length;</code>。
</li>
<li class="md-list-item">
<code>grid-auto-columns</code>（设置网格容器中列的默认大小）：<code>auto | max-content | min-content | length;</code>。
</li>
<li class="md-list-item">
<code>grid-auto-flow</code>（指定自动布局算法，精确指定自动布局的元素排列）：<code>row | column | dense | row dense | column dense;</code>。
</li>
<li class="md-list-item">
<code>grid-gap</code>（同时设置行间距和列间距）：<code>grid-row-gap grid-column-gap</code>。
</li>
<li class="md-list-item">
<code>grid-row-gap</code>（定义网格行间距）：<code>length | %</code>。
</li>
<li class="md-list-item">
<code>grid-column-gap</code>（定义网格列间距）：<code>length | %</code>。
</li>
<li class="md-list-item">
<code>grid-row</code>（同时指定网格元素行线的开始位置和结束位置）：<code>grid-row-start / grid-row-end;</code>。
</li>
<li class="md-list-item">
<code>grid-area</code>（指定网格元素在网格布局中的大小和位置）：<code>grid-row-start / grid-column-start / grid-row-end / grid-column-end | itemname;</code>。
</li>
<li class="md-list-item">
<code>grid-row-start</code>（指定网格元素行线的开始位置）：<code>auto | row-line;</code>。
</li>
<li class="md-list-item">
<code>grid-row-end</code>（指定网格元素行线的结束位置）：<code>auto | row-line | span n;</code>。
</li>
<li class="md-list-item">
<code>grid-column</code>（同时指定网格元素列线的开始位置和结束位置）：<code>grid-column-start / grid-column-end;</code>。
</li>
<li class="md-list-item">
<code>grid-column-start</code>（指定网格元素列线的开始位置）：<code>auto | span n | column-line;</code>。
</li>
<li class="md-list-item">
<code>grid-column-end</code>（指定网格元素列线的结束位置）：<code>auto | span n | column-line;</code>。
</li>
<li class="md-list-item">
<code>justify-content</code> （用于对齐容器内的网格，设置如何分配顺着弹性容器主轴(或者网格行轴) 的元素之间及其周围的空间），网格的总宽度必须小于容器的宽度才能使 <code>justify-content</code> 属性生效。。
</li>
<li class="md-list-item">
<code>align-content</code>（用于设置垂直方向上的网格元素在容器中的对齐方式），网格元素的总高度必须小于容器的高度才能使 <code>align-content</code> 属性生效。
</li>
</ul>
</li>
</ul>
<div class="cnblogs_code">
<pre>.grid-container {
display: grid; /* 创建网格容器 */
grid-template-columns: 1fr 2fr; /* 列宽比例 */
/* grid-template-columns: repeat(3, 1fr);*/ /* 3 列等宽 */
gap: 10px; /* 网格间隔 */
}</pre>
</div>
 
 参考函数：<code>repeat()</code>，<code>minmax()</code>，<code>fit-content()</code>。
 相关术语：网格（Grid），网格线（Grid lines），网格轨道（Grid tracks），网格单元格（Grid cell），网格区域（Grid areas），网格间隙（Gutters），网格轴（Grid Axis），网格行（Grid row），网格列（Grid column）。
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
弹性盒子和网格布局的示例
</li>
</ul>
<div class="cnblogs_code">
<pre>/* 示例：居中元素 */
.container {
display: flex; /* 传统flex方案 */
justify-content: center;
align-items: center;
}

.container {
display: grid; /* 现代grid方案 */
place-items: center; /* 一行代码实现居中 */
}</pre>
</div>
 
<h3 class="md-end-block md-heading">4.3 响应式设计</h3>
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
媒体查询（Media Queries）
使用<code>@media</code>媒体查询，适配不同设备尺寸，根据设备特性（如屏幕宽度）应用不同的样式，适配不同终端（PC/平板/手机）。
</li>
</ul>
<div class="cnblogs_code">
<pre>@media screen and (max-width: 768px) { /* 屏幕宽度小于768px时应用 */
body {
 font-size: 14px;
}
.container {
 flex-direction: column;
}
}</pre>
</div>
 
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
多媒体类型
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
all：用于所有多媒体类型设备。
</li>
<li class="md-list-item">
print：用于打印机。
</li>
<li class="md-list-item">
screen：用于电脑屏幕，平板，智能手机等。
</li>
<li class="md-list-item">
speech：用于屏幕阅读器。
</li>
</ul>
</li>
<li class="md-list-item">
多媒体查询语法
</li>
</ul>
<div class="cnblogs_code">
<pre>@media not|only mediatype and (expressions) {
CSS 代码...;
}
/* not: not是用来排除掉某些特定的设备的。 */
/* only: 用来定某种特别的媒体类型。 */</pre>
</div>
 
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
在不同的媒体上使用不同的样式文件
</li>
</ul>
<div class="cnblogs_code">
<pre><link rel="stylesheet" media="mediatype and|not|only (expressions)" href="select.css"></pre>
</div>
 
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
视口单位（Viewport Units）
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
<code>vw</code>（视口宽度）（视口宽度的百分比）。
</li>
<li class="md-list-item">
<code>vh</code>（视口高度）（视口高度的百分比）。
</li>
</ul>
</li>
</ul>
 
<div class="md-hr md-end-block"><hr></div>
 
<h2 class="md-end-block md-heading">5 常用 CSS 样式</h2>
<h3 class="md-end-block md-heading">5.1 文本相关样式</h3>
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
<code>color</code>（颜色）：<code>red | #ff0000 | rgb(255,0,0) | rgba(255,0,0,0.5)</code> 。
</li>
<li class="md-list-item">
<code>font-size</code>（字号）：<code>14px | 1em | 2rem | 100%</code>。
</li>
<li class="md-list-item">
<code>font-weight</code>（字重）：<code>normal | light | bold | 500</code> 。
</li>
<li class="md-list-item">
<code>font-style</code>（字体样式）：<code>normal | italic | oblique</code> 。
</li>
<li class="md-list-item">
<code>font-family</code>（字体类型）：<code>"黑体", "宋体", "Microsoft Yahei", "Times New Roman"</code> 。
</li>
<li class="md-list-item">
<code>direction</code>（文本方向）：<code>ltr | rtl | inherit</code>
</li>
<li class="md-list-item">
<code>unicode-bidi</code>（文本是否被重写）：<code>normal | embed | bidi-override | initial | inherit</code>。
</li>
<li class="md-list-item">
<code>text-transform</code>（文本转换）：<code>uppercase | lowercase | capitalize</code>。
</li>
<li class="md-list-item">
<code>text-decoration</code>（文本装饰线）：<code>none | underline | overline | line-through</code> 。
</li>
<li class="md-list-item">
<code>text-indent</code>（文本缩进）：<code>16px | 2em | 1rem</code> 。
</li>
<li class="md-list-item">
<code>text-shadow</code>（文本阴影）：<code>h-shadow v-shadow blur color</code>;
</li>
<li class="md-list-item">
<code>text-align</code>（文本水平对齐）：<code>left | center | right | justify</code> 。
</li>
<li class="md-list-item">
<code>vertical-align</code>（非块级元素垂直对齐）：<code>top | middle | bottom</code> 。
</li>
<li class="md-list-item">
<code>line-height</code>（文本行高）：<code>16px | 32px</code> 。
</li>
<li class="md-list-item">
<code>letter-spacing</code>（字符间距）：<code>2px | -2px</code> 。
</li>
<li class="md-list-item">
<code>word-spacing</code>（字间距）：<code>12px | 22px</code> 。
</li>
<li class="md-list-item">
<code>white-space</code>（元素内空白）：<code>pre | pre-line | pre-wrap | nowrap</code>。
</li>
</ul>
<h3 class="md-end-block md-heading">5.2 盒模型相关样式</h3>
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
<code>content</code>（内容），用于在元素的 <code>::before</code>和 <code>::after</code>伪元素中插入内容。使用 <code>content</code> 属性插入的内容都是匿名的可替换元素。
</li>
<li class="md-list-item">
<code>padding</code>（内边距），该属性为给定元素设置所有四个（上右下左）方向的内边距属性。
单个设置值会统一应用于（所有边），两个设置值则应用于（上边下边，左边右边），三个设置值则应用于（上边，左边右边，下边），四个设置值则分别按（顺时针方向）应用于（上边，右边，下边，左边）。
<code>padding</code>（内边距）：<code>length | %</code>。
<code>padding</code>（内边距）可细分为：
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
<code>padding-top</code>（上方内边距）：<code>length | %</code>。
</li>
<li class="md-list-item">
<code>padding-right</code>（右方内边距）：<code>length | %</code>。
</li>
<li class="md-list-item">
<code>padding-bottom</code>（下方内边距）：<code>length | %</code>。
</li>
<li class="md-list-item">
<code>padding-left</code>（左方内边距）：<code>length | %</code>。
</li>
</ul>
</li>
<li class="md-list-item">
<code>border</code>（边框），该属性最多只接受三个参数，分别是宽度、风格和颜色，这样会使得四条边的边框相同。也可以使用一个，两个或三个值来指定 <code>border</code> 属性，值的顺序无关紧要。（可按四边分为 <code>border-top</code>、<code>border-right</code>、<code>border-bottom</code>、<code>border-left</code>）。
<code>border</code>（边框）：<code>border-width border-style border-color</code>。
可细分为：
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
<code>border-width</code>：边框宽度。（支持单值、双值、三值、四值分别设置四个边，也可按四边分为 <code>border-top-width</code>、<code>border-right-width</code>、<code>border-bottom-width</code>、<code>border-left-width</code>）。
<code>border-width</code>（边框宽度）：<code>thin | medium | thick | length</code>。
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
值为<code>thin</code>：定义细的边框。
</li>
<li class="md-list-item">
值为<code>medium</code>：定义中等粗细的边框。
</li>
<li class="md-list-item">
值为<code>thick</code>：定义粗的边框。
</li>
<li class="md-list-item">
值为<code>length</code>：自定义边框的粗细宽度。
</li>
</ul>
</li>
<li class="md-list-item">
<code>border-style</code>：边框风格。（支持单值、双值、三值、四值分别设置四个边，也可按四边分为 <code>border-top-style</code>、<code>border-right-style</code>、<code>border-bottom-style</code>、<code>border-left-style</code>）。
<code>outline-style</code>（边框风格）：<code>none | dotted | dashed | solid | double | groove | ridge | inset | outset</code>。
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
值为<code>none</code>：和关键字 <code>hidden</code> 类似，不显示边框。
</li>
<li class="md-list-item">
值为<code>hidden</code>：和关键字 <code>none</code> 类似，不显示边框。
</li>
<li class="md-list-item">
值为<code>dotted</code>：显示为一系列圆点，圆点半径是 <code>border-width</code>计算值的一半。
</li>
<li class="md-list-item">
值为<code>dashed</code>：显示为一系列短的方形虚线。
</li>
<li class="md-list-item">
值为<code>solid</code>：显示为一条实线。
</li>
<li class="md-list-item">
值为<code>double</code>：显示为一条双实线，宽度是 <code>border-width</code> 。
</li>
<li class="md-list-item">
值为<code>groove</code>：显示为三维沟槽雕刻效果的边框，样式与 <code>ridge</code> 相反。
</li>
<li class="md-list-item">
值为<code>ridge</code>：显示为三维脊状浮雕效果的边框，样式与 <code>groove</code> 相反。
</li>
<li class="md-list-item">
值为<code>inset</code>：显示为三维嵌入效果的边框，样式与 <code>outset</code> 相反。
</li>
<li class="md-list-item">
值为<code>outset</code>：显示为三维突出效果的边框，样式与 <code>inset</code> 相反。
</li>
</ul>
</li>
<li class="md-list-item">
<code>border-color</code>：边框颜色。（支持单值、双值、三值、四值分别设置四个边，也可按四边分为 <code>border-top-color</code>、<code>border-right-color</code>、<code>border-bottom-color</code>、<code>border-left-color</code>）。
<code>border-color</code>（边框颜色）：<code>color-name | hex-number | rgb-number | transparent</code>。
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
值为<code>color</code>：指定背景颜色。
</li>
<li class="md-list-item">
值为<code>transparent</code>：指定边框的颜色是透明的。
</li>
</ul>
</li>
<li class="md-list-item">
<code>border-radius</code>：边框圆角。（支持单值、双值、三值、四值分别设置四个角，也可按四角分为 <code>border-top-left-radius</code>、<code>border-top-right-radius</code>、<code>border-bottom-right-radius</code>、<code>border-bottom-left-radius</code>）。
<code>border-radius</code>（边框圆角）：<code>(1-4个 length | %) / (1-4个 length | %)</code>。
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
单值语法：<code>border-radius: length|%</code>，这一个值表示所有的边框宽度。
</li>
<li class="md-list-item">
双值语法： <code>border-radius: length|% length|%</code>，第一个值表示 top-left 和 bottom-right 方向的角；第二个值表示 top-right 和 bottom-left 方向的角。
</li>
<li class="md-list-item">
三值语法：<code>border-radius: length|% length|% length|%</code>，第一个值表示 top-left 方向的角，第二个值表示 top-right 和 bottom-left 方向的角，第三个值表示 bottom-right 方向的角。
</li>
<li class="md-list-item">
四值语法：<code>border-radius: length|% length|% length|% length|%</code>，这四个值分别表示 top-left、top-right、bottom-right、bottom-left，即从 top-left 开始的顺时针顺序。
</li>
</ul>
</li>
</ul>
</li>
<li class="md-list-item">
<code>margin</code>（外边距），该属性为给定元素设置所有四个（上右下左）方向的外边距属性。
单个设置值会统一应用于（所有边），两个设置值则应用于（上边下边，左边右边），三个设置值则应用于（上边，左边右边，下边），四个设置值则分别按（顺时针方向）应用于（上边，右边，下边，左边）。
<code>margin</code>（外边距）：<code>auto | length | %</code>。
<code>margin</code>（外边距）可细分为：
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
<code>margin-top</code>（上方外边距）：<code>auto | length | %</code>。
</li>
<li class="md-list-item">
<code>margin-right</code>（右方外边距）：<code>auto | length | %</code>。
</li>
<li class="md-list-item">
<code>margin-bottom</code>（下方外边距）：<code>auto | length | %</code>。
</li>
<li class="md-list-item">
<code>margin-left</code>（左方外边距）：<code>auto | length | %</code>。
</li>
</ul>
</li>
<li class="md-list-item">
<code>outline</code>（轮廓），绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。可按顺序设置（<code>outline-color outline-style outline-width</code>）
可细分为：
<code>outline-color</code>（轮廓的颜色）：<code>color-name | hex-number | rgb-number | invert</code>。
<code>outline-style</code>（轮廓的样式）：<code>none | dotted | dashed | solid | double | groove | ridge | inset | outset</code>。
<code>outline-width</code>（轮廓的宽度）：<code>thin | medium | thick | length</code>。
</li>
<li class="md-list-item">
<code>box-shadow</code>（阴影）。
</li>
<li class="md-list-item">
<code>width</code>（宽度）：<code>100px | 1em | 2rem</code> 。
</li>
<li class="md-list-item">
<code>height</code>（高度）：<code>100px | 1em | 2rem</code> 。
</li>
</ul>
<h3 class="md-end-block md-heading">5.3 显示相关样式</h3>
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
<code>display</code>（显示）用于设置元素是块级盒子（占用整行）或是行级盒子（仅需必要宽度，不强制换行）。<code>display</code> 也可用于设置子元素的布局，例如：文档流式布局、弹性盒子布局、网格布局。
<code>display</code>（显示）用于设置一个元素应如何显示，<code>display:none;</code>可以隐藏某个元素，且隐藏的元素不会占用任何空间。
<code>visibility</code>（可见性）用于指定一个元素可见或隐藏。<code>visibility:hidden;</code>可以隐藏元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。
</li>
</ul>
<div class="cnblogs_code">
<pre>/* 预组合值 */
display: block; /* 块级 */
display: inline; /* 行内 */
display: inline-block; /* 行内块 */
display: flex; /* 弹性盒子 */
display: inline-flex;
display: grid; /* 网格布局 */
display: inline-grid;
display: flow-root;

/* 生成盒子 */
display: none;
display: contents;

/* 多关键字语法 */
display: block flex;
display: block flow;
display: block flow-root;
display: block grid;
display: inline flex;
display: inline flow;
display: inline flow-root;
display: inline grid;

/* 其他值 */
display: table;
display: table-row; /* 所有的 table 元素都有等效的 CSS display 值 */
display: list-item;

/* 全局值 */
display: inherit;
display: initial;
display: revert;
display: revert-layer;
display: unset;</pre>
</div>
 
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
关键值可以被分组为六个种类：
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
<code>display-outside</code>，外部表现，规定元素的外部显示类型。
</li>
<li class="md-list-item">
<code>display-inside</code>，内部表现，元素的内部显示类型，其定义了该内容布局时的格式上下文的类型。
</li>
<li class="md-list-item">
<code>display-listitem</code>，列表元素，为内容生成一个块级盒子和一个单独的列表元素行级盒子。
</li>
<li class="md-list-item">
<code>display-internal</code>，内部，一些布局模型，例如 <code>table</code> 和 <code>ruby</code> 有一个复杂的内置结构，它们的子孙后代可以扮演几个不同的角色。
</li>
<li class="md-list-item">
<code>display-box</code>，盒，定义一个元素到底是否产生 display 盒。
</li>
<li class="md-list-item">
<code>display-legacy</code>，预组合，对相同布局模式的块级和行级变体需要单独的关键字。
</li>
</ul>
</li>
<li class="md-list-item">
<code>position</code>（定位）：<code>static | relative | absolute | fixed</code> 。
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
<code>static</code>（静态定位），<code>relative</code>（相对定位）。<code>absolute</code>（绝对定位），<code>fixed（</code>固定定位）。
</li>
<li class="md-list-item">
<code>top</code>（上坐标），<code>right</code>（右坐标），<code>bottom</code>（下坐标），<code>left</code>（左坐标）。
</li>
<li class="md-list-item">
<code>z-index</code>（层叠）。
</li>
</ul>
</li>
<li class="md-list-item">
<code>float</code>（浮动）：<code>left | right</code> 。
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
清除浮动：<code>overflow</code>：<code>hidden</code> 。
</li>
<li class="md-list-item">
清除浮动：<code>clear</code>：<code>left | right | both</code> 。
</li>
<li class="md-list-item">
设置父级盒子的固定高度：<code>height</code> 。
</li>
</ul>
</li>
</ul>
<h3 class="md-end-block md-heading">5.4 背景相关样式</h3>
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
<code>background</code>：背景。
样式设置语法：<code>background:#颜色值 url("图像") 是否重复固定或滚动图像起始位置;</code>。
可细分为如下5种样式。
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
<code>background-color</code>：背景颜色。
</li>
<li class="md-list-item">
<code>background-image</code>：背景图像。
</li>
<li class="md-list-item">
<code>background-repeat</code>：背景图像重复。
</li>
<li class="md-list-item">
<code>background-attachment</code>：背景图像是否固定或者随着页面的其余部分滚动。
</li>
<li class="md-list-item">
<code>background-position</code>：背景图像的起始位置。
</li>
</ul>
</li>
</ul>
<h3 class="md-end-block md-heading">5.5 链接列表表格样式</h3>
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
链接相关样式：
<ol class="ol-list" start="">
<li class="md-list-item">
<code>a:link</code>（未访问过的链接）：可以用颜色、字体、背景等样式属性。
</li>
<li class="md-list-item">
<code>a:visited</code>（用户已访问过的链接）：可以用颜色、字体、背景等样式属性。
</li>
<li class="md-list-item">
<code>a:hover</code>（当用户鼠标放在链接上时）：可以用颜色、字体、背景等样式属性。
</li>
<li class="md-list-item">
<code>a:active</code>（链接被点击的那一刻）：可以用颜色、字体、背景等样式属性。
</li>
</ol></li>
<li class="md-list-item">
列表相关样式：
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
<code>list-style</code>（ul/ol列表样式）：<code>none | circle | disc | decimal</code> 。
</li>
<li class="md-list-item">
<code>list-style-type</code>（ul 列表项标记）：<code>circle、square</code> 。
</li>
<li class="md-list-item">
<code>list-style-type</code>（ol 列表项标记）：<code>lower-alpha、upper-roman</code> 。
</li>
<li class="md-list-item">
<code>list-style-position</code>（列表项标志的位置）：<code>inside | outside</code> 。
</li>
<li class="md-list-item">
<code>list-style-image</code>（作为列表项标记的图像）：<code>url('xxx.gif')</code> 。
</li>
</ul>
</li>
<li class="md-list-item">
表格相关样式：
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
<code>border</code>（边框）。
</li>
<li class="md-list-item">
<code>border-collapse</code>（折叠边框）：<code>collapse</code> 。
</li>
<li class="md-list-item">
<code>width</code>（宽）。
</li>
<li class="md-list-item">
<code>height</code>（高）。
</li>
<li class="md-list-item">
<code>text-align</code>（水平对齐）。
</li>
<li class="md-list-item">
<code>vertical-align</code>（垂直对齐）。
</li>
<li class="md-list-item">
<code>padding</code>（内边距填充）：<code>10px</code> 。
</li>
<li class="md-list-item">
<code>color</code>（颜色）。
</li>
<li class="md-list-item">
<code>background-color</code>（背景颜色）。
</li>
</ul>
</li>
</ul>
<h3 class="md-end-block md-heading">5.6 元素尺寸样式</h3>
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
<code>width</code>（元素的宽度）：<code>auto | length | %</code> 。
</li>
<li class="md-list-item">
<code>height</code>（元素的高度）：<code>auto | length | %</code> 。
</li>
<li class="md-list-item">
<code>max-width</code>（元素的最大宽度）：<code>none | length | %</code> 。
</li>
<li class="md-list-item">
<code>max-height</code>（元素的最大高度）：<code>none | length | %</code> 。
</li>
<li class="md-list-item">
<code>min-width</code>（元素的最小宽度）：<code>length | %</code> 。
</li>
<li class="md-list-item">
<code>min-height</code>（元素的最小高度）：<code>length | %</code> 。
</li>
</ul>
<h3 class="md-end-block md-heading">5.7 溢出和浮动样式</h3>
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
<code>overflow</code>（溢出）只工作于指定高度的块元素上，用于控制内容溢出元素框时显示的方式。
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
<code>overflow:visible;</code>：内容不会被修剪，会呈现在元素框之外。
</li>
<li class="md-list-item">
<code>overflow:hidden;</code>：内容会被修剪，并且其余内容是不可见的。
</li>
<li class="md-list-item">
<code>overflow:scroll;</code>：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
</li>
<li class="md-list-item">
<code>overflow:auto;</code>：如果内容出现被修剪，则浏览器会显示滚动条以便查看其余的内容。
</li>
<li class="md-list-item">
<code>overflow:inherit;</code>：从父元素继承 overflow 属性的值。
</li>
</ul>
</li>
<li class="md-list-item">
<code>float</code>（浮动）会使元素向左或向右移动，其周围的元素也会重新排列，通常是用于图像。
<code>float</code>（浮动）：<code>none | left | right | inherit;</code>。
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
在布局时，是水平方向浮动，元素只能左右移动而不能上下移动。
</li>
<li class="md-list-item">
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
</li>
<li class="md-list-item">
浮动元素之后的元素将围绕它（例如图像是左浮动，文本流将环绕在它右边）。
</li>
<li class="md-list-item">
如果把几个浮动的元素放到一起，且有空间的话，这几个浮动元素会彼此相邻。
</li>
</ul>
</li>
<li class="md-list-item">
clear（清除）：不允许元素周围有浮动元素，即指定元素两侧不能出现浮动元素。
clear（清除）：<code>none | left | right | both | inherit;</code>。
</li>
</ul>
 
<div class="md-hr md-end-block"><hr></div>
 
<h2 class="md-end-block md-heading">6 颜色与单位</h2>
<h3 class="md-end-block md-heading">6.1 颜色值</h3>
<div class="cnblogs_code">
<pre>.color-name { color: red; } /* 颜色名称 */
.hex-code { color: #FF0000; } /* 十六进制 */
.rgb-value { color: rgb(255, 0, 0); } /* RGB值 */
.rgba-value { color: rgba(255, 0, 0, 0.5); } /* 带透明度 */</pre>
</div>
 
<h3 class="md-end-block md-heading">6.2 单位</h3>
<div class="cnblogs_code">
<pre>.px-unit { font-size: 16px; } /* 固定像素 */
.em-unit { font-size: 1.5em; } /* 相对于父元素 */
.rem-unit { font-size: 1.2rem; } /* 相对于根元素 */
.percentage { width: 50%; } /* 百分比 */
.vw-vh { width: 50vw; } /* 视口宽度的50% */</pre>
</div>
 
 
<div class="md-hr md-end-block"><hr></div>
 
<h2 class="md-end-block md-heading">7 关键特性</h2>
<h3 class="md-end-block md-heading">7.1 优先级（Specificity）</h3>
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
多个样式规则可叠加作用于同一元素，当多个样式规则冲突时，通过优先级规则（如特异性、来源顺序）确定最终应用的样式。CSS 样式有不同的优先级，优先级高的样式规则会覆盖优先级低的。
</li>
<li class="md-list-item">
优先级规则（从高到低）：
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
<code>!important</code>（例外规则，强制覆盖）。应该尽量避免，因为这会破坏了样式表中的固有的级联规则使得调试找 bug 变得更加困难了。
</li>
<li class="md-list-item">
行内样式（inline)，在 HTML 元素的 <code>style</code> 属性中定义的样式。
</li>
<li class="md-list-item">
ID 选择器（例如<code>#example</code>）。
</li>
<li class="md-list-item">
类选择器（例如<code>.example</code>），属性选择器（例如<code></code>），伪类（例如<code>:hover</code>）。
</li>
<li class="md-list-item">
元素标签选择器（例如<code>h1</code>），伪元素（例如<code>::before</code>）。
</li>
<li class="md-list-item">
继承样式（inheritance）。
</li>
<li class="md-list-item">
通配符选择器（<code>*</code>）。
</li>
</ul>
</li>
<li class="md-list-item">
通配选择器（universal selector）（<code>*</code>）、关系选择器（combinator）（<code>+</code>、<code>></code>、<code>~</code>、<code>" "</code>、<code>||</code>）和 否定伪类（negation pseudo-class）（<code>:not()</code>）对优先级没有影响。但是，在 <code>:not()</code> 内部声明的选择器会影响优先级。
</li>
<li class="md-list-item">
优先级建议
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
更好地利用 CSS 级联属性。
</li>
<li class="md-list-item">
使用更具体的规则。在你选择的元素之前，增加一个或多个其他元素，使选择器变得更加具体，并获得更高的优先级。
</li>
</ul>
</li>
</ul>
<h3 class="md-end-block md-heading">7.2 继承（Inheritance）</h3>
 子元素自动继承父元素样式（如<code>font-family</code>），部分属性（如<code>margin</code>）不继承。
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
当元素的一个继承属性（inherited property）没有指定值时，则取父元素的同属性的计算值。
</li>
<li class="md-list-item">
某些属性（如 <code>color</code>、<code>font-family</code>）会从父元素自动继承到子元素。
</li>
<li class="md-list-item">
不可继承的属性（如 <code>border</code>、<code>margin</code>）需要显式设置。
</li>
</ul>
<h3 class="md-end-block md-heading">7.3 层叠（Cascading）</h3>
 层叠是 CSS 的一个基本特征，它是一个定义了如何合并来自多个源的属性值的算法。它在 CSS 处于核心地位，CSS 的全称层叠样式表正是强调了这一点。
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
CSS 声明的来源
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
用户代理样式：浏览器会有一个基本的样式表来给任何网页设置默认样式。
</li>
<li class="md-list-item">
页面作者样式：网页的作者可以定义文档的样式，这是最常见的样式表。大多数情况下此类型样式表会定义多个，它们构成网站的视觉和体验，即主题。
</li>
<li class="md-list-item">
读者用户样式：读者，作为浏览器的用户，可以使用自定义样式表定制使用体验。
</li>
</ul>
</li>
<li class="md-list-item">
层叠顺序（从高到低）
假如层叠顺序相等，则使用哪个值取决于优先级（Specificity）。
<ol class="ol-list" start="">
<li class="md-list-item">
CSS 过渡 (CSS Transition)
</li>
<li class="md-list-item">
用户代理样式的<code>!important</code>
</li>
<li class="md-list-item">
读者用户样式的<code>!important</code>
</li>
<li class="md-list-item">
页面作者样式的<code>!important</code>
</li>
<li class="md-list-item">
CSS 动画（CSS Animation）
</li>
<li class="md-list-item">
页面作者样式
</li>
<li class="md-list-item">
读者用户样式
</li>
<li class="md-list-item">
用户代理样式
</li>
</ol></li>
<li class="md-list-item">
重置样式
当 CSS 对样式完成更改之后，也许会在某种情况下希望还原到一个已知样式上，这可能发生在动画、主题修改之类的情形中。CSS 属性 <code>all</code>能够快速地把（几乎）所有 CSS 属性设置到一个已知样式上。
</li>
<li class="md-list-item">
层叠层/级联层
使用 <code>@layer</code> 声明了一个层叠层/级联层，同一层内的规则将级联在一起，这给予了开发者对层叠机制的更多控制。
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
一个层叠层同样可以通过 <code>@import</code>来创建，规则存在于被引入的样式表内：<code>@import (utilities.css) layer(utilities);</code>。
</li>
<li class="md-list-item">
可以创建带命名的层叠层，但不指定任何样式。例如，单一的命名层：<code>@layer utilities;</code>。
</li>
<li class="md-list-item">
多个命名层也可以被同时定义。例如：<code>@layer theme, layout, utilities;</code>。
对于多个命名层的声明而言，如果同一声明在多个层叠层中被指定，最后一层中的将优先于其他层。因此，在上面的例子中，如果 <code>theme</code> 层和 <code>utilities</code> 层中存在冲突的规则，那么 <code>utilities</code> 层中的将优先被应用。
</li>
</ul>
</li>
<li class="md-list-item">
层叠层的嵌套
层叠层允许嵌套，例如： 
</li>
</ul>
<div class="cnblogs_code">
<pre>@layer framework {
@layer layout {

}
}</pre>
</div>
 
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
嵌套层的附加规则
向 <code>framework</code> 层内部的 <code>layout</code> 层附加规则，只需用 <code>.</code> 连接这两层。
</li>
</ul>
<div class="cnblogs_code">
<pre>@layer framework.layout {
p {
 margin-block: 1rem;
}
}</pre>
</div>
 
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
匿名层
如果创建了一个层叠层但并未指定名字，则称为一个匿名层。除创建后无法向其添加规则外，该层和其他命名层功能一致。例如：
</li>
</ul>
<div class="cnblogs_code">
<pre>@layer {
p {
 margin-block: 1rem;
}
}</pre>
</div>
 
<h3 class="md-end-block md-heading">7.4 格式化上下文（Formatting Context）</h3>
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
行内格式化上下文（Inline Formatting Context），是一个网页的渲染结果的一部分。 
其中，各行内框（inline box）一个接一个地排列，其排列顺序根据书写模式（writing-mode）的设置来决定：
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
对于水平书写模式，各个框从左边开始水平地排列。
</li>
<li class="md-list-item">
对于垂直书写模式，各个框从顶部开始水平地排列。
</li>
</ul>
</li>
<li class="md-list-item">
区块格式化上下文（Block Formatting Context，BFC），是 Web 页面的可视 CSS 渲染的一部分，是块级盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
区块格式化上下文（BFC）是一个独立的布局环境，BFC 内部的元素布局与外部互相不影响。BFC 有一套属于自己的规则：
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
BFC 的区域不会与浮动 Box 重叠。
</li>
<li class="md-list-item">
BFC 是一个独立容器，BFC 内部的元素布局与外部互相不影响。
</li>
<li class="md-list-item">
计算 BFC 的高度时，浮动子元素也要参与计算。
</li>
</ul>
下列方式会创建区块格式化上下文：
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
文档的根元素（<code><html></code>）。
</li>
<li class="md-list-item">
浮动元素（即 <code>float</code>值不为 <code>none</code> 的元素）。
</li>
<li class="md-list-item">
绝对定位元素（<code>position</code>值为 <code>absolute</code> 或 <code>fixed</code> 的元素）。
</li>
<li class="md-list-item">
行内块元素（<code>display</code>值为 <code>inline-block</code> 的元素）。
</li>
<li class="md-list-item">
表格单元格（<code>display</code>值为 <code>table-cell</code>，HTML 表格单元格默认值）。
</li>
<li class="md-list-item">
表格标题（<code>display</code> 值为 <code>table-caption</code>，HTML 表格标题默认值）。
</li>
<li class="md-list-item">
匿名表格单元格元素（<code>display</code>值为 <code>table</code>（HTML 表格默认值）、<code>table-row</code>（表格行默认值）、<code>table-row-group</code>（表格体默认值）、<code>table-header-group</code>（表格头部默认值）、<code>table-footer-group</code>（表格尾部默认值）或 <code>inline-table</code>）。
</li>
<li class="md-list-item">
<code>overflow</code>值不为 <code>visible</code> 或 <code>clip</code> 的块级元素。
</li>
<li class="md-list-item">
<code>display</code> 值为 <code>flow-root</code> 的元素。
</li>
<li class="md-list-item">
<code>contain</code>值为 <code>layout</code>、<code>content</code> 或 <code>paint</code> 的元素。
</li>
<li class="md-list-item">
弹性元素（<code>display</code> 值为 <code>flex</code> 或 <code>inline-flex</code> 元素的直接子元素），如果它们本身既不是弹性、网格，也不是表格容器。
</li>
<li class="md-list-item">
网格元素（<code>display</code> 值为 <code>grid</code> 或 <code>inline-grid</code> 元素的直接子元素），如果它们本身既不是弹性、网格，也不是表格容器。
</li>
<li class="md-list-item">
多列容器（<code>column-count</code>或 <code>column-width</code>值不为 <code>auto</code>，且含有 <code>column-count: 1</code> 的元素）。
</li>
<li class="md-list-item">
<code>column-span</code> 值为 <code>all</code> 的元素始终会创建一个新的格式化上下文，即使该元素没有包裹在一个多列容器中）
</li>
</ul>
</li>
<li class="md-list-item">
格式化上下文影响布局，通常，我们会为定位和清除浮动创建新的 BFC，而不是更改布局，因为它将：
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
包含内部浮动。
</li>
<li class="md-list-item">
排除外部浮动。
</li>
<li class="md-list-item">
阻止外边距重叠。
</li>
</ul>
</li>
<li class="md-list-item">
块级格式化上下文（BFC ）的常用场景
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
解决浮动元素使父级元素的高度坍塌问题。
</li>
<li class="md-list-item">
解决非浮动元素被浮动元素覆盖问题。
</li>
<li class="md-list-item">
解决盒子顶底外边距重合问题。
</li>
<li class="md-list-item">
两栏自适应布局，一侧是有固定宽度和浮动的固定栏，另一侧为开启 BFC 的不固定栏。
</li>
</ul>
</li>
</ul>
<h3 class="md-end-block md-heading">7.5 变量（Custom Properties）</h3>
 定义和复用样式值（可复用的值）：
<div class="cnblogs_code">
<pre>:root {
--primary-color: #3498db;
}
button {
background: var(--primary-color);
}</pre>
</div>
 
<h3 class="md-end-block md-heading">7.6 函数与运算</h3>
<ol class="ol-list" start="">
<li class="md-list-item">
使用<code>calc()</code>。
</li>
<li class="md-list-item">
进行动态计算：
</li>
</ol>
<div class="cnblogs_code">
<pre>width: calc(100% - 20px);</pre>
</div>
 
<h3 class="md-end-block md-heading">7.7 逻辑属性（Logical Properties）</h3>
 基于书写模式（如左到右或右到左）自动适配布局：
<div class="cnblogs_code">
<pre>.text {
margin-inline-start: 20px; /* 自动适配 LTR/RTL */
}</pre>
</div>
 
<h3 class="md-end-block md-heading">7.8 动画与过渡</h3>
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
过渡（Transition）
通过 <code>transition</code> ，平滑改变属性值，实现平滑动画效果，提升用户体验。使页面元素显示从一种样式转变到另一个的时候，无需使用 Flash 动画或 JavaScript 脚本。
<code>transition</code>（过渡）：<code>property duration timing-function delay;</code>
可细分为：
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
<code>transition-property</code>（需要应用过渡的 CSS 属性名）：<code>`none | all | property</code>。
</li>
<li class="md-list-item">
<code>transition-duration</code>（定义过渡效果需要花费的时间）：<code>time</code>。
</li>
<li class="md-list-item">
<code>transition-timing-function</code>（规定过渡效果的时间曲线）：<code>linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n)</code>。
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
<code>linear</code>：匀速过渡效果。
</li>
<li class="md-list-item">
<code>ease</code>：默认值，缓慢加速，然后缓慢减速的过渡效果。
</li>
<li class="md-list-item">
<code>ease-in</code>：缓慢加速的过渡效果。
</li>
<li class="md-list-item">
<code>ease-out</code>：缓慢减速的过渡效果。
</li>
<li class="md-list-item">
<code>ease-in-out</code>：先缓慢加速，再缓慢减速的过渡效果。
</li>
<li class="md-list-item">
<code>cubic-bezier(n,n,n,n)</code>：自定义的贝塞尔曲线函数，通过四个值来定义曲线的控制点，分别对应 <code>x1</code>、<code>y1</code>、<code>x2</code>、<code>y2</code>。
</li>
</ul>
</li>
<li class="md-list-item">
<code>transition-delay</code>（过渡效果延迟开始的时间，默认是0）：<code>time</code>。
</li>
</ul>
</li>
</ul>
<div class="cnblogs_code">
<pre>.button {
background-color: blue;
transition: background-color 0.3s ease; /* 过渡 */
}
.button:hover { /* 悬停时颜色渐变 */
background-color: red;
}

.box {
transition: transform 0.3s ease; /* 过渡 */
}
.box:hover { /* 悬停时颜色渐变 */
transform: scale(1.1);
}</pre>
</div>
 
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
动画（Animation）
通过 <code>@keyframes</code> 定义复杂动画，提升用户体验。CSS 动画可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。
<code>animation</code>（动画）：<code>name duration timing-function delay iteration-count direction fill-mode play-state;</code>
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
<code>animation-name</code>（指定要绑定到选择器的关键帧的名称）：<code>keyframename | none</code>。
</li>
<li class="md-list-item">
<code>animation-duration</code>（指定动画需要多少秒或毫秒完成）：<code>time</code>。
</li>
<li class="md-list-item">
<code>animation-timing-function</code>（设置动画将如何完成一个周期）：<code>linear | ease | ease-in | ease-out | ease-in-out | steps(int,start|end) | cubic-bezier(n,n,n,n)</code>。
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
<code>linear</code>：动画从头到尾的速度是相同的。
</li>
<li class="md-list-item">
<code>ease</code>：默认。动画以低速开始，然后加快，在结束前变慢。
</li>
<li class="md-list-item">
<code>ease-in</code>：动画以低速开始。
</li>
<li class="md-list-item">
<code>ease-out</code>：动画以低速结束。
</li>
<li class="md-list-item">
<code>ease-in-out</code>：动画以低速开始和结束。
</li>
<li class="md-list-item">
<code>steps(int,start|end)</code>：指定了时间函数中的间隔数量（步长）。
<code>int</code> 指定函数的间隔数，该参数是一个正整数（大于 0）。 
<code>start|end</code> 表示动画是从时间段的开头连续（start 直接开始）还是末尾连续（end 戛然而止）。
</li>
<li class="md-list-item">
<code>cubic-bezier(n,n,n,n)</code>：在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
</li>
</ul>
</li>
<li class="md-list-item">
<code>animation-delay</code>（设置动画在启动前的延迟时间）：<code>time</code>。
</li>
<li class="md-list-item">
<code>animation-iteration-count</code>（定义动画的播放次数或无限次）：<code>n | infinite</code>。
</li>
<li class="md-list-item">
<code>animation-direction</code>（指定是否应该轮流反向播放动画。）：<code>normal | reverse | alternate | alternate-reverse | initial | inherit</code>。
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
<code>normal</code>：默认值。动画按正常播放。
</li>
<li class="md-list-item">
<code>reverse</code>：动画反向播放。
</li>
<li class="md-list-item">
<code>alternate</code>：动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。
</li>
<li class="md-list-item">
<code>alternate-reverse</code>：动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。
</li>
<li class="md-list-item">
<code>initial</code>：设置该属性为它的默认值。
</li>
<li class="md-list-item">
<code>inherit</code>：从父元素继承该属性。
</li>
</ul>
</li>
<li class="md-list-item">
<code>animation-fill-mode</code>（当动画不播放时、完成时，或有延迟未开始播放时，要应用到元素的样式）：<code>none | forwards | backwards | both | initial | inherit</code>。
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
<code>none</code>：默认值。动画在动画执行之前和之后不会应用任何样式到目标元素。
</li>
<li class="md-list-item">
<code>forwards</code>：在动画结束后（由 animation-iteration-count 决定），动画将应用该属性值。
</li>
<li class="md-list-item">
<code>backwards</code>：动画将应用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值。
</li>
<li class="md-list-item">
<code>both</code>：动画遵循 forwards 和 backwards 的规则。也就是说，动画会在两个方向上扩展动画属性。
</li>
<li class="md-list-item">
<code>initial</code>：设置该属性为它的默认值。
</li>
<li class="md-list-item">
<code>inherit</code>：从父元素继承该属性。
</li>
</ul>
</li>
<li class="md-list-item">
<code>animation-play-state</code>（指定动画是否正在运行或已暂停）：<code>paused | running</code>。
</li>
</ul>
</li>
</ul>
<div class="cnblogs_code">
<pre>/* 关键帧动画 */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.element {
animation: fadeIn 2s forwards;
}

@keyframes slide {
0% {
 transform: translateX(0);
}
100% {
 transform: translateX(100px);
}
}

.animate {
animation: slide 2s infinite;
}</pre>
</div>
 
<h3 class="md-end-block md-heading">7.9 CSS 的外边距折叠</h3>
 区块的上下外边距有时会合并（折叠）为单个边距，其大小为两个边距中的最大值（或如果它们相等，则仅为其中一个），这种行为称为外边距折叠。
 注意：有设定浮动和绝对定位的元素不会发生外边距折叠。
 有三种情况会形成外边距折叠：
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
相邻的兄弟元素
相邻的同级元素之间的外边距会被折叠（除非后面的元素需要清除之前的浮动）。
</li>
<li class="md-list-item">
没有内容将父元素和后代元素分开
如果没有设定边框（border）、内边距（padding）、行级（inline）内容，也没有创建区块格式化上下文或间隙来分隔块级元素的上边距 <code>margin-top</code> 与其内一个或多个子代块级元素的上边距 <code>margin-top</code>；
或者没有设定边框、内边距、行级内容、高度 <code>height</code> 或最小高度 <code>min-height</code> 来分隔块级元素的下边距 <code>margin-bottom</code> 与其内部的一个或多个后代后代块元素的下边距 <code>margin-bottom</code>，则会出现这些外边距的折叠，重叠部分最终会溢出到父代元素的外面。
</li>
<li class="md-list-item">
空的区块
如果块级元素没有设定边框、内边距、行级内容、高度<code>height</code>、最小高度<code>min-height</code>来分隔块级元素的上边距 <code>margin-top</code> 及其下边距 <code>margin-bottom</code>，则会出现其上下外边距的折叠。
</li>
</ul>
<h3 class="md-end-block md-heading">7.10 现代 CSS 新特性</h3>
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
滚动条样式：<code>scrollbar-gutter</code> 和 <code>scrollbar-color</code>。
</li>
<li class="md-list-item">
Ruby 排版：<code>ruby-align</code> 和 <code>ruby-position</code>（用于注音文本）。
</li>
<li class="md-list-item">
锚点定位（Anchor Positioning）：简化动态定位（如弹出框）。
</li>
<li class="md-list-item">
嵌套（Nesting）：支持类似 Sass 的嵌套语法（需浏览器支持）。
</li>
</ul>
 
<div class="md-hr md-end-block"><hr></div>
 
<h2 class="md-end-block md-heading">8 现代 CSS 技术</h2>
<h3 class="md-end-block md-heading">8.1 CSS 预处理器</h3>
如 Sass/Less，支持嵌套、变量、混合宏：
<div class="cnblogs_code">
<pre>$primary: #3498db;
.button {
background: $primary;
&:hover { background: darken($primary, 10%); }
}</pre>
</div>
 
<h3 class="md-end-block md-heading">8.2 CSS 框架</h3>
Bootstrap、Tailwind CSS 等提供预设组件与工具类。
<h3 class="md-end-block md-heading">8.3 CSS-in-JS</h3>
在 JavaScript 中编写 CSS（如Styled Components）。
 
<div class="md-hr md-end-block"><hr></div>
 
<h2 class="md-end-block md-heading">9 学习实践建议</h2>
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
使用外部样式表：提升代码复用率与可维护性。
</li>
<li class="md-list-item">
避免滥用<code>!important</code>：防止优先级混乱。
</li>
<li class="md-list-item">
采用CSS预处理器：如 Sass/Less，支持变量、嵌套等高级功能。
</li>
<li class="md-list-item">
命名规范：使用BEM（Block__Element--Modifier）提高可维护性。
</li>
<li class="md-list-item">
性能优化：
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
减少选择器复杂度（避免<code>div > ul > li</code>）
</li>
<li class="md-list-item">
使用 <code>transform</code>/<code>opacity</code> 触发GPU加速动画
</li>
</ul>
</li>
<li class="md-list-item">
浏览器兼容性：通过 Autoprefixer 等工具自动添加厂商前缀（如<code>-webkit-</code>）。
</li>
</ul>
 
<div class="md-hr md-end-block"><hr></div>
 
<h2 class="md-end-block md-heading">10 学习资源</h2>
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
文档教程
MDN CSS教程（官方文档）（developer.mozilla.org）
CSS 教程 | 菜鸟教程
</li>
<li class="md-list-item">
在线工具
CSS Tricks指南（实战技巧和布局示例）（css-tricks.com）
</li>
<li class="md-list-item">
进阶技巧与案例
Flexbox小游戏（交互式Flexbox练习游戏）（flexboxfroggy.com）
Grid小游戏（Grid布局学习工具)（cssgridgarden.com）
anchoreum
</li>
<li class="md-list-item">
网格布局工具
CSS Grid Generator (Drag & Drop)
</li>
<li class="md-list-item">
框架
Tailwind CSS（实用优先的 CSS 框架）
Bootstrap（响应式 UI 组件库）
</li>
<li class="md-list-item">
书籍
《CSS 基础教程》（Simon Collison）
《CSS 权威指南》（Eric A. Meyer）
</li>
</ul>
 
<div class="md-hr md-end-block"><hr></div>
 
<h2 class="md-end-block md-heading">11 总结</h2>
 CSS 是前端开发的基石之一，与 HTML（结构）、JavaScript（行为）并称网页三剑客。
 CSS 作为网页设计的核心语言，通过简洁的语法实现对网页样式的精细控制。CSS 通过层叠、继承等机制实现样式与结构的分离，显著提升开发效率与用户体验。从基础的文本美化到复杂的响应式布局，其功能覆盖现代网页开发的全场景。掌握选择器、盒模型、布局技术等要点，是构建高性能、可维护网站的关键。
 CSS 通过推动响应式设计与动态效果的普及，不断演进（如 CSS3 模块化、变量 <code>--var()</code>、容器查询 <code>@container</code>），持续提升开发者对样式的底层控制能力，是构建现代 Web 界面的基石，是构建现代 Web 界面不可或缺的工具。
 
<div class="md-hr md-end-block"><hr></div>
 
<h2 class="md-end-block md-heading">内容目录</h2>
<div class="md-toc md-end-block md-focus">
Web-CSS-Study
1 概述
1.1 CSS 的基本概念1.2 CSS 的发展历程1.3 CSS 的版本演进1.4 CSS 的应用场景1.5 CSS 的核心特点1.6 CSS 的功能作用1.7 CSS 的工作原理1.8 CSS 的优势与局限
2 CSS 引入方式与优先级
2.1 外部样式表（最常用）2.2 内部样式表2.3 内联样式表2.4 样式表的优先级
3 CSS 的基础语法
3.1 CSS 样式规则3.2 CSS 样式选择器3.3 CSS 样式声明块3.4 CSS 的 at 规则3.5 CSS 的语法示例
4 核心组成
4.1 盒模型（Box Model）4.2 布局系统4.3 响应式设计
5 常用 CSS 样式
5.1 文本相关样式5.2 盒模型相关样式5.3 显示相关样式5.4 背景相关样式5.5 链接列表表格样式5.6 元素尺寸样式5.7 溢出和浮动样式
6 颜色与单位
6.1 颜色值6.2 单位
7 关键特性
7.1 优先级（Specificity）7.2 继承（Inheritance）7.3 层叠（Cascading）7.4 格式化上下文（Formatting Context）7.5 变量（Custom Properties）
7.6 函数与运算7.7 逻辑属性（Logical Properties）7.8 动画与过渡7.9 CSS 的外边距折叠7.10 现代 CSS 新特性
8 现代 CSS 技术
8.1 CSS 预处理器8.2 CSS 框架8.3 CSS-in-JS
9 学习实践建议
10 学习资源
11 总结
内容目录
</div>
 
<div class="md-hr md-end-block"><hr></div>
 
迪欧IT——dio智能科技
<img src="https://img2024.cnblogs.com/blog/1585225/202508/1585225-20250824155620035-901004387.png">
 
<img src="https://img2024.cnblogs.com/blog/1585225/202508/1585225-20250824155626060-2130787216.png">
 
 
<div> </div>
 
<div class="md-hr md-end-block"> </div>

</div>
<div id="MySignature" role="contentinfo">
本文来自博客园，作者：jason-wrj，更多请查看：www.dioit.com，转载请注明原文链接：https://www.cnblogs.com/jason-wrj/p/19055519 
来源：https://www.cnblogs.com/jason-wrj/p/19055519

頁: [1]

琼殿技术论坛's Archiver

CSS学习