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

    ### 学习心得:

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

标签

评论

© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1