深入CSS （下）
块级和行级
块级和行级的特点
因为行级的宽度和高度是由里面的内容决定的
常见的 块级元素 行级元素
(当然也可以通过CSSdisplay: block | inline将元素更改为为块级或行级)
Display比较有意思的属性值:
常规流
行级排版上下文
（注意理解什么情况下会创建一个IFC）
（一个单词 或 一个图片是原子的，不能被拆成两行）
块级排版上下文
（可以通过第三条规则解决，垂直margin的合并问题）
（可以通过第四条规则来实现清除浮动）
一个盒子的子级只能都是行级或都是块级，下图是该规则的体现: span中包含了一个块级两个行级，由于该规则的存在，浏览器自动为这两个行级包裹了块级盒子
由于单纯的行级和块级上下文，难以满足复杂，灵活的排版需求，所以就提出了新的排版上下文
Flex Box（现在使用最多的一种方式）
-
对齐 引入了主轴与侧轴的概念
-
主轴对齐：
-
侧轴对齐：使用align-items 属性值与justify-content（主轴）的类似，如果不给align-items设值，默认为stretch, 即把所有元素的高度撑到容器一样的高度
-
以上两种对齐都是设置在上下文或容器上的，我们也可以针对里面某一个特定子元素进行设置(通过align-self)
-
可以通过order属性来控制元素摆放的顺序
-
Flexibility
（注：flex-grow影响的是如何瓜分剩余空间）
- flex不同属性的对应缩写
Grid布局（偏向二维的布局，可以说是最强大的一种布局，基本上所有布局都可以通过grid实现）
元素的摆放是通过网格线实现的
-
画网格线并编号
-
比如说我们想要将元素放置在黄色区域，那我们就可以选取(1, 1)到(3, 3)之间的这片区域
可以通过gird-area来简写grid-row-start grid-column-start grid-row-end grid-column-end,网格线我们可以通过浏览器的开发者工具来检查
float浮动（非常规流，现在重要性并不是那么重要了）
主要其实是为了实现文字环绕图片(图文混排)的这种效果，例子
Position属性
(static和relative是没有脱离文档流的 absolute和fixed是脱离文档流的)
(个人理解 是否脱离文档流的区别是在于是否在文档流里有占用位置，且会影响到文档流里的其它元素的位置)
相对定位
绝对定对
若一直向上都找不到非static的祖先元素，则会相对根元素来做
fixed定位
粘性定位
元素根据正常文档流进行定位，然后相对它的最近滚动祖先（nearest scrolling ancestor）和 containing block（最近块级祖先 nearest block-level ancestor），包括 table-related 元素，基于 top、right、bottom 和 left 的值进行偏移。偏移值不会影响任何其他元素的位置。 该值总是创建一个新的层叠上下文（stacking context）。注意，一个 sticky 元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上（当该祖先的 overflow 是 hidden、scroll、auto 或 overlay 时），即便这个祖先不是最近的真实可滚动祖先。这有效地抑制了任何“sticky”行为
(补充：总的来说，脱离文档流的定位，相当于创建了一个新的文档流，而最外层的这个脱离文档流的元素，相当于新创建文档流的根)
