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

标签: html CSS
15人阅读 评论(0) 收藏 举报
分类:

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

  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:分支 循环
最后一个问题,你的薪资要求多少。
做了个反思–知识不系统,不能在大脑中形成一个知识的网络,知识的片面性。

查看评论

w3c系列之CSS(四):深入理解盒模型

盒模型是一个老生常谈的话题,本身并
  • liquanfeng326
  • liquanfeng326
  • 2014-08-28 22:59:25
  • 1168

css3盒子模型及其定位

盒子模型常见相关属性和属性取值/*基本属性*/ padding: padding-left/right/top/bottom border: border-left/right/top/bottom ...
  • kinglyjn
  • kinglyjn
  • 2016-12-29 09:28:03
  • 569

CSS 盒子模型,绝对定位和相对定位

一、盒子模型:         标准模式和混杂模式(IE)。在标准模式下浏览器按照规范呈现页面;在混杂模式下,页面以一种比较宽松的向后兼容的方式显示。混杂模式通常模拟老式浏览器的行为以防止老站点无法...
  • WEB_YH
  • WEB_YH
  • 2016-11-20 10:22:24
  • 1014

CSS篇之1. CSS 盒子模型,绝对定位和相对定位

1. CSS 盒子模型,绝对定位和相对定位 解答: (1)css盒子模型: CSS中,盒子模型也叫框模型,它规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。在HTML文档中,每个元素...
  • zengyonglan
  • zengyonglan
  • 2016-11-23 09:47:37
  • 2657

CSS的盒子模型案例

CSS的功能可谓强大,作为程序员,不能只在后台默默无闻,也要到前台爽一把,意思意思,这样自己干活从前台 界面到后台数据库就算是全能了。能给自己省了不少力气,艺多不压身嘛,下面来介绍一下CSS里面的盒...
  • a352193394
  • a352193394
  • 2012-03-23 21:07:01
  • 2847

大一软件专业实训报告

实训报告 我于2014年6月3日致6月8日进行了学校安排的实训,这次特意将专业见习提到大一,在本月的六月三号,我们开始了为期一星期的专业见习。这次实训让我们大一学生更好的了解自己本专业的知识以及将来...
  • worldwsyw
  • worldwsyw
  • 2014-06-09 13:19:17
  • 637

CSS核心内容-标准流、盒子模型、浮动、定位

CSS核心内容-标准流、盒子模型、浮动、定位,了解了核心内容才能用CSS设计出一个简单的页面 一、基础 在了解核心内容之前需要先了解HTML中的两种标签:块级元素,行内元素; ...
  • u012704843
  • u012704843
  • 2015-06-27 21:08:58
  • 2049

MySQL实践总结

一直在使用MySQL,本文就工作中常用的MySQL语句及查询优化进行简单的总结,方便自己记忆。...
  • z410970953
  • z410970953
  • 2016-01-06 19:59:15
  • 1075

HTML,CSS实训笔记

HTML笔记 1、HTML -- 超文本标记语言 2、html 结构 (代表H5)                         3、常用...
  • wjlvxuewei
  • wjlvxuewei
  • 2017-09-09 10:19:41
  • 166

电子信息工程技术专业实训报告

  • 2009年11月12日 22:39
  • 37KB
  • 下载
    个人资料
    持之以恒
    等级:
    访问量: 625
    积分: 345
    排名: 22万+
    文章存档