常正慧_20200113-常正慧

知识点

transform

  • transform 是 css3 的属性,该属性应用于元素的2D或3D转换。这个属性允许你将元素旋转,缩放, 移动,倾斜等。


    • transform: none|transform-functions;
  • 常用的值有

transition

  • transition 属性设置元素当过渡效果,四个简写属性为:

      1. transition-property 指定CSS属性的name,transition效果
      2. transition-duration transition效果需要指定多少秒或毫秒才能完成
      3. transition-timing-function 指定transition效果的转速曲线
      4. transition-delay 定义transition效果开始的时候
    • 语法

    • transition: property duration timing-function delay;
      
  • transition-timing-function 常用的值有:

    • >

动画

  • 动画属性可以逐渐地从一个值变化到另一个值,比如尺寸大小、数量、百分比和颜色 定义语法:

    • >
      > @keyframes animationName{
      > from {}
      > to {}
      > }
      >
  • 使用

    • animation: name duration timing-function delay iteration-count direction
      fill-mode play-state;
      

其他属性

列表属性

  • list-style

    • > 1. list-style:none; 没有点的呈现
      > 2. list-style: disc; 呈现圆点
      > 3. list-style: circle; 空心圆
      > 4. list-style: square;正方块

透明度

  • opacity: 0.8; /属性值 [0-1] 0:完全透明 1:不透明/

光标

  • cursor: pointer; 手型

  • cursor: url(img/menghuan.ico),auto; 鼠标效果 图片样子

    • > 1. repeat 水平和垂直方向都重复
      > 2. default 默认光标
      > 3. help 指示可用的帮助(通常是一个问号或一个气球)
      > 4. wait 指程序正忙(通常是一个表或沙漏)

设置多余文本省略

  • > 1. white-space:nowrap; //空白文本处理,nowrap不换行
    > 2. text-overflow:ellipsis; //超出文本显示为省略号
    > 3. overflow: hidden; //超出部分隐藏

布局排版

  • CSS页面布局技术允许我们拾取网页中的元素,并且控制它们相对正常布局流、周边元素、父容器或者 主视口/窗口的位置。在这将涉及更多关于页面布局技术的细节:

    • > 1. 正常布局流
      > 2. display 属性
      > 3. 弹性盒子
      > 4. 网格
      > 5. 浮动
      > 6. 定位
      > 7. CSS 表格布局
      > 8. 多列布局

正常的布局流

  • 正常布局流(normal flow)是指在不对页面进行任何布局控制时,浏览器默认的HTML布局方式。

    • >
      > <body>
      > <p>I love my cat.</p>
      > <ul>
      > <li>Buy cat food</li>
      > <li>Exercise</li>
      > <li>Cheer up friend</li>
      > </ul>
      > <p>The end!</p>
      > </body>
      >
  • 默认情况如下图显示

    • HTML元素完全按照源码中出现的先后次序显示——第一个段落、无序列表、第二个段落。

  • 当你使用css创建一个布局时,你正在离开正常布局流,但是对于页面上的多数元素,正常布局流将完 全可以创建你所需要的布局。从一个结构良好的Html文档开始是如此重要,因为你可以按照默认的方式 来搭建页面,而不是自己发明轮子。

浮动

  • float 属性最初只用于在成块的文本内浮动图像,但是现在它已成为在网页上创建多列布局的最常用 工具之一。

  • 使用float来让图片周围的文本浮起来。

    • >
      > img {
      > float: left;
      > margin-right: 30px;
      > }
      >
  • 注意浮动内容仍然遵循盒子模型诸如外边距和边界。我们设置一下图片右侧的外边距就能阻止右 侧的文字紧贴着图片。

多列浮动

  • >
    > div:nth-of-type(1) {
    > width: 48%;
    > float: left;
    > }
    > div:nth-of-type(2) {
    > width: 48%;
    > float: right;
    > }
    > /*
    > nth-of-type(n) 选择器匹配同类型中的第n个同级兄弟元素
    > */
    >

清除浮动

  • 我们很快就会碰到一个问题——所有在浮动下面的自身不浮动的内容都将围绕浮动元素进行包装,如果 没有处理这些元素,就会变得很糟糕。

  • clear 属性,当你把这个应用到一个元素上时,它主要意味着"此处停止浮动"——这个元素和源码中后 面的元素将不浮动,除非将一个新的 float 声明应用到此后的另一个元素。

    • >
      > footer {
      > clear: both;
      > }
      >
  • clear可以取三个值

    • > 1. left :停止任何活动的左浮动
      > 2. right :停止任何活动的右浮动
      > 3. both :停止任何活动的左右浮动
  • 小总结

      1. 脱离文档流,不占原来的文档流位置
      2. 浮动元素在父元素中所占的面积的有效高度为0
      3. 非浮动元素的外边距不能用于它们和浮动元素之间来创建空间
    • 注意:如果有浮动,一定要定义一个父容器,而且一定要定义父容器宽和高。

心得体会

通过三天的学习,我们学完了HTML5CSS3的大部分基础知识,也做了很多必要的练习,每次的练习都能发现新的问题,掌握新的知识,虽然有时候感觉学习很累,但我认为这是值得的,毕竟我自愿来这里的目的就是学习。对于今天下午讲的旋转相册基本逻辑我是搞明白了,只是自己还写不出来,总的来说还是没掌握好基础知识,记得老师说过学习编程最好的方法就是多敲代码,多练习,我会努力提高自我的。

标签

评论

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