冯娜8.17

今天学习了页面布局，即定位和弹性布局；

一、页面布局：

一、定位：就是改变元素在页面中的位置。

二、定位的分类：

1. 普通流定位
2. 相对定位
3. 绝对定位
4. 固定定位
5. 浮动定位

三、元素堆叠顺序

1、特点：1. 根据html代码，后定位的元素，丢叠顺序高。

​ 2.只有已定位的元素，才有丢叠顺序。

​ 3.定位的脱离文档流和浮动的脱离文档流不是一个体系。

​ 4.父子元素都定位，都设置z-index，儿子永远在父亲上面显示。

2、定位的堆叠和浮动的关系：浮动和定位不是体系，不能比较，浮动永远只在一层，不能设置，而定位可以设置堆叠顺序。

二、弹性布局：

一、弹性布局：弹性布局主要是为了解决某个元素中其子元素的布局，为布局提供了很大的灵活性。

二、弹性布局的特点：

1. 元素设置弹性容器之后，该元素所有的子元素都变为弹性项目，弹性项目将按照弹性布局的方式排列。
2. 元素设置为弹性容器之后，项目的float/clear失效，容器的vertical-align/text-align失效。
3. 父元素设置了宽高就没有项目根据尺寸变小的效果了。
4. 默认主轴为x轴，主轴起点在左边，主轴终点在右边。
5. 交叉轴是永远与主轴方向垂直的一根轴，项目在交叉轴上的对齐方式，称为交叉轴的起点和终点。

三、display:

1. flex:将块级元素设为弹性元素。
2. inline-flex:将行内元素设为弹性元素。

四、容器：发生弹性布局的子元素们的父元素称为容器。

1、设置主轴的排列方向：

• flex-direction:row;从左到右;
• flex-direction:row-reverse:从右到左翻转;
• flex-direction:column:从上到下;
• flex-direction:column-reverse:从下到上翻转。

2、定义项目在主轴上的对齐方式：

• ​ justify-content:flex-start:从起点开始，从左到右；
• ​ justify-content:flex-end：从终点开始，从右到左；
• ​ justify-content:center：居中；
• ​ justify-content:space-between:类似于两端对齐,两端无空白；
• ​ justify-content:space-around:类似于两端对齐，两端有空白，每个空白距离相等。

3、交叉轴：

align-items：flex-start：交叉轴起点对齐；

align-items：flex-end:交叉轴终点对齐;

align-items：center:交叉轴居中对齐;

align-items：baseline:交叉轴基线对齐，就是交叉轴起点;

align-items：stretch:项目不写高，占满交叉轴所有空间。

4、项目：弹性布局的子元素们，称之为弹性项目，项目属性只能设置在某一个项目上，不影响其他项目效果。

感觉今天学习的内容有些难，晚上辛苦老师又给我们单独讲啦一遍，老师讲的很详细，感觉清晰啦很多。