冯娜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、项目:弹性布局的子元素们,称之为弹性项目,项目属性只能设置在某一个项目上,不影响其他项目效果。

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

标签

评论

this is is footer