前端第六天

flex

例如，在父容器中放置多个块级子元素，默认从上往下排列，此时在父容器中增加display：flex属性，这些元素会在一行从左往右排列,不会脱离文档流

弹性盒子：指的是用display：flex或display：inline-flex声明的父容器

子元素/弹性元素：指的是父容器里的子元素们

主轴水平方向，从左向右。侧轴垂直于主轴，从上往下 

flex-direction用于设置盒子中子元素的排列方向，属性值可以是row（从左到右）colum(上到下)

flex-wrap控制子元素溢出换行

justify-content控制子元素在主轴上的排列方式，

align-items属性：设置子元素在侧轴上的对齐方式

布局属性

display确定元素的显示类型

block，inline，inline-block（不会独占一行，但是可以设置宽和高）

position确定元素的位置

static，relative（相对定位，相对于元素本身进行偏移，不会改变所占据的空间）absolute（绝对定位，相对于父元素中最近的relative/absolute进行偏移，会脱离文档流）fixed（固定定位，相对于可视区域固定）

inline-block布局

去除间隙：设置父元素container的字体大小为0，font-size：0，然后设置子元素div的字体为12px

如何让一个元素水平垂直居中

行内元素水平居中：text-align：center；

行内元素垂直居中：行高等于盒子高

块级元素水平居中：margin：0 auto；

块级元素垂直居中：父容器display：flex，然后子元素margin：auto

display：none（隐藏元素）

display：block（显示元素）

父元素：hover .子元素

精灵图的使用

 1，主要针对背景图片，把多个小背景整合到一张大图片里。

2，这个大图片称为精灵图

3，移动背景图片位置，background-position

4，移动距离为目标图片的xy轴坐标

5，一般情况下，均为负值，因为图要往左走或者往下走