一、文档流

方向：从左到右、从上到下

inline元素：

- 从左到右，到最右自动换行（例：span）
- 不能设置width，height
- height由line-height间接确定，与height无关
- 不能在inline元素里加入block元素

block元素：

- 从上到下，每个元素独占一行（例：div）
- 可以设置width，height
- 高度由文档流的高度决定

inline-block元素：

- 从左到右，不会被分割为两行
- 可以设置width，height

脱离文档流

容器不把脱离文档流的元素的高度计算在内

span {
  position:absolute/fixed;
}

span {
  float:left/right;
}

二、盒模型

content-box 内容盒（宽高只包括content）
border-box 边框盒（宽高包括content，padding，border）

三、布局

响应式布局：pc上固定宽度，手机上不固定

1. float布局

在子元素里加 float:left/right 和 width
在父元素里加.clearfix

.clearfix::after{
  content:'';
  display:block;
  clear:both;
}

居中显示：

margin-left: auto;
margin-right: auto;

2. flex布局

- 流动方向：flex-direction

flex-direction: row; 默认
flex-direction: column; 竖着排           
flex-direction: row-reverse; 从右到左排
flex-direction: column-reverse; 从下往上排

- 折行：flex-wrap
nowrap：不折行
wrap：折行
wrap-reverse：从下开始往上折

- 主轴/横轴对齐方式：justify-content

- 次轴对齐方式：align-items

- 多行内容：align-content

flex里的item

order: 用order大小排序

.item:first-child {
        order: 2;
}
.item:nth-child(2){
        order: 4;
}
.item:last-child {
        order: 5;
}

flex-grow 分配空间/变胖
一个item占一份：flex-grow: 1;

flex-shrink 变瘦
一般写flex-shrink:0 防止变瘦，默认是1
align-self 定制 align-items

重点

display: flex;
flex-direction: row/column;
flex-wrap: wrap;
justify-content: center / space-between;
align-items: center;

如何不写死：

width: 50%;
max-width: 100px;
width: 30vw;
min-width: 80%;

3. grid布局

二维布局用grid，一维布局用flex

.container {
    display: grid | inline-grid;
    grid-template-columns: 40px 50px auto 50px 40px;
    grid-template-rows: 25% 100px auto;
}

fr: free space (份)

.container{
      grid-template-columns: 1fr 50px 1fr 1fr;
}

常用grid-template

空隙gap

.container{
      grid-template-columns: 100px 50px 100px;
      grid-column-gap: 10px;
      grid-row-gap:15px;
}

宽度跨越2列

grid-column-end: span 2;

第2列开始，第4列结束

grid-column: 2/4;

grid-area

grid-area: row start / column start / row end / column end ；

每行/列12.5%，重复8次

grid-template-columns: repeat(8, 12.5%)

《CSS 知识总结》1