一、position值对比图
二、绝对定位元素特点（absolute/fixed）
2.1 宽高默认由内容决定
2.2 可以随意设置宽高
- 不管原来display属性是什么，可以理解为脱离标准流的元素都可以随意设置宽高。
2.3 不再受标准流的约束
2.3.1 不再严格按照从上到下、从左到右的标准排布方式
2.3.2 不再严格区分block、inline、inline-block
- 块级元素、行内元素及行内块元素的很多特性都会消失。
2.4 绝对定位元素不再给父元素传递宽高数据（脱离标准流）
2.5 z-index属性
- 定位元素具有层叠性，z-index可以改变元素层级。
- 只对除position值为static的其他定位元素生效。
- 用于兄弟元素之间。
三、浮动（float）
3.1 浮动的特点
- float只能左浮动或有浮动，浮动后的元素脱离标准流。
- 浮动元素不像定位元素脱离标准流都后会层叠，而是会紧挨着上一个浮动元素（左浮找左浮，右浮找右浮），可通过margin设置负值来实现层叠效果。
- 浮动元素不会超出容器的包含块（content）。
- 浮动元素不能与行内级内容层叠，行内级内容将会被浮动元素退出，块级元素内的文字内容也不例外，图文环绕效果就是基于此特性。
- 浮动只能左右浮动，浮动高度不超过本行高度。
3.2 浮动的缺陷及处理
3.2.1 浮动的缺陷
- 浮动元素脱离标准流，若父元素没有设定高度，那么浮动元素不会撑起父元素（即脱标元素不向父元素汇报高度），导致高度塌陷，解决方案为清除浮动。
3.2.2 清除浮动
清除浮动的方式有很多，具体如下：
- 给浮动元素的父元素设置一个固定的高度（拓展性不好，不推荐）。
- 给包裹浮动元素的父元素盒子添加css类，设置clear属性消除浮动，left（让元素紧贴所有左浮动元素下面），right（让元素紧贴所有右浮动元素下面），both（让元素紧贴所有浮动元素下面），常配合伪元素使用。示例如下：
三、flex布局
3.1 弹性盒子（flex container）和弹性元素（flex item）
- 开启了flex布局的元素为flex container，其直接子元素为flex iem。
3.2 弹性元素的特点
当flex container中的子元素变为flex item时，具备以下特点：
- flex item的布局将
受flex container属性设置来进行控制和布局； - flex item
不再严格区分块级元素和行内级元素； - flex item默认情况下是
包裹内容的，但是可以设置宽度和高度；
3.3 flex布局的基本概念
MDN文档：developer.mozilla.org/zh-CN/docs/…
3.3 flex-container相关属性
3.3.1 设置弹性容器
display:flex:flex container（外层容器）为block元素；display:inline-flex:flex container（外层容器）为inline-block元素,比较少用此属性；
3.3.2 flex-direction
决定主轴的方向，具有 row（默认值）、row-reverse、column、column-reverse
3.3.3 flex-wrap
默认值为nowrap,需要flex-item换行显示不进行压缩时可设置为wrap。
3.3.4 flex-flow
flex-flow是flex-direction和flex-wrap的复合属性，顺序任何，并且值都可以省略。
3.3.5 justify-content
调整flex-item在主轴上的对齐方式，main-start和main-end之间调整。
3.3.6 align-items
调整flex-item在交叉轴上的对齐方式，cross-start和cross-end之间调整。
3.3.7 align-content
align-content决定了多行flex-items在交叉轴上的对齐方式，用法与justify-content类似，开发中容器高度一般为auto，没剩余高度需要处理，比较少用该属性。
3.4 flex-items相关属性
3.4.1 order（少用）
order决定了flex-items的排布顺序。可以设置任意整数，值越小就越排在前面，默认值是0。
3.4.2 align-self
- flex-items可以设置align-self属性覆盖flex-container设置的align-items，默认值为auto（与flex-container的align-items设置一致）
- 可选值跟align-items一致。
3.4.3 flex-grow
flex-grow决定了flex-items如何扩展/拉伸,主轴空间充足的情况下拉伸控制。
- 值可以设置任意
非负数字，默认值为0。 - 当flex-container在主轴方向上有
剩余的空间，该属性才会生效。 - 主轴剩余的空间会根据所有元素设置的flex-grow的值平分，再根据每个元素设置值分配。
- flex-items扩展后的最终size不能超过
max-width/max-height。
3.4.4 flex-shrink
flex-shrink决定了flex-items如何收缩,主轴空间不足的情况下收缩控制。
- 值可以设置任意
非负数字,默认值为1。 - 当flex-items在主轴方向上超过了flex-container的尺寸时，该属性才会生效。
- 主轴上需要收缩的空间会根据所有元素设置的flex-shrink的值平分，再根据每个元素设置值分配。
- flex-items收缩后的最终size不能小于
min-width/min-height。
3.4.5 flex（缩写属性）
flex是flex-grow || flex-shrink || flex-basis(少用) 的简写属性，flex属性可以设置1,2,3个值。
MDN文档：developer.mozilla.org/zh-CN/docs/…
3.4 弹性盒子设置justify-content属性最后一列排序问题解决
3.4.1 现象
3.4.2 解决方法
- 不设置justify-content属性，自己计算flex-items与flex-container的宽度给flex-items设置margin值，总宽度等于flex-container的宽度，但容器/弹性元素宽度变化后需要重新计算。
- 在最后一个flex-items中增加两个行内标签如span标签，给span标签跟flex-items一致的宽度，增加的span标签数量为一行中弹性元素的数量-2。
