html

  • 行内元素：

    行内元素不可以设置宽（width）和高（height），但可以与其他行内元素位于同一行，行内元素内一般不可以包含块级元素。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    <a>     // 标签可定义锚 
    <b>     // 字体加粗 
    <br>     // 换行 
    <em>     // 定义为强调的内容
    <i>     // 斜体文本效果
    <small>     // 呈现小号字体效果
    <span>     // 组合文档中的行内元素
    <strong> // 加粗
    <code>    // 定义计算机代码文本
    <abbr>     // 表示一个缩写形式 
    <time>  

    <cite>     // 引用进行定义 
    <dfn>     // 定义一个定义项目
    <kbd>     // 定义键盘文本
    <label>     // 标签为 input 元素定义标注（标记）
    <q>     // 定义短的引用
    <samp>     // 定义样本文本
    <select> // 创建单选或多选菜单
    <sub>     // 定义下标文本
    <sup>     // 定义上标文本
    <textarea>     // 多行的文本输入控件
    <tt>     // 打字机或者等宽的文本效果
    <var>    // 定义变量
    <bdo>     // 可覆盖默认的文本方向 
    <big>     // 大号字体加粗 
    <acronym>     // 定义只取首字母缩写

  • 块级元素：

    有自己的宽度和高度，也就是可自定义 width 和 height。它独自占据一行高度（float浮动除外），一般可以作为其他容器使用，可容纳块级元素和行内元素。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    <div></div>
    <p></p>
    <h1></h1> - <h6></h6>
    <ul></ul>, <ol></ol>, <li></li>
    <table></table>, <thead></thead>, <tbody></tbody>, <tr></tr>, <th></th>, <td></td>
    <form></form>     // 创建 HTML 表单 
    <blockquote></blockquote>
    <address></address>      // 定义地址 
    <hr />       // 创建一条水平线
    <header></header>, <footer></footer>, <section></section>, <article></article>
      
    <dl>    // 定义列表 
    <dt>     // 定义列表中的项目
    <dd>      // 定义列表中定义条目 
    <fieldset>  // 定义一个框架集 
    <legend>    // 元素为 fieldset 元素定义标题
    <noframes>    // 为那些不支持框架的浏览器显示文本，于 frameset 元素内部
    <noscript>    // 定义在脚本未被执行时的替代内容
    <pre>     // 定义预格式化的文本
    <caption>  // 定义表格标题

  • 行内块元素：

    高度、行高、外边距以及内边距都可以控制；

    默认宽度就是它本身内容的宽度，不独占一行，但是之间会有空白缝隙，设置它上一级的 font-size 为 0，才会消除间隙；

    1
    2
    3
    4
    5
    <button> 
    <input>   
    <textarea> 
    <select> 
    <img>

  • 自闭合标签

    类似 <img> 这样的自闭合标签用于插入内容，通常不需要额外的闭合标签，因为它们本身并不包含其他内容。以下是一些类似的自闭合标签：

  1. <img>： 用于插入图像。

    1
    <img src="example.jpg" alt="Example Image">

  2. <input>： 用于创建各种输入元素，如文本框、复选框等。

    1
    <input type="text" name="username">

  3. <br>： 用于插入换行。

    1
    <p>This is a line.<br>This is a new line.</p>

  4. <hr>： 用于插入水平线。

    1
    <p>Some text above<hr>Some text below.</p>

  5. <meta>： 用于设置关于文档的元信息，通常在 <head> 部分使用。

    1
    <meta charset="UTF-8">

  6. <link>： 用于定义文档与外部资源的关系，常用于链接样式表。

    1
    <link rel="stylesheet" href="styles.css">

  7. <base>： 用于设置文档中所有相对链接的基准 URL。

    1
    <base href="https://example.com/">

  8. <br>： 用于插入换行。

    1
    <p>This is a line.<br>This is a new line.</p>

css

