【扩展说明】

浮动的细节规则

   浮动盒子的位置

1.左浮动的盒子向上向左排列

2.右浮动的盒子向上向右排列

3.浮动盒子的顶边不得高于上一个盒子的顶边

4.若剩余空间无法放下浮动的盒子，则该盒子向下移动，直到具备足够的空间能容纳盒子，然后再向左或向右移动

行高的取值

 行高 line-height

取值类型

1. px 像素值（绝对单位）

2. 无单位的数字

3. em单位

4. 百分比

行高的设置

行高能够被继承，所以一般都是设置给父元素

对于多行文本来说，设置固定的像素值，会出现问题

当不同文本的字体大小不同时，可能会出现行高太小，文字重叠的情况，也会出现行高太高的情况

em表示当前文字字体大小

计算过程：先计算像素值，后继承，em相对的是元素的字体大小（16px浏览器基准字号）

百分比也是和em单位一样

无单位的纯数字不一样

先继承后计算

line-height:2;

行高为当前字体大小两倍

设置多行文本的行高尽量不要加单位，使用无单位的纯数字

 body背景

**画布 canvas**

一块区域

特点:

1.最小宽度为视口宽度

2.最小高度为视口高度

**HTML元素的背景**

覆盖画布

**BODY元素的背景**

如果HTML元素有背景，BODY元素正常（背景覆盖边框盒）

如果HTML元素没有背景，BODY元素的背景覆盖画布

**关于画布背景图**

1. 背景图的宽度百分比，相对于视口

2. 背景图的高度百分比，相对于网页(HTML元素)高度

3. 背景图的横向位置百分比、预设值，相对于视口

4. 背景图的纵向位置百分比、预设值，相对于网页(HTML元素)高度

svg 可缩放的矢量图

作用：用于在页面中绘制图形

在页面中使用svg

svg可以嵌入浏览器 也可以单独成为一个文件

svg使用xml语言定义，xml语言规定，如果是空元素 在末尾要写闭合标记/

1. 直接嵌到页面上

2. 使用元素

img

embed object（行盒） iframe

svg的标准MIME格式：image/svg+xml

书写svg文件代码

填充颜色 fill

边框颜色 stroke

边框颜色宽度 stroke-width

边框属性可以写到style里

坐标系原点在图片的左上角

### 矩形 rect （rectangle）

设置位置 x y（矩形左上角的坐标）

表示矩形左上角离图象左边框 上边框的距，

### 圆形 circle

位置设置的是圆心坐标 cx cy

大小 半径r

## 椭圆 ellipse

位置设置 中心点坐标 cx cy

大小设置 长半轴短半轴 rx ry

### 线条 line

端点坐标 连接两个点 x1 y1 x2 y2

颜色显示 stroke 描边颜色

        stroke-width 描边宽度

### 折线

polyline

points属性

points="<points>"

填写点坐标 每个数值用逗号隔开

fill 填充范围：把起点和终点连接，这条线与之前的线段围起来的区域

 

### 多边形：polygon

与折线属性一样

### 路径:path

M = moveto

L = lineto

H = horizontal lineto

V = vertical lineto

C = curveto

S = smooth curveto

Q = quadratic Belzier curve

T = smooth quadratic Belzier curveto

A = elliptical Arc

Z = closepath

数据连接

## 如何书写

数据链接：将目标文件的数据直接书写到路径的位置

语法：data:MIME;base64,文件数据

## 优点：

1. 减少浏览器中的请求

减少了请求中浪费的时间 （请求 响应）

2. 有利于动态生成数据

## 缺点：

1. 增加了资源的体积

导致了传输内容增加 从而增加了单个资源的传输时间

2. 不利于浏览器的缓存

浏览器通常会缓存图片文件 css文件 js文件

3. base64编码 会增加原资源的体积到原来的4/3

## 应用场景

1.图片较小 较多 且不能使用雪碧图

2. 图片由其他代码动态生成，并且图片较小 可以使用数据链接

 

## base64

一种编码方式

通常用于 将一些二进制数据 用一个可书写的字符串来表示