专业实训第八天 CSS 盒子模型+定位+简单css3动画

版权声明:本人小白,欢迎指正~~~ https://blog.csdn.net/shensiback/article/details/79966020

今天一天学的东西并不是很多,比前一天简单了一些,但是今天的知识比昨天的更加灵活,技巧性,经验性比较强,但是都有共同的特点。需要大量的练习方能掌握。

  1. 盒子模型:

    1. 在标准的浏览器下:
      所有的标签在页面中实际的宽度=width+border+padding+margin
      (此时的padding,margin,border都是计算左右方向的)
    2. padding:是标签的内容到标签边缘之间的距离简称:内边距;
      padding有四个方向:上,右,下,左;
      padding的设置会在设置的width基础增加标签的占地面积;
      padding的主要作用是用来设置内边距,效果是:内容自身不变;但是标签实际会被撑大;
      块标签可以在四个方向上都设置padding,都可以起到占位作用;
      行标签,只有水平方向起作用,垂直方向不起作用;
    3. margin:标签和标签之间的距离;
      简称:外边距;
      margin在设置上有四个方向:上,右,下,左;
      margin:15px 16px 17px 18px;
      margin:15px 20px;上下外边距15px,左右边距20px;
      margin:0 auto;能够让设置了固定宽度的块标签水平居中;
      什么情况下使用margin:0 auto
      1. 在一行只有一个块标签;
      2. 该块标签宽度不是100%;
    4. margin-top的使用原则:
      如果一个大盒子里面有一个小盒子;
      那么我们给小盒子设置margin-top的时候,两个盒子会一块下来;这种现象叫做边距合并;
      解决方案:我们可以先将父级高度设置成为子级高度,然后给父级设置一个padding-top,
      此时是将子级当做父级的内容看待,从而能实现子级和父级上边距拉开,
    5. margin:两个盒子在垂直方向,如果他们都有上下的margin值。
      那么两个盒子之间的距离是多大?两个盒子在垂直方向上的间距,以外边距大的为准。
      水平方向上,两个盒子的间距是边距之和;
    6. 根据盒模型的综合知识理解:
      当我们在测量UI设计人员提供的页面设计图的时候;我们需要注意:
      在测量的时候必须紧贴内容来进行测量。给内容的宽度设置一个width;
      然后再去增加border,padding,margin.
      包含div或者图片在每个在代码里的换行换算到界面是6-8个像素。会有一个缝隙。
  2. 定位:position:relative相对定位;absolute绝对定位;fixed固定定位;

    1. 定位的作用:
      自由的改变标签所处的位置,并且不会因为标签的位置挪动而出现布局错误;

      1. 定位的使用方法:
        第一步, 选择定位方式:
        position:relative/absolute/fixed;
        第二步,选择定位的值:
        top:20px;left:50px;
      2. 第一种定位:相对定位:relative
        相对定位:是相对于自身原来所处的位置
        相对定位的特点:原来的标签挪走之后,它原来所处的位置依然保持存在,不会被填充。
        相对定位的用法:
        选择器{position:relative;top:40px;left:50px;}
      3. 第二种定位:绝对定位:absolute
        绝对定位的参考点是分为:1.默认参考点。2.自定义参考点

        1. 默认参考点:
          以浏览器显示页面的左上角作为参考点;
        2. 自定义参考点
          给参与了绝对定位的标签父级设置任何一种定位,
          此时父级就成了该子级的参考点。
      4. 第三种定位:固定定位:fixed;前期用的比较少
        参考点:浏览器的左上角
      5. z-index: 设置标签的层级关系;
        因为在定位中,我们的多个标签会定位在一个位置上,这个时候新的标签会覆盖旧的标签,
        所以我们需要将定位在一起的标签的的层级关系进行调整;
        调整方法:使用z-index:进行设置:
        z-index:取值凡是大于0的数字,谁打的取值大,谁就排在最上面;
  3. css3动画:
    描述动作过程的属性:@keyframes;
    @keyframes主要是将一个动作的过程分为若干个动作的点;
    每个点对应一组动画。
    所有点都是按照百分比的方式予以展现;
    @keyframes{
    0%{动作1}
    10%{动作2}
    50%{动作3}
    80%{动作4}
    100%{动作5}
    }
    那么百分比之间的设定,间隔越大,时间间隔越长,动作越缓慢;
    如果我们希望动作的过程能够和一个标签绑定在一起,我们可以在标签上,
    使用animation设置和动作过程的绑定;
    animation:动画的名称 动画的全部时间 动画的运动曲线 动画的播放次数
    动画的名称:自定义名称,不能出现数字在前;
    动作的全部时间可以设定:s,ms;
    动画的运动曲线一般是linear;
    动画的播放次数:取值:1. 取固定次数 ,例如,1 100 ;2. 永久循环 infinite;

今天晚上很有意思,举行了一个模拟面试,我作为一个被面试的学生,问了很多,包括大学期间做过的项目,没有系统准备过这类东西,回答的并不是很好,明显感觉到了企业的思想跟学习到的东西之间的差距,而且对专业术语的掌握不是很熟练,有些东西会做,但是不会说。
问题1. 请自我介绍一下
问题2. 你对未来的简单规划
问题3. 你大学做过的项目有什么,(我回答了一个图书馆管理系统+人事管理系统)
问题4. 你能讲述下图书管理系统的基本流程吗.
接下来是几个知识性问题:
问题1:java中方法的默认参数是怎么设置的
问题2:ajxs是如何实现数据的访问
问题4:分支 循环
最后一个问题,你的薪资要求多少。
做了个反思–知识不系统,不能在大脑中形成一个知识的网络,知识的片面性。

阅读更多

没有更多推荐了,返回首页