常用单位

  • 百分比:

    width和height分别参考父元素的宽度和高度

    padding-top:50%;padding-left:50%; padding的百分比都是参考父元素的宽度，margin同理

    不能通过百分比来设置border

  • em:
    相对于元素字体大小的单位1em=一个字体大小

    如果当前元素没有设置字体大小，会找到逐级上找字体大小作为参考，如果找到html都没有，会使用浏览器默认的字体大小16px

  • rem:
    相对于html的字体大小，只听html设置的字体大小，如果html没有设置字体大小，就听浏览器默认的字体大小

  • vw:

    相对于网页视口的宽度

  • vh:

    相对于网页视口的高度

  • vmin:

    vw和vh中较小的那个

  • vamx：

    vw和vh中较大的那个

    使用场景：保证移动开发中屏幕旋转之后尺寸不变

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>05-前端开发常用单位-vwvh</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            div{
                width: 10vmin;
                height: 10vmax;
                background: red;
            }
        </style>
    </head>
    <body>
    <div></div>
    <script>
        //元素的视口宽度和高度
        console.log(window.innerWidth, window.innerHeight);
        let oDiv = document.querySelector("div");
       //获取元素的属性 
        console.log(getComputedStyle(oDiv).width);
        console.log(getComputedStyle(oDiv).height);
    </script>
    </body>
    </html>

css3边框

border-radius

边框圆角

边框以border-radius为半径画的圆弧

椭圆：border-radius:50%，50%；

  • 当省略了某一个角的值之后，系统会自动参考对角的值

  • 当边框圆角border-radius的值>边框宽度border的时候，外边框和内边框都会变成圆角

    当边框圆角的值<=外边宽度的时候，外边框是圆角，内边框是直角

border-image

边框图片

1
2
border-image: source slice width outset repeat; 
border-image:url('') 20 repeat;  距边20px，四角（20px*20px）边平铺
  • source: 图像的路径。
  • slice: 用于指定图像的切片区域。可以使用百分比或长度值。
  • width: 用于指定图像的宽度。可以使用百分比、长度值、或关键字。fill：切割之后，剩余的部分也显示背景图片，那为什么都要全显示背景图片了，还要使用切割呢，因为可以保持四个角不会变，而其余部分可以平铺或者拉伸
  • outset: 用于指定图像超出边框的距离。可以使用长度值。
  • repeat: 用于指定图像在边框上的重复方式，可以是stretch、repeat、或round。round:当边框的尺寸不能完全整除图像尺寸时，浏览器会自动调整图像的重复次数，以达到最佳的视觉效果。

当设置了一个盒子的背景图片，如果以后盒子的大小要根据内容变大，背景也要变宽。

通过background-size设置大小会使得图片拉伸而变形。在过去没有边框图片，我们使用滑动门，现在我们使用边框图片

滑动门

三张背景图片，放在左中右，中间是一个1px的图片，使用repeat平铺，左右的图片不平铺。当盒子宽度变宽，只有中间的背景图片平铺增加，左右两边的有图形的不变形。

边框图片

当盒子大小改变，只有四个角的边框图片始终不变，而边是拉伸或平铺的

vertical-align

六线：盒子顶部、底部，文字顶部、底部，基线。 基线：一行文字中最短那个文字的底部。默认情况下图片和一行文字的基线对齐

text-align是设置给需要对齐元素的父元素

vertical-align是设置给需要对齐的那个元素本身，只对行内元素有效

1
2
3
4
5
6
7
8
img{
    vertical-align:baseline; 图片底部和基线对齐，如果盒子放不下盒子向上扩大，默认情况下图片和文字基线对齐
    vertical-align:top; 图片顶部和盒子顶部对齐
    vertical-align:bottom; 图片底部和盒子底部对齐
    vertical-align:text-top; 图片顶部和文字顶部对齐
    vertical-align:text-bottom; 图片底部和文字底部对齐
    vertical-align:middle; 图片和文字中线对齐（中线：不是文字的中间，而是基线往上走1/4的位置
}

渐变

线性渐变

1
2
3
4
5
6
7
div{
    background:linear-gradient(red,green);默认情况下从上至下渐变
    background:linear-gradient(to top,red,green);从下至上渐变，还可以to left从右至左
    background:linear-gradient(to top right,red,green);往右上角渐变
    background:linear-gradient(0deg,red,green);表示从下至上渐变
    background:linear-gradient(45deg,red,green);往45deg方向渐变
}

注意点：

  1. 至少要传递两个颜色，至多无上限

  2. 默认情况下系统会自动计算纯色和渐变色的范围，但是我们也可以手动指定

    手动指定的格式：颜色 范围

    除了第一个是指定纯色的范围，后面指定的都是渐变的范围

    1
    2
    3
    div{
        background:linear-gradient(red 100px,green 200px);纯色红色有100px,上一个红色纯色结束开始的200px都是渐变色
    }

