这是我参与「第1届 前端训练营」笔记创作活动的第7天
一、重点内容介绍🎈
- 基础知识
- 布局和定位
- CSS生态相关
二、详细知识点🍗
2.1 基础知识
1、层叠（cascading）
- 样式表就是规则声明的集合，在集合中不可避免的会出现声明冲突，层叠就是用来解决规则产生冲突的规则。
- 层叠三大规则
1、样式表来源
2、选择器优先级
3、源码位置
2、选择器
选择器有哪些：
- 基础选择器
#id―—ID选择器。
Tagname—类型选择器或者标签选择器。
.class――类选择器。
*――通用选择器，该选择器匹配所有元素。 - 组合器
子组合器(>)， 匹配的目标元素是其他元素的直接后代。如: .parent >.child。
相邻兄弟组合器(+)， 匹配的目标元素紧跟在其他元素后面。如:p +h2。
通用兄弟组合器(~)， 匹配所有跟随在指定元素之后的兄弟元素，如: li.active ~li。 - 复合选择器
多个基础选择器可以连起来使用，如:h1.page-header。 - 属性选择器
通过约束属性值，div[data-title="aaa"] - 伪类选择器
选中处于某个特定状态或相对于其父级或兄弟元素的位置的元素。如：first-child ，：hover 匹配在文档中没有直接对应HTML元素的特定部分，或插入内容。如h2::first-letter, div::before 逻辑选择器 - 较新的选择器:
is( ) :has() :where() :not()
2.2 布局和定位
常规流布局，也被称为文档流布局，是浏览器默认的 CSS 布局方式。
在常规流布局中，元素按照它们在 HTML 代码中的顺序自上而下、自左向右地排列。常规流布局主要包括两类元素：块级元素和行内元素。
块级元素：
- 块级元素会独占一行，即它们会从上到下排列。
- 块级元素默认的宽度为其父容器的宽度，高度取决于其内容。
- 常见的块级元素有：
<div>、<p>、<h1>-<h6>、<ul>、<ol>、<li>等。
行内元素：
- 行内元素会在同一行内从左到右排列，直到容器宽度不足时才会换行。
- 行内元素的宽度和高度取决于其内容，而不是父容器的尺寸。
- 常见的行内元素有：
<span>、<a>、<strong>、<em>、<img>等。
2.3 CSS生态相关
语言增强：预处理器、后处理器 工程架构：CSS模块化、CSS-ln-Js、Atomic CSS
语言增强
- CSS 后处理器是一种工具，它在 CSS 预处理器处理生成的 CSS 代码之后运行。其主要目的是优化和改进最终的 CSS 输出，以提高性能、浏览器兼容性和代码可维护性。
- CSS 后处理器使用 JavaScript 插件（或其他编程语言编写的工具）来处理 CSS，这些插件可以解决不同的问题或执行特定任务。
工程架构
- CSS Module 就是为了解决全局污染问题出现的方案，解决CSS全局污染，本质上是保证样式集合对应的选择器是唯一的。
三、思考与总结💡
通过今天的学习，我了解了很多关于CSS基础知识, CSS布局和定位, CSS生态相关的知识。
