这是我参与[第五届青训营]笔记创作活动的第二天

本课堂重点内容：

CSS 代码构成
CSS 使用方法
CSS流程 - 选择器组、文本渲染
调试 CSS
CSS 选择器的特异度
CSS 继承
CSS 求值过程解析
CSS 布局方式

详细知识点介绍：

何为css：

css是用来定义页面元素的样式，主要用以设置字体和颜色、设置位置和大小、添加动画效果等。

什么是伪类：

不基于标签和属性定位元素，伪类分状态伪类和结构性伪类。

组合：

直接组合：同时满足a和b，示例 input:focus

后代组合：选中b，通过它是a的子孙，示例 nav a

亲子组合：选中b，如果它是a的第一个子元素，示例 section > p

兄弟选择器：选中b，如果它在a后且和a同级，示例 h2 ~ p

相邻选择器：选中b，如果它紧跟在a后面，示例 h2 + p

继承

某些属性会自动继承其父元素的计算值，除非显示指定一个值

布局相关技术

常规流：行级、块级、表格布局、FlexBox、Grid布局浮动 绝对定位

display 属性：

block：块级盒子、inline：行级盒子、inline-block：本身是行级，可以放在行盒中，可以设置宽高，作为一个整体不会被拆散成多行

常规流：

根元素、浮动和绝对定位的元素会脱离常规流
其它元素都在常规流之内
常规流中的盒子，在某种排版上下文中参与布局

何为 FlexBox：

一种新的排版上下文
它可以控制子级盒子的：摆放流向、摆放顺序、盒子宽度和高度、水平和垂直方向的对齐、是否允许拆行

Flexibility

可以设置子项的弹性：当容器有剩余空间时，会伸展；容器不够时，会收缩。
flex-grow 有剩余空间时的伸展能力
flex-shrink 容器空间不足时收缩的能力
flex-basis 没有伸展或收缩时的基础长度

position 属性

static 默认值
relative 相对定位，相对于本身原本位置进行偏移，但不脱离文档流
absolute 绝对定位，相对与非 static 祖先元素定位
fixed 相对于视口绝对定位

实践练习例子：

font字体中使用 Web Fonts

 @font-face {
    font-family: "Megrim";
    src: url(https://fonts.gstatic.com/s/megrim/v11/46kulbz5WjvLqJZVam_hVUdI1w.woff2) format('woff2');
  }

划分网络

grid-template-columns: 100px 100px 200px; // 分为三份，第一第二分占200px，第三个占200px
grid-template-rows: 100px 100px

网格区域

.a {
  grid-row-start: 1;
  grid-column-start: 1;
  grid-row-end: 3;
  grid-column-end: 3;
}

// 简写
.a {
  grid-area: 1/1/3/3;
}

个人课后总结：

position属性中的绝对和相对定位容易混淆。
Gird布局较难，需课后查阅相关文档

CSS理解 | 青训营笔记