这是我参与「第四届青训营 」笔记创作活动的的第3天

1 继承

• 有些元素的属性可以继承给子级，如color
• 但有些无法继承给子级时，需要使用显式继承

2 初始值

• CSS中，每个属性都有一个初始值
  • background-color的初始值为transparent
  • margin-left的初始值为0
• 可以使用initial关键字显式重置初始值
  • background-color：initial

3 CSS求值过程

4 布局（Layout）

• 确定内容的大小和位置的算法
• 依据元素、容器、兄弟节点和内容等信息来计算

4.1 布局相关技术

• 常规流
  • 行级 行级元素：span、em、strong、cite、code等
  • 块级 块级元素：body、article、div、main、section、h1-6、p、ul、li等
  • 表格布局
  • FlexBox
  • Grid布局
• 浮动
• 绝对定位

4.2 box-sizing

• content-box：总宽度=margin+border+padding+width/height
• border-box：总宽度=margin+width；width=border+padding+width/height
• 具体差别体现在：在同一个容器中，书写文字，都给相同的宽度。前者的文字宽度会直接占100%，实际加上padding、border、margin后会超过100%；而后者文字宽度加上padding、border是100%

4.3 常规流规则（Normal Flow）

• 根元素、浮动和绝对定位的元素会脱离常规流
• 其他元素都在常规流之内（in-flow）
• 常规流中的盒子，在某种排版上下文中参与布局
  • 行级排版上下文
    • Inline Formatting Context（IFC）
    • 只包含行级盒子的容器汇创建一个IFC
    • IFC内的排版规则
      • 盒子在一行内水平摆放
      • 一行放不下时，换行显示
      • text-align决定一行内盒子的水平对齐
      • vertical-align决定一个盒子在行内的垂直对齐
      • 避开浮动（float）元素
  • 块级排版上下文
    • Block Formatting Context（BFC）
    • 某些容器会创建一个BFC
      • 根元素
      • 浮动、绝对定位、inline-block
      • Flex子项和Grid子项
      • overflow值不是visible的块盒
      • display:flow-root
    • BFC内的排版规则
      • 盒子从上到下摆放
      • 垂直margin合并
      • BFC内盒子的margin不会与外面的合并
      • BFC不会和浮动元素重叠
  • Table排版上下文
  • Flex排版上下文
    • 一种新的排版上下文
    • 它可以控制子级盒子的：
      • 摆放的流向（→ ← ↑ ↓）
      • 摆放顺序
      • 盒子宽度和高度
      • 水平和垂直方向的对齐
      • 是否允许拆行
  • Grid排版上下文

4.3.1 flex布局

• justify-content（主轴）属性值

• align-items（侧轴）属性值

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

• flex复合写法

4.3.2 Grid布局

• fr的意思是，除去前面占用的，把剩余的内容平分占满
• grid line网格线