这是我参与「第五届青训营」伴学笔记创作活动的第3天
一、 本课重点
- 理解CSS相关语法
- 掌握CSS中的盒子
二、CSS知识
1.选择器特异度
2.继承
- 某些属性会自动继承其父元素的计算值，除非显式指定一个值。
- 显式继承
3.初始值
-
CSS中，每个属性都有一个初始值
- background-color的初始值为transparent
- margin-left的初始值为0
-
可以使用initial关键字显式重置为初始值
- background-color：initial
4.CSS求值过程
CodePen - 青训营/CSS/取值过程 (cdpn.io)
5.布局（layout）
布局是什么？
- 确定内容的大小和位置的算法
- 依据元素、容器、兄弟节点和内容等信息来计算
布局相关技术
6.盒子
（1） width
- 指定content box宽度
- 取值为长度、百分数、auto
- auto由浏览器根据其它属性确定
- 百分数相对于容器的content box宽度
（2） height
- 指定content box高度
- 指定content box高度
- 取值为长度、百分数、auto
- auto取值由内容计算得来
- 百分数相对于容器的content box高度
- 容器有指定的高度时，百分数才生效
（3）padding
- 指定元素四个方向的内边距
- 百分数相对于容器宽度
（4）border
用来指定容器边框样式、粗细和颜色
-
三种属性
- border-width
- border-style
- border-color
-
四个方向
- border-top
- boder-right
- border-bottom
- border-left
（5）margin
- 指定元素四个方向的外边距
- 取值可以是长度、百分比、auto
- 百分数相对于容器宽度
- 使用
margin：auto水平居中 - 外边距折叠：margin collapse
使用margin水平居中
7.盒模型布局规则
8.display属性
9. 行级排版上下文
-
Inline Formatting Context (IFC)
-
只包含行级盒子的容器会创建一个IFC
-
IFC内的排版规则
- 盒子在一-行内水平摆放
- 一行放不下时，换行显示
- text-align决定-行内盒子的水平对齐
- vertical-align决定一个盒子 在行内的垂直对齐
- 避开浮动(float)元素*
10.块级排版上下文
-
Bock Formatting Context (BFC)
-
某些容器会创建一个BFC
- 根元素
- 浮动、绝对定位、inline-block
- Flex子项和Grid子项
- overflow值不是visible的块盒
- display: flow-root;
11.BFC内的排版规则
- 盒子从上到下摆放
- 垂直margin合并
- BFC内盒子的margin不会与外面的合并
- BFC不会和浮动元素重叠
12.什么是Flex Box
-
一种新的排版上下文
-
它可以控制子级盒子的:
- 摆放的流向(→ ← ↑ ↓)
- 摆放顺序
- 盒子宽度和高度
- 水平和垂直方向的对齐
- 是否允许折行
13.Flexibility
- 可以设置子项的弹性:当容器有剩余空间时，会伸展;容器空间不够时，会收缩。
- flex-grow有剩余空间时的伸展能力
- flex-shrink容器空间不足时收缩的能力
- flex-basis没有伸展或收缩时的基础长度
Flex-grow：CodePen Embed - 青训营/CSS/flex-grow
Flex-shrink：CodePen Embed - 青训营/CSS/flex-shrink
14.GRid布局
- display：grid
- 划分网络： CodePen - 青训营/CSS/grid-template (cdpn.io)
- grid line网格线：CodePen - 青训营/CSS/grid-area (cdpn.io)
15.position属性
position：relative
- 在常规流里布局
- 相对于自己本应该的位置进行偏移
- 使用top、left、bottom、right设置偏移长度
- 流内其他元素当他没有偏移一样布局
position：absolute
- 脱离常规流
- 相对于非static祖先定位
- 不会对流内元素造成影响
三、本课小结
本节课我们学习了CSS更深层次的语法，相对上篇了解CSS中的语法来说，本节课的语法更难、更细，对于初学者来说，掌握有一定的困难，因此我们需要在课后多多结合实例加深对CSS的理解。
