网页中，元素有三种布局类型
- 流动模型 (Flow)
- 浮动模型 (Float)
- 层模型 (Layer)
流动（Flow）是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。
流动模型
- 块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。
- 在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行）
- 右侧代码编辑器中内联元素标签a、span、em、strong都是内联元素。
浮动模型
- 任何元素在默认的情况下都不是浮动的。float我们可以由此定义
层模型
position: static relative absolute fixed sticky
relative 和 absolute的联合使用
弹性盒模型flex
布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性
三、容器的属性
flex-direction flex-wrap flex-flow justify-content align-items align-content
flex-direction
- 决定主轴的方向，也就是项目排列的方向
- 默认为row 横向排列
flex-wrap属性
- 怎么换行
- nowrap 默认不换行
justify-content属性
- 决定了项目在主轴上的对齐方式
- flex-start 默认 左对齐
align-items属性
- 决定了项目在交叉轴上的对齐方式
- 默认值为stretch
align-content属性
- 决定了项目在多跟轴线上的对齐方式
图片来自于阮一峰博客
stretch 默认值
四、项目的属性
order flex-grow flex-shrink flex-basis flex align-self
order 属性定义的是项目的排列顺序
flex-grow
- flex-grow 定义的是项目放大的比例
- 默认为0
flex-shrink属性
- flex-shrink属性 定义的是项目的缩小比例 默认为1 空间不足的话。项目将缩小
- 如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
flex-basis属性
- flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小
flex属性
- flex-grow flex-shrink flex-basis的简写 默认值为0 1 auto
flex: 1 不是 1，1，auto 如果是auto的话，那么盒子会按照内容进行放大缩小 flex: 1 === flex: 1 1 + 0% 而设计成具体数字的时候，则会按照设计的长度等比例的放大缩小
align-self
align-items 的对项目的单独设置
grid 布局
是将网页划分成网格
grid-template-columns 属性，
grid-template-rows 属性
可以使用repeat 属性 repeat(3, 100px 50px 200px)
auto-fill 关键字 每行自动填充关键字
fr 按照比例进行划分
grid-row-gap 属性，grid-column-gap 属性，grid-gap 属性
设置行间距与设置列间距
grid-template-areas
justify-items 属性，
align-items 属性， place-items
设置单元格内容的水平位置
参数设置 ： start,end,center,stretch
justify-content 属性，align-content 属性，place-content 属性
start | end | center | stretch | space-around | space-between | space-evenly
grid-column-start 属性，grid-column-end 属性，grid-row-start 属性，grid-row-end 属性
设置项目在整个容器的位置
grid-row grid-colume
- &-start &-end
grid-area
- 设置元素位于容器的位置
- 还可以当作grid-row-start、grid-column-start、grid-row-end、grid-column-end的合并简写形式
- grid-area: 1 / 1 / 3 / 3
display
可以设置的是元素的内部和外部显示类型
水平居中的方法
脱离文档流元素的居中
- magin: auto
- margin: 为负值 另外设置top left为宽高的一半 已知宽高
- 宽高不定实现盒子的水平垂直居中
未脱离文档流元素的居中
- text-align: center vertical-align: center
弹性盒子方法
flex align-items: center justify-content: center
文档流
我经常可以看到什么脱离文档流。一直不太懂
Q: 脱离文档流就不占据空间了吗？ A: 可以这么说。更准确地一点说，是一个元素脱离文档流（out of normal flow）之后，其他的元素在定位的时候会当做没看见它，两者位置重叠都是可以的。
Q: 脱离文档流是不是指该元素从dom树中脱离？ A: 不是，用浏览器的审查元素就可以看到脱离文档流的元素（例如被float了）依然会出现在dom树里，下面的截图里也可以看到。
另外需要注意的是
脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。需要注意的是，使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。而对于使用absolute positioning脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。
