一、学习目的

本次课程学习部分CSS知识模块，如选择器、布局、层叠上下文等，并学习一些CSS生态相关的知识，形成一个简明的知识脉络。

二、学习知识点

01基础知识

层叠、优先级

优先程度递减

基础选择器	ID选择器、标签选择器、类选择器、通用选择器
属性选择器	通过约束属性值，div[data-title="aaa"]
伪类选择器	选中处于某个特定状态或相对于其父级或兄弟元素的位置的元素
伪元素选择器	匹配在文档中没有直接对应HTML元素的特定部分，或插入内容
逻辑选择器	较新的选择器，is()、has()、where()

• 选择器尽量少用ID

• 类选择器(class)好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用。

• id选择器好比人的身份证号码，全中国是唯一的，不得重复。

• id选择器和类选择器最大的不同在于使用次数上。

• 类选择器在修改样式中用的最多，id选择器一般用于页面唯一性的元素上，经常和JavaScript搭配使用。

继承

盒模型

浏览器根据视觉格式化模型，将所有元素表示为盒子模型，css通过盒模型做layout。

Margin(外边距)	清除边框外的区域，外边距是透明的
Border(边框)	围绕在内边距和内容外的边框
Padding(内边距)	清除内容周围的区域，内边距是透明的
Content(内容)	盒子的内容，显示文本和图像

02布局

常规流布局

• 外部显示类型为block | 块级盒子 | display：block、flex、grid、table... | | --- | --- |
• 外部显示类型为inline | 内联级盒子 | display：inline、inline-block、inline-flex... |

块级格式化上下文BFC

BFC(block formatting context)块级格式化上下文，它是页面中的一块渲染区域，并且有一套属于自己的渲染规则，它决定了元素如何对齐内容进行布局，以及与其他元素的关系和相互作用。 当涉及到可视化布局的时候，BFC提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。

BFC是一个独立的布局环境，BFC内部的元素布局与外部互不影响

外边距塌陷

会产生外边距塌陷的情况：

• 两个兄弟元素之间相邻的上下外边距
• 父子元素之间相邻的上下外边距
• 内容为空元素自己上下外边距相邻

消除外边距塌陷的方法：

• 在两个相邻的上下边距之间增加border、padding或者内联元素，使之不相邻
• 在父子元素重叠时，除了上述方法，还可以设置父元素为BFC，使得父子不在同级BFC中

grid和flex布局的使用策略

flex	grid
一维布局	二维布局
基于内容	基于布局
浏览器兼容性更好	2017年后浏览器的版本普遍支持

• 大面积或整体布局 推荐使用grid布局
• 小面积或组件中，或grid item中可以使用flex做灵活布局

定位position

为了可以在文档流的基础上，让元素移动，做出更灵活的改变。当position属性的取值非static的时候，可以使用top，right、bottom，left对其进行定位。

relative	元素相对于自己原来在文档流中的位置进行定位，但是原来文档流的空间还在
absolute	元素被移出正常文档流，且没有预留空间，相对于最近的非static定位祖先元素的进行定位
fixed	元素被移出正常文档流，且没有预留空间，相对于屏幕视口进行定位，屏幕滚动也不会改变位置
sticky	元素相对它的最近滚动祖先的视口（scrollport)定位

03层叠上下文

层叠顺序不仅指不同的层叠上下文的顺序，同一个层叠上下文内，元素间也有顺序：

• z-index只在同一个层叠上下文内比较
• 子元素的z-index无法超越父元素的z-index显示顺序
• 使用css变量或者预处理语言的变量，管理z-index的值；将预设间隔设置10或100，方便后续的插入

04响应式设计

响应式设计推荐遵循的原则

• 优先使用流式布局，如百分比、flex、grid等
• 使用响应式图片，匹配尺寸，节省带宽
• 使用媒体查询为不同的设备类型做适配
• 给移动端设备设置简单、统一的视口
• 使用相对长度，em、rem、vw做为长度度量

三、学习总结

在本次学习中，延续上一节前端语言串讲的学习，对其中css相关知识进行详细学习，从而更好的运用css实现展现。课程学习中先从它的基本概述开始了解，进而学习了布局、层叠上下文等，除此我也通过自主练习项目进行运用练习巩固知识，将知识内容与实际相链接。通过本次也让我的知识体系更加全面细节，对使用也有一定的规范化。