寒假第三次周报

HTML标签补充

1.换行标签

<br/>

2.加粗

<strong></strong>

<b></b>

3.倾斜

<em></em>

<i></i>

4.删除线

<del></del>

<s></s>

5.下划线

<ins></ins>

<u></u>

6.图像标签

<img src=""/>

其他属性：

src:图片路径

alt:替换文本，图像不能显示的文字

title：提示文本，鼠标放到图像上显示的文字

width：设置图像宽度

height：设置图像高度

border：设置图像边框粗细

/宽度和高度一般只改一个，另一个会等比例缩放/

扩展

1.浮动的细节规则

2.行高的取值

line-height

1. px, 像素值

2. 无单位的数字
   行高为字体大小某倍
   先继承（继承当前设置的字体大小），再计算（根据当前字体大小）

3. em单位
   行高为字体大小某倍
   先计算，再继承

4. 百分比

3.body的背景

画布 canvas

一块区域

特点：

1. 最小宽度为视口宽度
2. 最小高度为视口高度

HTML元素的背景

覆盖画布

body元素的背景

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

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

关于画布背景图

1. 背景图的宽度百分比，相对于视口
2. 背景图的高度百分比，相对于网页（html元素高度）高度
3. 背景图的横向位置百分比、预设值，相对于视口
4. 背景图的纵向位置百分比、预设值，相对于网页高度

行盒的垂直对齐

多个行盒垂直方向上的对齐

给没有对齐元素设置vertical-align（行盒）

预设值

数值

图片的底部白边

图片的父元素是一个块盒，块盒高度自动，图片底部和父元素底边之间往往会出现空白。

1. 设置父元素的字体大小为0
2. 将图片设置为块盒

参考线-深入理解字体

font-size、line-height、vertical-align、font-family

文字

文字是通过一些文字制作软件制作的，比如fontforge

制作文字时，会有几根参考线，不同的文字类型，参考线不一样。同一种文字类型，参考线一致。
顶线，上基线，基线，下基线，底线

font-size

字体大小，设置的是文字的相对大小

文字的相对大小：1000、2048、1024（框的大小而非字体大小）

文字顶线到底线的距离，是文字的实际大小（content-area，内容区）

行盒的背景覆盖content-area

行高

顶线向上延申的空间，和底线向下延申的空间，两个空间相等，该空间叫做gap（空隙）

gap默认情况下，是字体设计者决定

top到botoom（顶线向上延伸的最高处到底线向下延伸的最低处），叫做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是承载文字内容的必要条件，以下情况不生成行框：

1. 某元素内部没有任何行盒
2. 某元素字体大小为0

可替换元素和行块盒的基线

图片：基线位置位于图片的下外边距。

表单元素：基线位置在内容底边

行块盒：

1. 行块盒最后一行有line-box，用最后一行的基线作为整个行块盒的基线。
2. 如果行块盒内部（最后一行）没有行盒，则使用下外边距作为基线