目录
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 <object width="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 文档的体积，导致加载时间变长。
应用场景：
1. 当请求单个图片体积较小，并且该图片因为各种原因不适合制作雪碧图，可以使用数据链接
2. 图片由其他代码动态生成，并且图片较小，可以使用数据链接。
3. 也可以使用在背景图url中
base64
一般在图片中使用，css一般不使用，但也可使用，只要将数据转化为base64编码即可
data:image/png;base64,····
一种编码方式
通常用于将一些二进制数据用一个可书写的字符串来表示
232
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
