【css】display属性解读

inline、block、inline-block

• block 区块
  • 一个区块独占那一行，左右都不允许有其他元素并排，区块与区块之间自动换行
  • 默认填充父容器的可用空间
  • 默认是block的标签有：<div> <p> <h1> <ul>等
• inline 内联元素
  • 不会独占一行，左右可以与其他inline元素粘在一起
  • 设置width、height无效
  • 默认是inline的标签有：<span> <strong> <a> 等
• inline-block 内联区块
  • 结合block和inline的特点
  • 既可以设定宽度与高度，又可以与其他inline元素并排
• flex
• grid
• none

布局

• grid
  • 将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。
  • grid-template-columns 指定行分成几份
    grid-template-rows 指定列分成几份
• flexbox
  • 一维的排版方式，一个flexbox容器只能控制一个方向

text-align 只对inline有效