这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天
CSS 作为前端技术栈中关键一环，对页面元素及样式呈现起到了直接作用。
什么是“CSS 代码构成”、“CSS 使用方法”、“CSS 流程之选择器组、文本渲染“和”调试 CSS“？
- "CSS 代码构成" : CSS代码由选择器和属性组成，选择器是用来选择页面中的某个元素或元素组，属性是用来描述元素的样式。
- "CSS 使用方法" : CSS 可以通过三种方式来使用，分别是内联样式、内部样式表、外部样式表。
- "CSS 流程之选择器组、文本渲染" : CSS 选择器组是指一组用于定位页面元素的选择器。文本渲染是指文本的样式和布局的渲染过程。
- "调试 CSS" : 调试 CSS 是指使用浏览器的开发工具来查看和修改页面样式。常见的调试 CSS 的方法包括使用浏览器的检查元素工具、查看样式继承关系、使用 CSS 预处理器等。
什么是“CSS 选择器的特异度”、“CSS 继承”、“CSS 求值过程解析”和“CSS 布局方式及相关技术”？
- "CSS 选择器的特异度" : 特异度是指 CSS 选择器的优先级，用于确定哪个样式规则应用于页面元素。特异性越高，规则的优先级越高。
- "CSS 继承" : CSS 继承是指子元素继承父元素的样式属性。默认情况下，只有部分 CSS 属性是可继承的。
- "CSS 求值过程解析" : CSS 求值过程是指浏览器如何计算页面元素的样式值。这个过程包括解析样式表、计算特异度、解析继承和最终应用样式。
- "CSS 布局方式及相关技术" : CSS 布局方式包括块级布局和行内布局，并且可以使用相关技术来实现复杂布局，如浮动、定位、弹性盒模型、网格布局等。
CSS盒模型中“行级”与“块级”布局的基本定义、各自特征、工作属性和排版规则：
- "行级布局" : 行级布局是指文本或其他行级元素纵向排列的布局方式，它们会在一行中排列。行级元素的特征是不会占据整行空间，只占用自己的空间。常见的行级元素有文本、图片等。行级元素可以使用 display: inline 或 display: inline-block 属性来定义，它们不会换行，并且它们的宽度和高度不会影响布局。
- "块级布局" : 块级布局是指块级元素纵向排列的布局方式，它们会独占一行。块级元素的特征是会占据整行空间，并且会换行。常见的块级元素有 div、p、header、footer等。块级元素可以使用 display: block 属性来定义，它们会换行，并且它们的宽度和高度会影响布局。
块级元素有以下特性：
- 默认占据一整行
- 默认宽度为父元素的宽度
- 默认高度随元素的内容而定
- 默认不能与其它元素在同一行显示
- 默认 margin 和 padding 都有默认值
行级元素有以下特性：
- 默认不占据整行空间，只占据自身的空间
- 默认宽度随元素的内容而定
- 默认高度随字体大小而定
- 默认可以与其它元素在同一行显示
- 默认 margin 和 padding 只有左右有默认值
在排版布局中，我们通常使用块级元素来组织页面的整体结构，然后使用行级元素来排列文本和图片等元素，以达到更好的布局效果。
有些时候，我们需要将行级元素转换为块级元素或者将块级元素转换为行级元素，可以使用 CSS 的 display 属性来实现，如将 display 设置为 block 或 inline-block 可以将行级元素转换为块级元素，将 display 设置为 inline 可以将块级元素转换为行级元素。
在使用块级元素和行级元素进行布局时，需要注意以下几点：
- 块级元素会占据整个行空间，因此需要注意其宽度和高度的设置。
- 行级元素不会占据整个行空间，因此需要注意文本和图片等元素的对齐方式。
- 块级元素和行级元素的 margin 和 padding 的默认值不同，需要注意其对布局的影响。
在实际开发中，我们需要根据项目需求来灵活使用块级元素和行级元素来进行布局。需要了解它们各自的特点和规则，并结合具体场景来进行选择和操作。
总结一下，块级元素和行级元素都是 CSS 盒模型中重要的一部分，它们在页面布局中都有重要作用，块级元素适合建立页面结构，而行级元素适合排列文本和图片。在使用这两种元素进行布局时，需要注意它们各自的特点和规则，并灵活运用来实现合理的页面布局。
