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

块级 ＆ 行级

块级	行级
不和其他盒子并列摆放	和其他行级盒子一起放在一行或拆开成多行
适用所有的盒模型属性	盒模型中的width、height不适用

块级元素	行级元素
生成块级盒子	生成行级盒子 ，内容分散在多个行盒 (line box) 中
body、article、div、main、section、h1-6、p、ul、li 等	span、em、strong、cite、code 等
display: block	display: inline

行级排版上下文：Inline Formatting Context

• 只包含行级盒子的容器会创建一个IFC
• IFC内的排版规则
• 盒子在一行内水平摆放
• 一行放不下，换行显示
• text-align决定一行内盒子水平对齐
• vertical-align决定一个盒子在行内的垂直对齐
• 避开浮动元素

块级排版上下文： Block formatting context

• Block Formatting Context (BFC)
• 某些容器会创建一个BFC
  • 根元素
  • 浮动、绝对定位、inline-block
  • Flex子项和Grid子项
  • overflow 值不是 visible 的块盒
  • display: flow-root;

Bfc内的排版规则：

• 盒子从上到下摆放
• 垂直margin合并
• BFC内盒子的margin不会与外面的合并
• BFC不会和浮动元素重叠

Flex布局

• flex-grow
  • 弹性盒子元素如何分配剩余空间，有剩余空间时的伸展能力
• flex-shrink
  • 超出父盒子的宽度，父盒子会自动压缩子盒子的宽度。
  • 当给子盒子加上flex-shrink: 0，子盒子不会被压缩宽度；
• flex-basis
  • 没有伸展或收缩时的基础长度

Position in CSS

• static 静态定位
• relative 相对定位
• absolute 绝对定位
  • 一般会与relative搭配使用，以relative作为参考
  • absolute在没有上下文relative时，是参考当前视窗页面做偏移的
• fixed 固定定位
• sticky

一个例子

<div class="position-box">
    <h1>Heading1</h1>
    <h2>Heading2</h2>
</div>

若将position-box中的 positon:relative 删除，则页面中的Heading1将显示在整个页面中的左边，距离顶部50px的位置，而Heading2将显示在整个页面中的底部，距离页面右边30px的位置。