练习：

-webkit-background-clip可以将背景图片裁剪为文字的形状（即除文字部分之外的背景都被裁掉了，不显示）

步骤：

1.文字改为透明色transparent或者设置rgba(255,255,255,0.3)

2.背景裁剪为只在文字显示-webkit-background-clip:text;

3.使用

1
2
3
4
5
6
7
8
div{
-webkit-background-clip:text;
background-position:-450px 0;
transition:all 5s;
}
div:hover{
background-position:450px 0;
}

注意点：

  1. 私有属性，并不是所有浏览器都能识别、
  2. -ms 代表ie内核识别码
  3. -moz 代表火狐firefox内核识别码
  4. -webkit 代表谷歌chrome/苹果safari内核识别码
  5. -o 代表欧朋opera内核识别码
  6. 渐变其实相当于背景图片可以使用定位

径向渐变

从某一个位置开始向四周扩散

1
2
3
4
5
6
div{
    background:radial-gradient(red,green);默认从中心点向四周扩散（红->绿）
    background:radial-gradient(at top left,red,green);从左上角向四周扩散
    background:radial-gradient(at 200px 100px,red,green);从水平200px,垂直100px的位置开始
    background:radial-gradient(100px at 200px 100px,red,green);扩散范围是100px
}

伸缩布局

让块级元素水平排版并且要撑起父元素

法一：把li设置成inline-block，但是会有一个小间隙，去除li元素之间的换行即可去除小间隙，但是代码可读性差

法二：子元素设置浮动，还要在父元素清除浮动，否则父元素高度为0

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
ul{
    list-style:none;
    width:600px;
    border:1px solid #000;
    margin:100px auto;
    /**清除浮动**/
    overflow:hidden;
}
ul>li{
    width:100px;
    height:100px;
    line-height:100px;
    text-align:center;
    float:left;
}

法三：flex布局

父元素是伸缩容器，子元素是伸缩项

diplay:flex;

flex-direction:row;row-reverse;column;column-reverse主轴方向

justify-content:flex-start;center;flex-end;space-between;space-around;主轴对齐方式

