CSS定位

定位机制

• 普通流
• 浮动
• 绝对定位

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
}

它可能的三个取值的含义

1. nowrap(默认)：不换行

nowrap.png

2. wrap：换行，第一行在上方

wrap.jpg

3. 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