ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

HTML笔记

2021-09-17 18:02:17  阅读:134  来源: 互联网

标签:动画 盒子 flex 元素 transform 笔记 HTML background


前端基础总结

HTML常见的显示模式分三种:块级元素、行内元素、行内块元素

区别:

块级元素:独占一行,宽度默认占满父元素的宽度,高度默认由内容撑开;可以设置宽高

行内元素:一行可以显示多个;宽度和高度由内容撑开;不可以设置宽高

行内块元素:一行可以显示多个;可以设置宽高

行内块元素有(input、button等)

  • html优秀代码特性:简洁性、可读性、鲁棒性(健壮性)
  • 在显示过渡效果时transitiondisplay:none/block无效
  • 行内块元素使用 transform 是没有效果的
  • img标签设置伪元素(::before ::after)无效
background属性连写
//连写语法:background: 背景颜色 url 平铺 位置/大小
//默认背景颜色为透明
.manager{
  background: url(../images/address.png) no-repeat top/18px 25px;
}

移动web学习

1. 学习内容:字体图标、平面转换、背景渐变

  • 字体图标:iconfont的应用

  • 平面转换:位移(transform: translate(水平位移, 垂直位移))、旋转(transform: rotare(deg))、旋转原点(transform-origin:水平位置,垂直位置)、缩放(transform: scale())

注意点:在平移和旋转同时进行的时候,要先写平移。缩放和旋转没有顺序

​ 旋转要必须搭配transition过渡使用,其他平面转换搭配实现效果更好

  • 背景渐变:background-image: linear-gradient(方位:to right /角度 , 颜色1, 颜色2, …)

2. 学习内容:动画、了解空间转换

  • 动画:使用步骤:第一步定义动画,第二步调用动画
     /*第一步定义动画*/


	/* 一. 定义动画:让宽度从200变大到600 */
      @keyframes move {
        to {
          width: 600px;
        }
      }
      /* 二. 定义动画:200*100 到 500*300 到 800*500 */
      /* 百分比指的是动画总时长的占比 */
      /* running 不能作为动画名称,否则动画失效 */
      @keyframes change {
        50% {
          width: 500px;
          height: 300px;
          background-color: orange;
        }
        100% {
          width: 800px;
          height: 500px;
          background-color: purple;
        }
      }
/*调用动画*/
			animation: move 5s;//谁调用就写在哪

调用动画
动画播放次数:infinite 无限次播放
动画播放方向:alternate 交替播放
速度曲线:默认 ease; linear 匀速播放
执行完毕时的状态:forwards 动画会停在动画结束时的状态
animation 里面属性值 不分先后顺序
当属性值里有两个时间,第一个时间永远表示动画时长,第二个表示等待时间

注意点:forwards不能和infinite结合使用,否则不生效

  • 空间转换:平移(和2d比多个Z)、旋转和2d比多个Z、透视(perspective:距离px)、3d呈现(transform-style:preserve-3d)、左手定则

注意:当使用transform:translateZ()时要搭配透视才能看出效果

  • 透视效果:近大远小, 近实远虚,

  • //前三个值是书写矢量 决定自定义轴线的方向,最后一个角度,代表旋转的角度
    transform: rotate3d(1,1,0,45deg);
    

3. 学习内容:flex布局 (弹性布局)、百分比布局(流式布局)

  • 百分比布局

    特点:宽度自适应,高度固定

  • flex布局

    目标:能够使用flex布局模型灵活、快速的开发网页

    作用:基于flex精确灵活控制块级盒子的布局方式,避免浮动布局中脱离文档流的现象发生,且非常适合结构化布局

    设置方式:父元素添加display: flex ,子元素可以自动的挤压或拉伸

    组成部分:弹性容器、弹性盒子、主轴、侧轴/交叉轴。 (其中父元素为弹性容器,子元素为弹性盒子)

    在这里插入图片描述

    flex属性

    1. 主轴对齐方式:justify-content

    1. 侧轴对齐方式:align-items

    在这里插入图片描述

    1. 改变主轴方向:flex-direction

      主轴默认为水平方向

      在这里插入图片描述

    1. 弹性盒子换行方式:flex-wrap

      默认换行显示:flex-wrap: wrap

      • 多行对齐属性:align-content 取值与justify-content基本相同

    伸缩比:使用flex属性修改弹性盒子伸缩比

    用法:

      				- flex: 值 
      				- 数值(必须为整数)
      				- 使用就只占父盒子剩余尺寸
    

y-content基本相同

伸缩比:使用flex属性修改弹性盒子伸缩比

用法:

  				- flex: 值 
  				- 数值(必须为整数)
  				- 使用就只占父盒子剩余尺寸

标签:动画,盒子,flex,元素,transform,笔记,HTML,background
来源: https://blog.csdn.net/weixin_45730377/article/details/120353876

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有