弹性布局、雪碧图（图片整合技术）

弹性布局

• 容器：父元素

  给谁添加flex谁就是容器，子元素就是项目

  功能：1.所有的项目默认情况在一行显示。

  2.如果所有的项目宽度之和大于容器的宽度。项目会自动缩小。

  即不会超出容器的尺寸（不会换行）

• 项目：子元素

• 主轴：X轴（默认值）

• 交叉轴：Y轴（默认值）

• display不具有继承性

• flex-direction：row（行）默认值X轴（flex-start轴的起始位置为左侧）

• flex-direction：column（列）Y轴（flex-start轴的起始位置为顶部）

• reverse ：倒序

• flex-direction：row-reverse （flex-start轴的起始位置改为右侧）

• flex-direction：column-reverse（flex-start轴的起始位置改为底部）

  设置换行

• flex-wrap：nowrap 不换行（默认值）

• flex-wrap：wrap 行换（当项目尺寸之和大于宽度才会起效）

• flex-wrap：wrap-reverse 倒序换行（起始位置改为底部且主轴为X轴）

  缩写方式

• flex-flow：row wrap-reverse（X轴默认值倒序换行）

  主轴对齐方式

  当主轴方向是row

  justify-content：flex-start 【默认值】（主轴对齐方式，左对齐）

  justify-content：flex-end（主轴对齐方向，右对齐）

  justify-content：center（主轴对齐方向，居中）

  justify-content：space-between（主轴对齐方向，两端对齐）

  justify-content：space-around（主轴对齐方向，分散对齐）

  justify-content：space-evenly（主轴对齐方向，平均分配项目内容）

  精灵图，雪碧图，图片整合技术

• 精灵图操作步骤（一般用“i”标签）

• step1.给固定定尺寸（雪碧图、图标的尺寸）

• step2、引用图片

• step3、设置背景图位置

  绝对定位

• 当浮动元素被设置为绝对定位

• 属于绝对定位，float（浮动）属性被浏览器强制设置为none

• 绝对定位对其他元素的影响

• 绝对定位元素不会对其他任何元素造成任何影响【脱离文档流】就是在页面上不占尺寸

• position:relative（相对位置）在本来位置，直接赋值（left、right、top、bottom），没有脱离文档流

• 绝对定位元素的位置：可通过left、right、top、bottom来设置

• 绝对定位元素的包含块

• 如果position:fixed（固定位置），包含块为视口【脱离文档流】就是在页面上不占尺寸

• 一旦进行偏移量的设置（移动），则元素起始位置是视口左上角

• 可通过left、right、top、bottom来设置

• 适用场景：PC：页面头部

  移动端：页面底部

  都可以适用的场景：广告，侧边栏，即时通讯，目录，回到顶部（推荐元素为aside）

• 如果positiong:absolute（绝对位置）包含块为包含绝对位置元素，离绝对位置元素最近且position不是默认值的元素则是绝对元素的包含块

• 适用场景：两个及以上的元素（标签），需要重叠在一起的时候

  堆叠级别z-index（无法继承）：默认值为0。有效范围：相对位置、绝对位置、固定位置。 取值范围：正负值都可以。（数字越大越靠上，数字越小越靠下。）【开头或者底部始终显示在最上面一层】

• display：显示元素的方式