定位机制
- 普通流
- 浮动
- 绝对定位
CSS position属性
- static 元素框正常生成。
- relative 元素框偏移某个距离，元素仍保持其未定位前的形状，它原本占据的空间保留。
- absolute 元素框从文档流中完全删除，并相对于其包含块定位。
设置了position为absolute的元素，相对于第一个设置position为relative和absolute的父级
元素定位，相对于这个父级元素的padding左上角定位，如果它的父级元素没有设置position
为relative或absolute，那么它相对于body定位。
- fixed 元素框的表现类似于将position设置为absolute，不过其包含块是视窗本身。
特殊的absolute，以body为定位
CSS Flex布局
最好看阮一峰的博客吧 ，我也是抄阮大的阮一峰flex
任何一个容器都可以指定为Flex容器
.box{
display: flex;
}
行内元素也可以使用Flex布局
.box{
display: inline-flex;
}
Webkit内核浏览器，必须加上-webkit前缀
.box{
display: -webkit-flex; /* Safari */
display: flex;
}
- 设为Flex布局后，子元素的float、clear、vertical-align属性失效
Flex布局基础
Flex.png
有6个属性可以设置在容器上
1. flex-direction
2. flex-wrap
3. flex-flow
4. justify-content
5. align-items
6. align-content
flex-direction属性
.box {
flex-direction: row | row-reverse | column | column-reverse
}
flex-direction.png
它设置的四个值
1. row(默认值)：主轴为水平方向，起点在左端（上3）
2. row-reverse: 主轴为水平方向，起点在右端（上4）
3. column: 主轴为垂直方向，起点在上沿（上2）
4. column-reverse：主轴为垂直方向，起点在下沿（上1）
flex-wrap属性
.box{
flex-wrap: nowrap | wrap |wrap-reverse
}
它可能的三个取值的含义
-
nowrap(默认)：不换行
nowrap.png
-
wrap：换行，第一行在上方
wrap.jpg
-
wrap-reverse：换行，第一行在下方
wrap-reverse.jpg
flex-flow
-
flex-flow属性是flex-direction和flex-wrap属性的简写，默认值是row nowrap
.box {
flex-flow: <flex-direction> || <flex-wrap>
}
justify-content
-定义项目在主轴上的对齐方式
.box {
justify-content: flex-start | flex-end | center | space-between |sapce-around;
}
justify-content.png
取值含义
1. flex-start（默认值）：左对齐
2. flex-end：右对齐
3. center： 居中
4. space-between：两端对齐，项目之间的间隔都相等。
5. space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
align-items
- 定义项目在交叉轴上如何对齐
.box {
align-items: flex-start | flex-end | center | baseline | stretch
}
align-items.png
取值含义
1. flex-start：交叉轴的起点对齐。
2. flex-end：交叉轴的终点对齐。
3. center：交叉轴的中点对齐。
4. baseline: 项目的第一行文字的基线对齐。
5. stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
align-content
- 定义了多根轴线的对齐方式，如果项目只有一根轴线，该属性不起作用
.box {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
align-content.png
属性取值
1. flex-start：与交叉轴的起点对齐。
2. flex-end：与交叉轴的终点对齐。
3. center：与交叉轴的中点对齐。
4. space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
5. space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
6. stretch（默认值）：轴线占满整个交叉轴。
项目属性
1. order
2. flex-grow
3. flex-shrink
4. flex-basis
5. flex
6. align-self
order
- 定义项目的排列顺序，数值越小，排列越靠前，默认为0
.item {
order: <integer>;
}
flex-grow
- 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
.item {
flex-grow: <number>
}
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间，如果一个项目的flex-grow属性为2，其他项为1，则前者占据的剩余空间将比其他项多一倍。
flex-shrink属性
- 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
.item {
flex-shrink: <number>;
}
flex-basis
- 定义了在分配多余空间之前，项目占据的主轴空间
//暂时不懂
flex
-
flex是flex-grow,flex-shrink和flex-basis的简写，默认为0 1 auto
该属性的两个快捷值auto(1 1 auto)和none(0 0 auto)
align-self
- 允许单个项目有于其他项目不一样的对齐方式，可覆盖
align-items属性，默认为auto，继承父元素的align-items,如果没有父元素，等同stretch
.item {
align-self: auto | flex-start | flex-end |center | baseline | stretch;
}
align-self.png
