理解 CSS｜ 青训营笔记

这是我参与「第五届青训营 」笔记创作活动的第2天

一、本堂课重点内容：

1.css基本原理

• CSS 代码构成
• CSS 使用方法
• CSS 流程之选择器组

2.深入css

• CSS 布局方式及相关技术
• CSS 盒模型 - 行级
• CSS 盒模型 - 块级

二、详细知识点介绍：

1.CSS 代码构成

css代码主要是由选择器Selector、选择器Property、属性值、声明...等等组成

2.CSS 使用方法
css使用方法有“外链”、“嵌入”，“内联”这三种方法

• 内联

• 嵌入

• 外链

3.CSS 流程之选择器组

• 选择器 （常用的选择器）

1、元素选择器 ： 标签名{}

2、id选择器 ：#id属性值{}

3、类选择器 ：.class属性值{}

4、通配选择器 ：*{}

• 选择器（组合）

4. CSS 布局方式及相关技术

示意图

• with

• height

• padding

• boder

• margin

5. CSS 盒模型 - 行级&块级

• 行级

• 块级

• 排版方式（BFC）
• 排版方式（Flex BOX）

• 排版方式（Gird）

三、课后个人总结：

• 本章有什么知识点不容易掌握？
  这章节主要是讲了css，学完之后感觉基础使用css还是蛮简单，但是对于选择器，特别是复合选择器那里不太容易掌握，然后对于布局方面也是有点不太好掌握，在初学的时候，选择什么布局方式就很重要，不然之后在填充内容的时候，整个页面就会看起来杂乱，没有美观性。