理解CSS | 青训营笔记
这是我参与「第四届青训营」笔记创作活动的第1天
一、CSS是什么？
- 用来定义页面元素的样式
- 设置字体和颜色
div { color : pink; font-size : 20px; }- 设置位置和大小
div { width: 100px; height: 100px; margin: 0 auto; }- 添加动画效果
@keyframes move { 0% { transform: translate(0,0); } 100% { transform: translate(500px,0); } } div { width: 100px; height: 100px; background-color: pink; animation: move 4s; }
二、CSS是如何工作的？
首先加载HTML并解析HTML，生成DOM树，加载CSS。解析后附加到DOM树上渲染出一个页面。
DOM是文档对象化模型（Document Object Model）的简称。DOM Tree是指通过DOM将HTML页面进行解析，并生成的HTML tree树状结构和对应访问方法
三、CSS选择器组合
| 名称 | 语法 | 说明 | 示例 |
|---|---|---|---|
| 直接组合 | AB | 满足A同时满足B | input:focus |
| 后代组合 | A B | 选中B,如果它是A的子孙 | nav a |
| 亲子组合 | A>B | 选中B，如果它是A的子元素 | nav > a |
| 兄弟选择器 | A~B | 选中B,如果它在A后且和A同级 | nav ~ a |
| 相邻选择器 | A+B | 选中B,如果它紧跟在A后面 | nav + a |
四、块级排版上下文(BFC)
创建BFC的容器有哪些？
- 根元素
- 浮动、绝对定位、行内块元素
- Flex子项和Grid子项
- overflow值不是visible的块盒
- display:flow-root
BFC内的排版规则
- 盒子重上到下摆放
- 垂直margin合并
- BFC内盒子的margin不会与外面的合并
- BFC不会和浮动元素重叠
Flex Box 是什么？
- 一种新的排版上下文
- 它可以控制子级盒子的：
- 摆放的流向
- 摆放顺序
- 盒子宽度和高度
- 水平和垂直方向的对其
- 是否允许折行
五、定位
- relative : 还是标准流，占有原来的位置,可以进行定位。
- absolut ： 脱离标准流，不占有原来的位置，相对于最近的非static祖先定位，口诀：子绝父相。
- fixed ： 固定定位，脱离标准流，不占有原来位置，相对于窗口来定位。
六、学习CSS的建议
要充分利用网络资源，学习用法和规范，善于使用浏览器开发工具，坚持学习新特性。
七、课程观后感
能更好的了解和复习css中的方法以及属性值的含义，更好的了解和学习CSS的新特性。 为了更好的学习CSS的相关内容，还得继续加油努力学习🍺🍺