align-items:flex-start;center;flex-end;baseline;stretch;(拉伸对齐，让所有伸缩项高度变为侧轴高度，伸缩项不能设置高度，如果设置了，拉伸效果失效）侧轴对齐方式 (align-self控制某一个伸缩项在侧轴的对齐方式，写在伸缩项中)

侧轴没有space-between;和space-around;对齐方式

flex-wrap:nowrap;wrap;wrap-reverse;放不下是否需要换行，而不是等比压缩，如果反转是以行为单位反转的

align-content:flex-start;flex-end;center;space-between;space-around;stretch;（以行为单位进行拉伸，拉伸部分以空白填充，保证拉伸之后所有行加起来填满侧轴）设置换行之后的和侧轴的对齐方式，只有伸缩项发生了换行这个属性才有效

order:0;1;2;…伸缩项属性，越小的显示在越前面，伸缩项排序，每个伸缩项都有这个属性

flex-grow:0;2;1;伸缩项扩充，只有当伸缩项宽度总和小于伸缩容器的宽度时，如何扩充自己，以便于所有伸缩项宽度的总和能够填满整个伸缩容器，默认为0，表示我们设置的宽度是多少就按照多少来显示，不进行扩充

flex-grow扩充公式：

1.伸缩容器宽度-所有伸缩项宽度=剩余空间

2.利用剩余空间/所有需要扩充份数的总和=每一份大小

3.用当前伸缩项宽度+对应得份数的宽度

flex-shrink:1;0;只有当伸缩项宽度总和大于伸缩容器的宽度时，如何缩小自己，以便于所有伸缩项宽度的总和能够填满整个伸缩容器，默认为1，表示只有当大于容器宽度时，等比缩小，0表示不缩小，溢出显示。

1.所有伸缩项宽度总和-伸缩容器宽度=溢出的宽度

2.计算权重值

每一个伸缩项需要的份数*当前伸缩项的宽度 然后再相加

3.计算每个伸缩项需要缩小的范围

溢出的宽度 * 当前伸缩项的宽度 * 当前伸缩项需要的份数/权重值

flex-basis:100px;auto;可以通过这个设置伸缩项的宽度，它的优先级要高于width的优先级，如果一个设置为auto，一个设置为具体值，会使用具体值（不论是width还是flex-basis）

flex:扩充 缩小 宽度;连写属性，设置伸缩项的扩充，缩小和宽度。默认值0,1,auto;

移动端

视口

1.什么是视口?
视口简单理解就是可视区域大小我们称之为视口
在PC端，视口大小就是浏览器窗口可视区域的大小

在移动端, 视口大小并不等于窗口大小, 移动端视口宽度被人为定义为了980

2.为什么是980而不是其他的值?
因为过去网页的版心都是980
乔老爷子为了能够让网页在移动端完美的展示, 所以将iOS手机视口的大小定义为了980
后来谷歌也觉得这是一个非常牛X的方案, 所以Android手机的视口也定义为了980

3.移动端自动将视口宽度设置为980带来的问题
虽然移动端自动将视口宽度设置为980之后让我们可以很完美的看到整个网页
但是由于移动端的物理尺寸(设备宽度)是远远小于视口宽度的
所以为了能够在较小的范围内看到视口中所有的内容, 那么就必须将内容缩小
(和前面讲解Canvas时讲解的viewbox一样, 近大远小原理)

4.如何保证在移动端不自动缩放网页的尺寸?
通过meta设置视口大小

1
<meta name="viewport" content="width=device-width, initial-scale=1.0">

width=device-width 设置视口宽度等于设备的宽度

initial-scale=1.0 初始缩放比例，1.0不缩放，小于1缩小，大于1放大

maximum-scale：允许用户缩放到的最大比例

minimum-scale：允许用户缩放到的最小比例

user-scalable：用户是否可以手动缩放

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>06-前端开发-视口</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        /*
        div{
            margin: 0 auto;
        }
        .header-in{
            width: 980px;
            height: 100px;
            background: red;
        }
        .main-in{
            width: 980px;
            height: 300px;
            background: green;
        }
        .footer-in{
            width: 980px;
            height: 100px;
            background: blue;
        }
         */
        div{
            width: 200px;
            height: 200px;
            background: red;
        }
    </style>
</head>
<body>
<div></div>
<!--
<div class="header">
    <div class="header-in"></div>
</div>
<div class="main">
    <div class="main-in"></div>
</div>
<div class="footer">
    <div class="footer-in"></div>
</div>
-->
<script>
  
    console.log(window.innerWidth, window.innerHeight);
</script>
</body>
</html>

动画

transition

状态切换动画

核心：找到首末状态

1.事件触发

2.单次事件

3.明确定义两种状态

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
/* 事件开始和结束都要做transition，把transition放在DOM上 */
.content {
    height: 100px;
    width: 200px;
    background-color: green;
    transition: width 2s ease-in-out;
}

.content:hover {
    width: 800px;
}

/* 如果放在事件上：鼠标hover时会缓慢增长，但是拿出会立即变短 */
.content {
    height: 100px;
    width: 200px;
    background-color: green;

}

.content:hover {
    width: 800px;
    transition: width 2s ease-in-out;
}

/* 多个状态改变 ，改变宽度和高度*/
.content {
    height: 100px;
    width: 200px;
    background-color: green;
    transition: all 1s 0.5s ease-in-out;
}

.content:hover {
    height: 300px;
    width: 800px;
    background-color: red;
}

/* 部分属性改变 */
.content {
    height: 100px;
    width: 200px;
    background-color: green;
    transition-property: width, height;
    transition-delay: 0.5s;
    transition-timing-function: ease-in-out;
}

.content:hover {
    width: 800px;
    width: 800px;
    background-color: red;
}

问题：

如果我想实现以下

1.加载时自定义开始

2.不由事件驱动，非一次性动画

3.多状态动画

就需要使用帧式动画animation

animation

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
.content {
    height: 100px;
    width: 200px;
    /* forward是保留最后一帧 alternate是交替 */
    animation: 3s type forwards alternate infinite;
    /* 默认开始状态为执行 */
    animation-play-state: running;
}

.content:hover {
    animation-play-state: paused;
}

@keyframes type {
    from {
        background-color: red;
    }

    50% {
        background-color: yellow;
    }

    to {
        background-color: green;
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
/* 实现loading框 */
.content {
    height: 100px;
    width: 100px;
    border-width: 0 0 2px 2px;
    border-style: solid;
    border-radius: 50%;
    border-color: gray;
    animation: type 2s forwards linear infinite;
    animation-play-state: running;
}

@keyframes type {
    0% {
        transform: rotate(0);
    }
    /*非匀速加载*/
    /* 50% {
        transform: rotate(60deg);
    } */
    100% {
        transform: rotate(360deg);
    }
}

canvas用法

<canvas>看起来和<img>元素很相像，不同就是它并没有 src 和 alt 属性，而且canvas必须有结束标签，否则标签后的内容将被认为是替代内容，将不会显示出来。<canvas> 标签只有两个属性—— width和height。

getContext()方法用来获得渲染上下文和它的绘画功能，可以传入一个参数表示上下文类型ctx.getContext(‘2d’)

基本动画

太阳系的动画

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
var sun = new Image();
var moon = new Image();
var earth = new Image();
function init() {
  sun.src = "canvas_sun.png";
  moon.src = "canvas_moon.png";
  earth.src = "canvas_earth.png";
  window.requestAnimationFrame(draw);
}

function draw() {
  var ctx = document.getElementById("canvas").getContext("2d");
//设置绘图合成模式
  ctx.globalCompositeOperation = "destination-over";
  ctx.clearRect(0, 0, 300, 300); // clear canvas

  ctx.fillStyle = "rgba(0,0,0,0.4)";
  ctx.strokeStyle = "rgba(0,153,255,0.4)";
  ctx.save();
    //太阳的位置，设为绘图原点
  ctx.translate(150, 150);

  // Earth
  var time = new Date();
    //实现地球的公转和自转
    //(2 * Math.PI) / 60) * time.getSeconds()自转角度加上(2 * Math.PI) / 60000) * time.getMilliseconds()公转角度实现绕着太阳绘图原点旋转的效果
  ctx.rotate(
    ((2 * Math.PI) / 60) * time.getSeconds() +
      ((2 * Math.PI) / 60000) * time.getMilliseconds(),
  );
    //平移至地球的位置，设为绘图原点
  ctx.translate(105, 0);
  ctx.fillRect(0, -12, 50, 24); // 地球阴影
  ctx.drawImage(earth, -12, -12);

  // Moon
  ctx.save();
  ctx.rotate(
    ((2 * Math.PI) / 6) * time.getSeconds() +
      ((2 * Math.PI) / 6000) * time.getMilliseconds(),
  );
  ctx.translate(0, 28.5);
  ctx.drawImage(moon, -3.5, -3.5);
  ctx.restore();

  ctx.restore();

  ctx.beginPath();
  ctx.arc(150, 150, 105, 0, Math.PI * 2, false); // Earth orbit
  ctx.stroke();

  ctx.drawImage(sun, 0, 0, 300, 300);
//请求下一帧动画，实现动画效果。屏幕刷新率为 60Hz，这意味着浏览器每隔约 16.67 毫秒（1秒/60）会进行一次屏幕刷新。因此，如果你使用 requestAnimationFrame 请求动画帧，浏览器会尽量在接近每秒 60 次的速度下调用你的回调函数。
  window.requestAnimationFrame(draw);
}

init();

高级动画

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
let raf;

const ball = {
  x: 100,
  y: 100,
  vx: 5,
  vy: 2,
  radius: 25,
  color: "blue",
  draw() {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
    ctx.closePath();
    ctx.fillStyle = this.color;
    ctx.fill();
  },
};

function draw() {
    //这里我们使用的是clearRect来清楚前一帧的动画，如果使用ctx.fillStyle = "rgba(255,255,255,0.3)";ctx.fillRect(0, 0, canvas.width, canvas.height);使用一个半透明的fillRect即可实现长尾效果
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ball.draw();
  ball.x += ball.vx;
  ball.y += ball.vy;
  ball.vy *= 0.99;
  ball.vy += 0.25;

  if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
      //反转速度，改为减y上的坐标
    ball.vy = -ball.vy;
  }
  if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
    ball.vx = -ball.vx;
  }

  raf = window.requestAnimationFrame(draw);
}

canvas.addEventListener("mouseover", (e) => {
  raf = window.requestAnimationFrame(draw);
});

canvas.addEventListener("mouseout", (e) => {
  window.cancelAnimationFrame(raf);
});

ball.draw();