这是我参与「第五届青训营 」伴学笔记创作活动的第 8 天，以下是我根据课程内容整理的笔记。
课堂笔记
课程重点
- Flex布局
- Grid布局
- position
笔记内容
Flex布局中的各属性
Flexibility
-
可以设置子项的弹性：当容器有剩余空间时，会伸展；容器空间不够时，会收缩。
-
flex-grow有剩余空间时的伸展能力
-
flex-shrink容器空间不足时收缩的能力
-
flex-basis没有伸展或收缩时的基础长度
flex
| flex:1 | flex-grow:1 |
|---|---|
| flex:100px | flex-basis:100px |
| flex:2 1 | flex-grow:2;flex-shrink:1 |
| flex:1 100px | flex-grow:1;flex-basis:100px |
| flex:2 0 100px | flex-grow:2;flex-shrink:0;flex-basis:100px |
| flex:auto | flex:1 1 auto |
| flex:none | flex:00 auto |
Grid布局
display:grid
-
display:grid使元素生成一个块级的Grid容器
-
使用grid-template相关属性将容器划分为网格
-
设置每一个子项占哪些行列
position属性
| static | 默认值，非定位元素 |
|---|---|
| relative | 相对自身原本位置偏移，不脱离文档流 |
| absolute | 绝对定位，相对非static祖先元素定位 |
| fixed | 相对于视口绝对定位 |
-
relative
-
在常规流里面布局
-
相对于自己本应该在的位置进行偏移
-
使用top、left、bottom、right设置偏移长度
-
流内其它元素当它没有偏移一样布局
-
-
absolute
-
脱离常规流
-
相对于最近的非static祖先定位
-
不会对流内元素布局造成影响
-
-
fixed
-
生成固定定位的元素，相对于浏览器窗口进行定位。
-
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
-
-
static
-默认值。
-没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
学习CSS的几点建议
-
充分利用MDN和W3CCSS规范
-
保持好奇心，善用览器的开发者工具
-
持续学习，CSS新特性还在不断出现
结语
通过本次课程的学习，真的收获到了许多，以前对一些比较模糊的知识点也逐渐的清晰了起来。
