扩展部分
浮动补充
- 浮动盒子的顶边不得高于上一个盒子的顶边
- 若剩余空间无法放下浮动的盒子，则该盒子向下移动，直到具备足够的空间能容纳盒子，然后再向左或向右移动
body背景
画布 canvas
一块区域
特点：最小宽度和最小高度都是视口的宽高
HTML元素的背景
覆盖画布
body元素的背景
如果HTML元素有背景，body元素正常（背景覆盖边框盒）
如果HTML元素没有背景，body元素的背景覆盖画布
关于body背景图
就是坑
- 背景图的宽度百分比，是相对于视口
- 背景图的高度百分比，是相对于HTML元素，也就是相对于网页高度
- 背景图的横向位置百分比、预设值，相对于视口（background-position）
- 背景图的纵向位置百分比、预设值，相对于网页高度
行高的取值
- px,像素值
子元素直接继承 - 无单位的数字
是先继承，再计算，所以子元素的行高是子元素的font-size*继承的数字 - em单位
- 百分比
em和百分比都是先计算再继承的，就是先计算出像素值，然后子元素继承像素值
参考线-深入理解字体
font-size、line-height、vertical-align、font-family
文字
文字是通过一些软件制作的
有五根参考线
text-top，ascent，顶线
super，上基线
baseline,基线
sub，下基线
text bottom，descent，底线
font-size
字体大小设置的是文字的相对大小
文字的相对大小：1000,2048,1024
文字顶线到底线的距离，是文字的实际大小（content-area，内容区）
行盒的背景，覆盖content-area
行高
顶线向上延伸的空间和底线向下延伸的空间，两个空间相等，该空间叫做gap（空隙）
gap 默认情况下，有字体设计者决定
top到bottom，叫做virtual-area（虚拟区）
行高就是虚拟区
对于行盒来说，背景颜色填充的是text top到text bottom
line-height:normal，默认值，使用文字默认的gap
多行文本的部分重叠有可能是由于虚拟区小于内容区导致的
content-area一定出现在virtual-area的中间
vertical-align
决定参考线：font-size，font-family，line-height
一个元素如果子元素出现行盒，该元素内部也会产生参考线
baseline:（也就是一般的默认值）该元素的基线与父元素的基线对齐
super:该元素的基线与父元素的上基线对齐
sub:表示该元素的基线与父元素的下基线对齐
text-top:该元素的vertical-area的顶边，对齐父元素的text-top
text-bottom:该元素的vertical-area的底边，对齐父元素的text-bottom
top:该元素的virtual-area的顶边对齐line-box的顶边（该行中的最高顶边）
bottom:该元素的virtual-area的底边对齐line-box的底边（该行中的最低底边）
middle:该元素的中线（content-area的一半）与父元素的X字母高度一半的位置对齐
行盒组合起来，可以形成多行，每一行的区域叫做line-box（行框），line-box的顶边是该行内所有行盒最高顶边，底边是该行行盒的最低底边
实际上，一个元素的实际占用高度（高度自动），高度的计算通过line-box计算
取值还可以取数值，百分比
数值：相对于基线的偏移量，向上为正数，向下为负数
百分比：相对于基线的偏移量，百分比是相对于自身virtual-area的高度
line-box是承载文字内容的必要条件，以下情况不生成行框：
- 某元素内部没有任何行盒
- 某元素字体大小为0
可替换元素和行块盒的基线
图片：基线位置位于图片的下外边距
解决图片的底部白边：1. 设置font-size为0 2. 设置img元素的display为block
表单元素：基线位置在内容底边
行块盒：
- 行块盒最后一行有line-box，用最后一行的基线作为整个行块盒的基线
- 如果行块盒内部没有行盒，则使用下外边距作为基线
svg
svg:scalable vector graphics,可缩放的矢量图
- 该图片使用代码书写而成
- 缩放不会失真
- 内容轻量
怎么使用
svg可以嵌入浏览器，也可以单独成为一个文件
xml语言，svg使用该语言定义
- 直接嵌入到浏览器里面
- 使用img，当做外部文件使用
- 当做背景图
- 还可以使用embed、object、iframe元素
书写svg代码
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
</svg>
直接在svg里面设置宽高不带单位,带px也可以
矩形：rect
修改图案颜色使用fill属性，颜色的书写和之前的一样
stroke="#008c8c"
<!-- 表示描边（差不多是边框的意思）颜色 -->
stroke-width="2px"
<!-- 表示描边宽度 -->
x="100" y="100"
<!-- 设置位置，位置的定点在矩形的左上角 -->
效果如下图：
圆形：circle
cx="200" sy="200"
<!-- 设置的是圆的中心点的坐标，cx=center x，cy同理 -->
r="50"
<!-- 表示半径的大小 -->
椭圆：ellipse
rx="80" ry="30"
<!-- 分别表示设置椭圆的长轴和短轴，同样和圆一样有cx，cy -->
线条：line
x1="10" x2="150" y1="150" y2="300"
<!-- x1，y1，x2，y2分别表示线段的两点坐标 -->
折线：polyline
points="300,150,320,150,320,170"
<!-- 按顺序书写每个点的坐标 -->
<!-- 他的填充效果是把第一个点和最后一个点连起来，填充这条线和所有点之间的内容 -->
效果图如下，
多边形：polygon
<polygon points="100,400,150,500,200,400" stroke="blue" stroke-width="3" fill="pink"/>
效果如下图:
路径：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
rx,是长轴 ry，是短轴
angle，是椭圆绕中心点旋转的角度
large-arc-flag,是表示取优弧还是劣弧（就是长弧或者短弧），1表示取长弧，0表示取短弧
sweep-flag，表示弧线是按照顺时针还是逆时针，1表示顺时针，0表示逆时针
最后的x，y表示终点坐标
- Z = closepath
表示最后闭合线条
<path d="M0 150 A150 150 0 0 1 150 0" stroke="#000" stroke-width="3" fill="pink"/>
效果图如下，
例子，画太极
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="500" height="500" style="background-color:lightblue;" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path d="M250 50 A100 100 0 0 0 250 250 A100 100 0 0 1 250 450 A200 200 0 1 1 250 50" fill="#000"/>
<path d="M250 50 A100 100 0 0 0 250 250 A100 100 0 0 1 250 450 A200 200 0 1 0 250 50" fill="#FFF"/>
<circle cx="250" cy="150" r="30"/>
<circle cx="250" cy="350" r="30" fill="#fff"/>
</svg>
效果图如下，
数据链接
date url
如何书写
数据链接：表示将目标文件的数据直接书写到路径位置
语法：date:MIME,数据（文件的内容）
意义
优势：
-
减少了浏览器中的请求浪费的时间
-
有利于动态生成数据
劣势：
-
增加了页面内容也就是增加了资源的体积，从而增加了单个资源的传输时间
-
不利于浏览器的缓存
应用场景：
-
当请求单个图片体积较小，并且该图片因为各种原因，不适合制作雪碧图，可以使用数据链接。
-
图片由其他代码动态生成，并且图片较小，可以使用数据链接
-
使用base64会增加原资料的体积的4/3
base64
一种编码方式
通常用于将一些二进制数据，转换成可书写的字符串来表示