第01章 CSS技术体系结构

右侧导航 教程所有章 1.1 CSS体系结构概述 1.2 CSS思维方式 1.3 CSS知识点列表 1.4 CSS入门项目目标 1.5 MDN与w3c 1.6 教程特点 1.7 交流群 1.8 本章小结 1.9 课后练习 下一章 第02章 开发环境搭建
下一节  CSS思维方式❯

第1章 CSS体系结构概述

原创声明。未经许可，不得转载，作者：小步教程。

从零开始学习CSS技术。

本章主要内容：体系结构概述、CSS思维方式、知识点概述、项目目标、MDN与w3c。


单纯学CSS属性无法掌握CSS技术。

img

CSS技术学习常见痛点：

（1）学了很多CSS属性，还是无法形成一套有效的页面布局知识体系。

（2）做了多个项目，CSS编码思路仍然混乱，调试没有形成一套系统的方法，或者认为CSS无法调试。

（3）使用CSS很久，还是无法完全理解某些知识点，也无法准确表达，“反正就这样用”。

（4）初学者遇到问题不知道如何提问，只能问“这个显示怎么不正常”。


CSS技术的根本是布局模型。本教程从六方面内容，体系的、透彻的讲解CSS基础，包括六方面内容：

（1）语法包含基础语法与语法级特性，解决“属性值是什么”，没有设置CSS属性或设置CSS属性都不一定是最终应用属性值。

（2）模型与规范规则是CSS技术的根本，解决“属性值如何显示”，每种模型内部包含相应规范规则，模型之间存在关联，CSS属性服务于模型，CSS属性存在于各项规范规则。

（3）浏览器工作原理描述页面显示过程，开发者工具能够查看每一步骤的结果，两者共同解决“页面显示过程是什么与如何调试每个步骤”。

（4）开发者工具提供5种基础面板对应查看浏览器工作原理各步骤的结果。

（5）项目开发包括明确的设计方法与编码步骤，同时综合运用上述内容，整理各种场景与设计实现方法。

（6）布局基本概念需要准确理解，大多概念准确表达CSS技术的设计意图与开发人员的设计方法。

综合所述，CSS属性服务于模型，模型是根本，规范规则是细节，语法是基础，开发者工具是调试利器，浏览器工作原理是完全掌握开发者工具的基础，大多数的布局基本概念代表着分析与设计方法。


1.1.1 教程大纲

img

第1篇介绍体系结构与开发环境搭建，第2篇对应体系结构的“一、语法”，第3篇对应体系结构的“二、模型与规范规则”，第4章对应体系结构的“六、项目开发”，体系结构的“三、浏览器工作原理”、“四、开发者工具调试”、“五、关键概念”这三部分内容穿插于各章节。


1.1.2 常用布局模型

模型体系结构示意图

img


常用布局模型包括：盒子模型、display模型、flow模型、BFC模型、IFC模型、定位模型等。

盒子模型是众多模型的基本单元，display模型是众多模型的顶级模型，流式布局模型是众多模型的枢纽。本教程不单独讲解CSS属性，具体CSS属性的学习放在相应模型讲解。


（1）盒子模型

img

（2）display模型

img

（3）流式布局与BFC模型

img

BFC模型之margin折叠

img

（4）IFC模型

IFC完整模型

img

bounds模型

img

（5）定位模型

absolute定位

img

float定位

img

（6）flex模型

img


1.1.3 模型的CSS属性

（1）盒子模型。width、height、padding、border、margin、box-sizing。

（2）display模型。display、<display-outside>、<display-inside>。

（3）流式布局。<display-inside>: flow。

（4）BFC模型。<display-outside>: block。

（5）IFC模型与bounds模型。<display-outside>: inline、font-family、font-size、line-height、vertical-align。

（6）定位模型。position、float，坐标属性left、top、right、bottom。

（7）flex模型。display: flex、flex-direction、flex-grow、flex-shrink、flex-basis、flex、flex-wrap、flex-flow、justify-content、align-items、align-content、row-gap、column-gap、gap、align-self、order。

（8）溢出模型。overflow-x、overflow-y、overflow、text-overflow。

（9）层叠模型。z-index、position。

（10）其它模型与属性略。

一个属性可能服务于多个模型，一个元素可能同时属于多个模型。


1.1.4 五个基础语法

（1）标签

<开始标签>标签内容体</结束标签>

（2）标签属性

<标签 标签属性1="值1" 标签属性2="值2" …>标签内容体</标签>

（3）CSS属性

<标签 style="CSS属性1:值1;CSS属性2:值2;…CSS属性n:值n;">标签内容体</标签>

（4）选择器

选择器名{ /*样式定义*/ }

（5）CSS引入方式

内嵌样式

<标签 style="CSS属性1:值1;CSS属性2:值2;…CSS属性n:值n;">标签内容体</标签>

内部样式

<body>
<style>
选择器名称{
   CSS属性1:值1;
   …
   CSS属性n:值n;
}
</style>
</body>

外部样式

<link rel="stylesheet" href="test.css">

1.1.5 层叠性的计算过程

img

CSS语法级特性—层叠性包括8类值，以及对应6个子特性：CSS属性初始默认性、标签样式默认性、继承性、选择器优先级（覆盖性）、计算性（绝对化、约束化）、无效性。这些特性与语法一样重要，它们对应CSS属性的最终结果值的生成。


1.1.6 浏览器工作原理

img

具体过程包括：请求响应、解析HTML代码、解析CSS代码、合并生成盒子树（渲染树）、layout计算、paint绘制。


1.1.7 开发者工具调试

img

浏览器工作原理的6个步骤结果分别对应开发者工具的5个调试面板。

（1）网络面板。查看请求响应。

img

（2）元素面板。解析元素结构。

img

（3）样式面板。解析匹配样式。

img

（4）计算样式面板。查看层叠性处理后的最终实际值。

img

（5）盒子的页面显示。

img


1.1.8 项目开发

（1）页面3要素。包括：结构、样式、交互。

img

HTML代码代表的元素结构是页面的骨架与基础，CSS代码代表的样式设计合理的前提是合理的结构，JS代码代表的交互设计合理的前提是合理的结构与合理的样式。

（2）元素结构示意图示例

img

元素结构示意图用于不写HTML与CSS代码就能进行分析设计，方便教学。


下一节  CSS思维方式❯