20200817_叶梦宇_

学习总结

一，position 定位

定位 position:static; 静态默认文档流
1.相对定位 position:relative;
相对定位会解锁四个属性值 top left right bottom
相对定位：相对的是元素本身的位置
2.绝对定位 position:absolute;
①当我们设置绝对定位的元素的父级元素中没有已定位元素的时候，就会以浏览器为基准进行定位
②当我们设置绝对定位的元素的父级元素中含有已定位元素的时候，就会以已定位元素为基准进行定位
已定位元素：设置了相对定位/绝对定位和固定定位的元素
相对定位会保持默认的文档流，绝对定位会脱离文档流

1. 固定定位 position:fixed;

   #### 二，float（面试题）

   1.为父元素添加高度
   2.为父元素同样设置浮动
   3.为父元素添加溢出隐藏
   4.clear:both;
   5.伪元素添加 clear:both;

   #### 三，弹性布局(display:flex)

   /* flex会设置当前的元素为弹性容器，里面的元素为弹性项目 /
   / 默认情况下，设置弹性布局，按主轴x的方向进行排列，左侧是起点，右侧是终点 /
   / 交叉轴，与主轴相互垂直的那一条轴，就是交叉轴 /
   / 1.设置主轴的排列方式 */

   ​ justify-content: flex-start;
   ​ justify-content: flex-end;
   ​ justify-content: center;
   ​ justify-content: space-between;
   ​ justify-content: space-around;
   ​ /* 2.交叉轴，设置交叉轴的排列方式 /
   ​ align-items: flex-end;
   ​ align-items: flex-start;
   ​ align-items: baseline;
   ​ align-items: stretch;
   ​ align-items: center;
   ​ / 3.设置项目允许换行 /
   ​ / flex-wrap: wrap-reverse; /
   ​ / 4.设置项目的主轴排列方向 /
   ​ / flex-direction: row;
   ​ flex-direction: row-reverse;
   ​ flex-direction: column;
   ​ flex-direction: column-reverse

   ### 学习心得：

   开始时不太能理解页面布局，文字的表达力还是没有看到效果好理解。所以学习布局的最好办法是自己多加练习，遇到问题问老师。感谢老师的耐心解说，讲的很详细。