由于昨天个人原因，没来及更新笔记，今天重新补充昨天学习到的内容。这是我参与「第五届青训营 」伴学笔记创作活动的第2天。 今天的笔记是关于了解CSS。
知识点：
- CSS的使用方法
- CSS流程选择器组、文本渲染
- CSS布局方式及相关技术
- CSS盒模型（块级/行级）
如何使用CSS
- 外链(创建.css文件来编写css样式代码，通过link标签导入）
- 嵌入（建立style标签编写样式）
- 内联（直接放在HTML标签中，用style属性添加样式）
- 例：
CSS选择器
- 通配符选择器（*）
- 标签选择器（div、p...)
- id选择器（id值唯一）
- 类选择器（class）
- 属性选择器
- 伪类选择器
- 结构伪类（ol/ul>li)
2. 状态伪类
CSS布局方式及相关技术
- 常规流（行级，块级，表格布局，FlexBox,Grid布局）
- 浮动
- 绝对定位
- 盒子模型
- content-box(Content(height+width)+padding+border+margin) 默认
- margin：auto (水平居中）
- margin：collapse（外边距折叠）
- overflow（hidden:溢出隐藏；scroll：滚动条）
- box-sizing：border-box (Content(width+heght+padding+border)+margin)
CSS盒模型（块级/行级）
display属性
- block 块级盒子
- inline 行级盒子
- inline-block 本身行级，可以放在行盒中；可以设置宽高；作为一个整体不会被拆散成多行
- none 排版时完全被忽略
flex Box
- justify-content(横）
- align-items（竖）
- flex-grow （占比）
Grid 布局
grid-template 将容器划分为网格
postion
- postion：relative
- 在常规流里面布局
- 相对于自己本身位置移动
- 使用top、left、bottom、right设置偏移
- 流内其他元素当它没有偏移一样布局
- postion:absolute
- 脱离常规流
- 相对于最近非static祖先定位
- 不会对流内元素布局造成影响
- postion:fixed 相对于窗口固定定位（例如：nav导航栏）
- postion：static 黏性定位
