深入理解CSS（下）|青训营

行级vs块级

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

块级元素	行级元素
生成块级盒子	生成行级盒子，内容分散在多个行盒中
display:block	display:inline

display 属性

• block ：块级盒子
• inline ：行级盒子
• inline-block ：本身是行级，可以放在行盒中； 可以设置宽高；作为一个整体不会被拆散成多行（类比一张图，布局时不会被拆散成一半一半）
• none： 排版时完全被忽略

常规流（Normal Flow）

• 根元素、浮动和绝对定位的元素会脱离常规流
• 其他元素都在常规流之内
• 常规流中的盒子在某种排版上下文中参与布局

行级排版上下文

• Inline Formatting Context (IFC)
• 只包含行级盒子的容器会创建一个IFC
• IFC内的排版规则
  • 盒子在一行内水平摆放
  • 一行放不下时，换行显示
  • text-align决定一行内盒子的水平对齐
  • vertical-align 决定一个盒子在行内的垂直对齐
  • 避开浮动(float)元素
• overflow-wrap: break-word 表示单词显示不下时可以被拆开

块级排版上下文

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

BFC 内的排版规则

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

浏览器不允许容器内同时有块级和行级盒子，如果既有块级和行级元素，会分别创建匿名的行级和块级盒子

Flex Box

• 一种新的排版上下文

• 可以控制子级盒子的：

  • 摆放的流向（→←）flex-direction默认为row
  • 摆放顺序
  • 盒子宽度和高度
  • 水平和垂直方向的对齐
  • 是否允许折行

• 侧轴对齐align-items默认为strech会把子元素高度拉到和容器一样高

• baseline则是把所有文字的基线对齐

• 可以单独给子元素设置align-self来调整单个元素的位置

• 也可以给子元素设置order，就会按order的形式来在现在的流向上依次鼻疽

Flex的Flexibility属性

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

flex-grow：容器总宽度刨去定好长度的元素之后剩下的宽度，按flex-grow设定的比例来分配

flex-shrink：总宽度不够1200，a设置为flex-shrink为0表示不可压缩，所以bc被压缩

Grid布局

Grid布局及网格布局，是一种新的css模型，一般是将一个页面划分成几个主要的区域，定义这些区域的大小、位置和层次等关系，是目前唯一一种css二维布局。

display：grid

• display：grid使元素生成一个块级的Grid容器
• 使用grid-template相关属性将容器划分为网格
• 设置每一个子项站哪些行/列

划分网格

• grid-template-colums设置列的划分
• grid-template-rows设置行的划分

float浮动流

实现图片环绕文字，回归本来用途，其他布局可以通过flex布局来解决

postion属性

• static：默认值， 非定位元素
• relative：相对自身原本位置偏移， 不脱离文档流，其他元素布局时认为它依然在原位置
• absolute：绝对定位, 相对非 static 祖先元素定位（子绝父相），脱离了常规流
• fixed：相对于视口进行绝对定位