周报：css相关扩展知识

1. 扩展知识：浮动盒子的排列位置

浮动盒子常见排列特点：

浮动盒子扩展特点：

2.扩展知识:行高的取值

line-height常见取值：

行高的取值的方式：

两个方式的区别：

3.扩展知识：body背景

画布

body元素的特点

背景图常见问题

4.扩展知识：参考线-深入理解字体

对于字体的有关设置方式：

文字

font-size

行高

vertical-align

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

5. 扩展知识：svg

svg

怎么使用

实例（画太极图）

6.扩展知识：数据链接

数据链接

如何书写

意义

优势：

缺点：

base64

1. 扩展知识：浮动盒子的排列位置

浮动盒子常见排列特点：

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

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

3. 浮动盒子在包含块中排列时，会避开常规流盒子（当常规流盒子在浮动盒子之前）

4. 常规流块盒在排列时，无视浮动盒子，（当常规流盒子在浮动盒子之后）

5. 行盒在排列时，会避开浮动盒子

6. 外边距合并并不会发生

浮动盒子扩展特点：

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

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

2.扩展知识:行高的取值

设置行高时用line-height：

line-height常见取值：

1. px，像素值

设置多行文本时，如果设置固定高度，则当文字大小不同时，相同高度产生的效果不同，影响用户体验

2. em单位

em表示字体大小的倍数，2em即为字体大小的两倍

3. 百分比

行高的取值的方式：

先继承后计算像素：
- 继承： 元素通常会继承其父元素的行高属性。如果没有显式设置行高，子元素会继承父元素的行高值。
- 计算像素： 一旦继承了父元素的行高属性，子元素的实际行高可能会受到其他因素的影响而被重新计算。这些因素可能包括字体大小、字体的度量值（比如 x-height）、元素本身的设定（如设置的行高值），甚至是浏览器的默认样式。
先计算像素后继承：
- 计算像素： 子元素的行高首先被计算为像素值，这可能受到字体、元素本身的设置等因素的影响。
- 继承： 如果父元素没有显式设置行高，子元素将不会继承任何行高值，而是使用浏览器的默认行高或者特定于字体的行高值。

两个方式的区别：

先继承后计算像素： 子元素首先继承父元素的行高属性，然后根据各种因素重新计算实际的行高值。这使得子元素可以在继承行高的基础上适应其自身的特定要求。
先计算像素后继承： 子元素不会直接继承父元素的行高属性，而是根据自身的计算结果确定行高，没有显式设置时可能会使用默认值。

3.扩展知识：body背景

介绍body背景的相关扩展知识之前，先来为大家介绍介绍画布吧。

画布

画布即为canvas元素，简单来说，画布就是一块区域，它的特点有以下两点：

最小宽度为视口宽度

最小高度为视口高度

而html元素的背景是覆盖整个画布的

首先上代码：

