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

今天一直在路上坐高铁加上换乘，导致看课程断断续续的，还好前面讲的是基础，又在不能做笔记的条件下，用脑子再梳理了一遍；但是关于布局我一直有点混乱，所有记下了很多笔记，理解清晰了许多！

课程收获

1.判断哪条规则生效

根据选择器的特异度：#（id）（伪类）、.E（标签）数量的比较

2.属性继承（与盒模型相关的都不可继承）

显示继承：inherit，继承的是其父元素的计算值（不是百分比）

3. 属性初始

显示重置为初始值：initial，每个元素都有一个初始值

4.布局相关技术

常规流：

width/height:content box的宽度/高度，取值方式有长度、百分数（相对于容器的content box来说（有指定高度才生效）、auto

padding(内边距)：上右下左，百分数相对于容器的witdh和height

border：三种属性（border-width、border-style、border-color），style样式（none、solid、dashed、dotted），方向上右下左，得到不同的形状

margin（外边距）：

ps1. margin：auto，当左右都为auto，实现水平居中；
2. margin collapse，垂直上取两元素的最大margin

* {
        box-sizing:border-box;
  }

content溢出处理方式overflow

display方式

行级排版上下文： 只包含行级盒子的容器规则：一行内水平，一行不够换行凑，text-align决定水平对齐， vertical-align决定行内垂直对齐，避开float元素

块级排版上下文

什么会创建一个BFC：根元素；浮动、绝对定位、inline-block、Flex和Grid子项 overflow不是visible的块盒；display：flow-root
BFC内排版规则：

display：flex

根据方向确定主轴justify-content、侧轴align-items，特殊设置align-self

Flexibolity

flex-grow:伸展，将多出来的空间按比例分别分配扩大

flex-shrink：压缩，压缩后按按比列压缩

flex-basis：原本宽高

flex：grow、shrink、basis

display：grid

用grid-template划分格子：grid-template-columns/rows

用grid line划网格线

grid-area（理解得不是很到位）

浮动：float

不常用，仅用来改变图片与文字的位置关系，现能更安全实现

绝对定位：position

建议：MDN和W3C CSS规范