目录
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 <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,····
一种编码方式
通常用于将一些二进制数据用一个可书写的字符串来表示