body{background-color: #008c8c;width:300px;height: 300px;}
</head>
<body>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nobis, sapiente inventore? Ex dolorem nesciunt perferendis atque quod officia possimus repudiandae consequuntur dolor, cumque cupiditate velit repellat voluptas amet? In, quos?
</body>
</html>

接着是效果：

大家有没有发现什么疑问呢，即使给body元素设置了宽高，但他的背景颜色还是超出了边框盒覆盖到了整个页面，此时，如果给html加上背景，又会发生什么呢

html{background-color: lightblue;}

这时又会发现body元素背景正常了，

body元素的特点

由此我们可以知道body元素的一些脾气了：

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

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

背景图常见问题

接下来我们看背景图的常见问题吧

先上代码：

body{background: url(./背景图3.webp) no-repeat;width: 100px;background-size: 100%;height: 100px;border: 2px solid #fff;}

接着是效果

在这里我们发现了同样的问题，背景图直接忽略body的边框盒撑满整个页面，

我们再来看一个问题，如果将body的宽度设置为很长的话，会发生什么呢：

我们发现，背景图并未随着画布的变长而延伸，此时就说明了背景图的特点：

背景图的宽度百分比，相对于视口，而背景图是相对于画布的,
背景图的高度百分比，相对于html（网页）高度

同时还有别的特点：

背景图的横向位置百分比、预设值，都相对于视口
背景图的纵向位置百分比、预设值，都相对于网页高度

这时，如果为html添加背景，就会解决这个问题。

html{background-color: lightblue;}

同时一旦给html元素加上背景，一切都会正常

html{background-color: lightblue;}body{background: url(./背景图3.webp) no-repeat;width: 3000px;/* 先左右再上下 */background-size: 100% 50%;background-position: center;height: 100px;border: 2px solid #fff;}

4.扩展知识：参考线-深入理解字体

对于字体的有关设置方式：

font-size、line-height、 vertical-align（垂直对齐）、font-family

文字

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

制作文字时，会有很多参考线，不同的文字类型参考线不一样，同一种文字类型，参考线一致

font-size

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

文字的相对大小：（相对单位）1000、2048、1024

文字顶线到底线的距离，是文字的实际大小（content-area内容区），文字大小会按比例缩放consolas实际大小2398，但文字大小为2048，设置文字大小时，实际所占区域=font-size的值*（2398/2048）

行盒的背景覆盖文字的内容区，即实际所占区域

行高

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

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

top和bottom之间的距离，叫做virtual-area（虚拟区），gap是可以改变的，行高就是virtual-area，设置行高时，实际上设置的是virtual-area

linne-height：normal，默认值，使用文字默认的gap，在谷歌浏览器中，Arial字体使用默认的gap值，他有默认行高如果line-height与font-size一致，则gap值就会成为负值，多行文本排列时，行与行之间会发生重叠

文字不一定出现在框内的正中间
content-area一定出现在virtual-area的中间（两个gap相等）

尽量不要将line-height设为1，设为一即为virtual-area高度和文字高度相同，但文字实际所占高度比文字高度大，再加上gap值，行高相对就会更小，多行文本之间会有重叠

span{background-color: aquamarine;font-size: 200px;font-family: Arial;line-height: 1;border: 2px solid;}

<span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi, neque iusto maxime incidunt, officiis laudantium voluptatem iste soluta numquam itaque quisquam, adipisci earum vero harum doloremque ea quasi amet laboriosam.-></span>

通过上图可以发现每行文字之间的背景图发生重叠，这是将line-height设为1的效果， virtual-area高度和文字高度相同，此时加上上下gap，文字区域就重叠了。

vertical-align

决定参考线：font-size,font-family,line-height

一个元素如果子元素出现行盒，该元素内部也会产生参考线

<style>p{background-color: antiquewhite;font-size: 32px;font-family: Arial;line-height: normal;}span{background-color: aquamarine;font-size: 200px;font-family: Arial;line-height: 1;border: 2px solid;}</style>

 <p>M<span>M</span><span style="font-size: 5em;">M</span></p>

只有行盒会产生参考线，故文字一定在行盒里

baseline:该元素的基线与父元素的基线对齐
super：该元素的基线与父元素的上基线对齐
sub：该元素的基线与父元素的下基线对齐
text-top：该元素的virtual-area的顶边，对齐父元素的text-top（第二条线）
text-bottom：该元素的virtual-area的底边，对齐父元素的text-bottom（倒数第u
top：该元素的virtual-area的顶边，对其父元素的顶边，（最高顶边）（line-box的顶边）
botoom：该元素的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
<p style="font-size: 0;"><span style="font-size: 2em;">m</span></p>
此时网页上不会出现m。

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

图片：基线位置位于图片的下外边距（包括margin下边距）

解释了图片下方的白边问题，设置字体为0或将其变为块盒时，白边消失，是因为没有了line-box

表单元素：基线位置在内容的底边，不包括margin

行块盒：

1. 行块盒最后一行有line-box，最后一行的基线作为整个行块盒的基线

2. 如果行块盒内部没有行盒，则使用下外边距作为基线

<p><span style="width: 100px; border: 2px solid; display: inline-block;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur dicta, delectus ut quasi similique explicabo, est, reiciendis eos quas ratione soluta non. Quae incidunt natus rem expedita iste labore. Doloribus?</span><span>M</span></p>

5. 扩展知识：svg

svg

svg: scalable vector graphics,可缩放的矢量图

1. 该图片使用代码书写而成

2. 缩放不会失真

3. 内容轻量（内容较少）

4. 只能做简单的图形

怎么使用

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

svg引用方法：

1. 直接写svg代码

2. 嵌入图片：img路径

3. 嵌入p元素背景图

4. embed(嵌入元素)

5. <embed src="" type="image/svg+xml">

6. 利用object元素嵌入对象

<object>元素是HTML中用于嵌入对象的标签，可以包含各种类型的数据，如图像、音频、视频、Flash 动画等。它提供了一种通用的方法来嵌入对象，与元素和其他嵌入元素相比，具有更强大的功能和更多的控制选项。<img><object>

以下是 <object> 元素的基本结构和属性：
html<objectwidth="width_value"height="height_value"data="URL_or_file_path"type="media_type"codetype="code_type"></object>
width（宽度）：指定对象的宽度。

height（高度）：指定对象的高度。

data（数据）：指定要嵌入的对象的URL或文件路径。

type（类型）：指定对象的媒体类型（MIME 类型），用于告诉浏览器如何处理对象。这是一个必需的属性。

codetype（代码类型）：指定嵌入对象所使用的编码的类型。

<object>元素可以包含嵌入的内容或替代文本，如果浏览器无法显示嵌入的对象，将会显示替代文本。这使得 <object>元素在处理各种媒体类型和提供替代内容方面非常灵活。

以下是一个简单的 <object> 元素的示例，用于嵌入一个图像：
html<object data="example.jpg" type="image/jpeg" width="300" height="200"></object>
在这个例子中，data 属性指定了要嵌入的图像的URL，type 属性指定了图像的媒体类型，width而和height 属性定义了图像的宽度和高度。如果浏览器无法显示图像，将会显示<object> 元素内的替代文本或其他嵌入的内容。

请注意，虽然 <object>元素是一种强大的嵌入元素，但在某些情况下，使用更简单的元素，如 <img>、<audio> 或 <video>可能更为合适，具体取决于嵌入的内容类型。
<embed src="./imgs/微信 (1).svg" type="image/svg+xml"><object data="./imgs/微信 (1).svg" type="image/svg+xml"></object><iframe src="./imgs/微信 (1).svg" frameborder="0"></iframe>
7. iframe元素，但不好设置其样式，必须要改变本质

alt+shift+f 格式化

xml语言，svg使用该语言定义

embed元素：嵌入资源

书写svg代码

矩形：rect
圆形 circle
椭圆 ellipse
线条 line
折线 polyline
多边形 polygon
路径 path

<!-- 可以在svg里设置宽高 -->
<svg style="background:gray;" width="500" height="1000"  xmlns="http://www.w3.org/2000/svg"><rect width="100" height="100" x="100" y="100" fill="red" stroke="#008c8c" stroke-width="5" /><!-- fill表示背景颜色，stroke表示边框颜色 ,stroke表示边框宽度
摆放位置可用x，y设置，x表示矩形的左上角与左边的距离，y表示矩形的左上角离上边的距离--><circle  cx="200" cy="400" r="50" fill="#008c8c" stroke="#000" stroke-width="5"> </circle><!-- cx即center x,圆心的坐标 只要边框，不要背景，只要设置fill为transparent(透明)即可--><ellipse rx="80" ry="30" cx="200" cy="500" fill="red" stroke="#008c8c" stroke-width="5" /><!-- rx是长半径，ry是短半径 --><line x1="10" x2="40" y1="300" y2="40" stroke="#008c8c" stroke-width="5"/><!-- x1,y1,x2,y2分别为线段两个端点的坐标 --><polyline points="100,100,250,300,450,654" fill="red" stroke="#000" stroke-width="" /><!-- 标识100，100点，250，300点，450，654点的连线 --><polygon points="300,300,400,400,300,500" fill="none" stroke="#000" stroke-width="5" /><!-- 多边形会将所有点连在一起，形成封闭图形 --><path d="M150 600 L300 600 L300 800 L150 800" stroke="#000" stroke-width="5" /><!-- M，把坐标移到150，600这个位置，L将线画到300，600这个位置 也可将stroke等元素放到style中,连线的时候会填充颜色为黑色--><path d="M300 300 A150 150 0 1 1 450 150" fill="none" style="stroke:#000; stroke-width:5" /><!-- A半径1 半径2 顺时针旋转角度 0/1(画小弧为0，画大弧为1) 0/1(顺时针画为1，逆时针为0) 终点坐标-->
</svg>

M = moveto,把坐标移入到某个地方

L = lineto

H = horizontal lineto

V = vertical lineto

C = curveto

S = smooth curveto

Q = quadratic Belzier curve

T = smooth quadratic Bezier curveto

A = elliptical Arc

Z = closepath

实例（画太极图）

<svg style="background:#ccc;" width="500" height="500" xmlns="http://www.w3.org/2000/svg"><circle cx="250" cy="250" r="200" fill="none" stroke="#999" stroke-width="2" /><!-- cx即center x,圆心的坐标 只要边框，不要背景，只要设置fill为transparent(透明)即可--><path d="M250 50 A100 100 0 0 1 250 250 A100 100 0 0 0 250 450 A200 200 0 0 1 250 50" fill="#000" /><path d="M250 50 A100 100 0 0 1 250 250 A100 100 0 0 0 250 450 A200 200 0 0 0 250 50" fill="#fff"/><!-- A半径1 半径2 顺时针旋转角度 0/1(画小弧为0，画大弧为1) 0/1(顺时针画为1，逆时针为0) 终点坐标--><circle cx="250" cy="150" r="30" fill="#fff"/><circle cx="250" cy="350" r="30" fill="#000"/>
</svg>

以下为太极图的演示效果：

6.扩展知识：数据链接

数据链接

data url

如何书写

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

语法：data：MIME,数据

意义

优势和劣势

优势：

减少HTTP请求数： 将小型资源嵌入到文档中可以减少HTTP请求的数量，从而加快页面加载速度。这对于小型图标、小图片或者其他较小的资源是非常有利的。

避免额外的文件请求： 不需要额外的文件请求，因为资源被直接嵌入到了文档中。这减少了与服务器的通信次数，有助于提高性能。

适用于小型图标和短期使用的图片： 对于一些小型的图标、短期使用的图片或者其他较小的资源，使用数据链接可以更方便，无需额外的文件。

缺点：

体积较大： Base64 编码会使数据文件的体积变大，通常会增加约1/3的大小。这意味着，对于大型文件，使用数据链接可能会导致页面加载变慢，因为它增加了传输的数据量。

缓存问题： 如果同一个资源被多个页面使用，而且这个资源经常变动，那么嵌入在多个页面中的数据可能会导致缓存失效，因为每个页面都包含了资源的副本。

不利于维护： 将资源嵌入到文档中可能使代码变得混乱，尤其是对于大型或复杂的项目。维护和更新资源可能会变得更加困难。

不适合大型文件： 对于大型文件（比如大图像、视频等），使用数据链接会显著增加 HTML 文档的体积，导致加载时间变长。