body背景
画布 canvas
一块区域
特点：
-
最小宽度为视口宽度
-
最小高度为视口高度
HTML元素的背景
覆盖画布
BODY元素的背景
如果HTML元素有背景，BODY元素正常（背景覆盖边框盒）
如果HTML元素没有背景，BODY元素的背景覆盖画布
关于画布背景图
-
背景图的宽度百分比，相对于视口
-
背景图的高度百分比，相对于网页高度
-
背景图的横向位置百分比、预设值，相对于视口
-
背景图的纵向位置百分比、预设值，相对于网页高度
参考线-深入理解字体
font-size、line-height、vertical-align、font-family
文字
文字是通过一些文字制作软件制作的，比如fontforge
制作文字时，会有几根参考线，不同的文字类型，参考线不一样。同一种文字类型，参考线一致。
font-size
字体大小，设置的是文字的相对大小
文字的相对大小：1000、2048、1024
文字顶线到底线的距离，是文字的实际大小（content-area，内容区）
行盒的背景，覆盖content-area
行高
顶线向上延申的空间，和底线向下延申的空间，两个空间相等，该空间叫做gap（空隙）
gap默认情况下，是字体设计者决定
top到botoom（看ppt图），叫做virtual-area（虚拟区）
行高，就是virtual-area
line-height:normal，默认值，使用文字默认的gap
文字一定出现一行的最中间——错误 content-area一定出现在virtual-area的中间
vertical-align
决定参考线：font-size、font-family、line-height
一个元素如果子元素出现行盒，该元素内部也会产生参考线
baseline：该元素的基线与父元素的基线对齐
super: 该元素的基线与父元素的上基线对齐
sub：该元素的基线与父元素的下基线对齐
text-top: 该元素的virtual-area的顶边，对齐父元素的text-top
text-bottom: 该元素的virtual-area的底边，对齐父元素的text-bottom
top：该元素的virtual-area的定边，对齐line-box的顶边
bottom：该元素的virtual-area的底边，对齐line-box的底边
middle: 该元素的中线（content-area的一半），与父元素的X字母高度一半的位置对齐
行盒组合起来，可以形成多行，每一行的区域叫做line-box，line-box的顶边是该行内所有行盒最高顶边，底边是该行行盒的最低底边。
实际，一个元素的实际占用高度（高度自动），高度的计算通过line-box计算。
行盒：inline-box 行框：line-box
数值：相对于基线的偏移量，向上为正数，向下为负数。
百分比：相对于基线的偏移量，百分比是相对于自身virtual-area的高度
line-box是承载文字内容的必要条件，以下情况不生成行框：
-
某元素内部没有任何行盒
-
某元素字体大小为0
可替换元素和行块盒的基线
图片：基线位置位于图片的下外边距。
表单元素：基线位置在内容底边
行块盒：
-
行块盒最后一行有line-box，用最后一行的基线作为整个行块盒的基线。
-
如果行块盒内部没有行盒，则使用下外边距作为基线
堆叠上下文
堆叠上下文（stack context），它是一块区域，这块区域由某个元素创建，它规定了该区域中的内容在Z轴上排列的先后顺序。
创建堆叠上下文的元素
-
html元素（根元素）
-
设置了z-index（非auto）数值的定位元素
同一个堆叠上下文中元素在Z轴上的排列
从后到前的排列顺序：
-
创建堆叠上下文的元素的背景和边框
-
堆叠级别(z-index, stack level)为负值的堆叠上下文
-
常规流非定位的块盒
-
非定位的浮动盒子
-
常规流非定位行盒
-
任何 z-index 是 auto 的定位子元素，以及 z-index 是 0 的堆叠上下文
-
堆叠级别为正值的堆叠上下文
每个堆叠上下文，独立于其他堆叠上下文，它们之间不能相互穿插。
svg
svg: scalable vector graphics，可缩放的矢量图
-
该图片使用代码书写而成
-
缩放不会失真
-
内容轻量
怎么使用
svg可以嵌入浏览器，也可以单独成为一个文件
xml语言，svg使用该语言定义
书写svg代码
矩形:rect
圆形：circle
椭圆：ellipse
线条：line
折线：polyline
多边形：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
A 半径1 半径2 顺时针旋转角度 小弧（0）或大弧（1） 顺时针（1）逆时针（0）
Z = closepath
380
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
