云龙网站开发,湟源县网站建设,企业logo设计app,如何建设自己的网站 知乎目录 1. 扩展知识#xff1a;浮动盒子的排列位置
浮动盒子常见排列特点#xff1a;
浮动盒子扩展特点#xff1a; 2.扩展知识:行高的取值
line-height常见取值#xff1a;
行高的取值的方式#xff1a;
两个方式的区别#xff1a;
3.扩展知识#xff1a;body背景…目录 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
bodyLorem, 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-heightnormal默认值使用文字默认的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;}
spanLorem 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
一个元素如果子元素出现行盒该元素内部也会产生参考线 stylep{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 pMspanM/spanspan stylefont-size: 5em;M/span/p 只有行盒会产生参考线故文字一定在行盒里 baseline:该元素的基线与父元素的基线对齐super该元素的基线与父元素的上基线对齐sub该元素的基线与父元素的下基线对齐text-top该元素的virtual-area的顶边对齐父元素的text-top第二条线text-bottom该元素的virtual-area的底边对齐父元素的text-bottom倒数第utop该元素的virtual-area的顶边对其父元素的顶边最高顶边line-box的顶边botoom该元素的virtual-area的底边对其父元素的底边该行中的最低底边line-box的底边middle该元素的中线content-area的一半与父元素的x字母高度一半的位置对齐行盒组合起来可以形成多行每一行的区域叫做line-boxline-box的顶边是该行内所有行盒的最低底边。 实际一个元素的实际占用高度高度自动高度的计算通过line-box计算
行盒inline-box
行框line-box 数值相对于基线的偏移量向上为正数向下为负数。 百分比相对于基线的偏移量百分比是相对于自身virtual-area的高度 line-box是承载文字内容的必要条件以下情况不生成行框 1. 某元素内部没有任何行盒 2. 某元素字体大小为0 p stylefont-size: 0;span stylefont-size: 2em;m/span/p 此时网页上不会出现m。 可替换元素和行块盒的基线
图片基线位置位于图片的下外边距包括margin下边距
解释了图片下方的白边问题设置字体为0或将其变为块盒时白边消失是因为没有了line-box
表单元素基线位置在内容的底边不包括margin 行块盒 1. 行块盒最后一行有line-box最后一行的基线作为整个行块盒的基线 2. 如果行块盒内部没有行盒则使用下外边距作为基线 pspan stylewidth: 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?/spanspanM/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 typeimage/svgxml 6. 利用object元素嵌入对象 object元素是HTML中用于嵌入对象的标签可以包含各种类型的数据如图像、音频、视频、Flash 动画等。它提供了一种通用的方法来嵌入对象与 元素和其他嵌入元素相比 具有更强大的功能和更多的控制选项。imgobject 以下是 object 元素的基本结构和属性 htmlobjectwidthwidth_valueheightheight_valuedataURL_or_file_pathtypemedia_typecodetypecode_type!-- 嵌入的内容或替代文本 --/object width宽度指定对象的宽度。 height高度指定对象的高度。 data数据指定要嵌入的对象的URL或文件路径。 type类型指定对象的媒体类型MIME 类型用于告诉浏览器如何处理对象。这是一个必需的属性。 codetype代码类型指定嵌入对象所使用的编码的类型。 object元素可以包含嵌入的内容或替代文本如果浏览器无法显示嵌入的对象将会显示替代文本。这使得 object元素在处理各种媒体类型和提供替代内容方面非常灵活。 以下是一个简单的 object 元素的示例用于嵌入一个图像 htmlobject dataexample.jpg typeimage/jpeg width300 height200!-- 替代文本或其他嵌入的内容 --/object 在这个例子中data 属性指定了要嵌入的图像的URLtype 属性指定了图像的媒体类型width而 和height 属性定义了图像的宽度和高度。如果浏览器无法显示图像将会显示object 元素内的替代文本或其他嵌入的内容。 请注意虽然 object元素是一种强大的嵌入元素但在某些情况下使用更简单的元素如 img、audio 或 video可能更为合适具体取决于嵌入的内容类型。 embed src./imgs/微信 (1).svg typeimage/svgxmlobject data./imgs/微信 (1).svg typeimage/svgxml/objectiframe src./imgs/微信 (1).svg frameborder0/iframe7. iframe元素但不好设置其样式必须要改变本质 altshiftf 格式化 xml语言svg使用该语言定义
embed元素嵌入资源 书写svg代码 矩形rect圆形 circle椭圆 ellipse线条 line折线 polyline多边形 polygon路径 path !-- 可以在svg里设置宽高 --
svg stylebackground:gray; width500 height1000 xmlnshttp://www.w3.org/2000/svgrect width100 height100 x100 y100 fillred stroke#008c8c stroke-width5 /!-- fill表示背景颜色stroke表示边框颜色 ,stroke表示边框宽度
摆放位置可用xy设置x表示矩形的左上角与左边的距离y表示矩形的左上角离上边的距离--circle cx200 cy400 r50 fill#008c8c stroke#000 stroke-width5 /circle!-- cx即center x,圆心的坐标 只要边框不要背景只要设置fill为transparent(透明)即可--ellipse rx80 ry30 cx200 cy500 fillred stroke#008c8c stroke-width5 /!-- rx是长半径ry是短半径 --line x110 x240 y1300 y240 stroke#008c8c stroke-width5/!-- x1,y1,x2,y2分别为线段两个端点的坐标 --polyline points100,100,250,300,450,654 fillred stroke#000 stroke-width /!-- 标识100100点250300点450654点的连线 --polygon points300,300,400,400,300,500 fillnone stroke#000 stroke-width5 /!-- 多边形会将所有点连在一起形成封闭图形 --path dM150 600 L300 600 L300 800 L150 800 stroke#000 stroke-width5 /!-- M把坐标移到150600这个位置L将线画到300600这个位置 也可将stroke等元素放到style中,连线的时候会填充颜色为黑色--path dM300 300 A150 150 0 1 1 450 150 fillnone stylestroke:#000; stroke-width:5 /!-- A半径1 半径2 顺时针旋转角度 0/1(画小弧为0画大弧为1) 0/1(顺时针画为1逆时针为0) 终点坐标--
/svgM 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 stylebackground:#ccc; width500 height500 xmlnshttp://www.w3.org/2000/svgcircle cx250 cy250 r200 fillnone stroke#999 stroke-width2 /!-- cx即center x,圆心的坐标 只要边框不要背景只要设置fill为transparent(透明)即可--path dM250 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 dM250 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 cx250 cy150 r30 fill#fff/circle cx250 cy350 r30 fill#000/
/svg
以下为太极图的演示效果 6.扩展知识数据链接
数据链接
data url
如何书写
数据链接将目标文件的数据直接书写到路径位置
语法dataMIME,数据
意义 优势和劣势 优势 减少HTTP请求数 将小型资源嵌入到文档中可以减少HTTP请求的数量从而加快页面加载速度。这对于小型图标、小图片或者其他较小的资源是非常有利的。 避免额外的文件请求 不需要额外的文件请求因为资源被直接嵌入到了文档中。这减少了与服务器的通信次数有助于提高性能。 适用于小型图标和短期使用的图片 对于一些小型的图标、短期使用的图片或者其他较小的资源使用数据链接可以更方便无需额外的文件。 缺点 体积较大 Base64 编码会使数据文件的体积变大通常会增加约1/3的大小。这意味着对于大型文件使用数据链接可能会导致页面加载变慢因为它增加了传输的数据量。 缓存问题 如果同一个资源被多个页面使用而且这个资源经常变动那么嵌入在多个页面中的数据可能会导致缓存失效因为每个页面都包含了资源的副本。 不利于维护 将资源嵌入到文档中可能使代码变得混乱尤其是对于大型或复杂的项目。维护和更新资源可能会变得更加困难。 不适合大型文件 对于大型文件比如大图像、视频等使用数据链接会显著增加 HTML 文档的体积导致加载时间变长。 应用场景
1. 当请求单个图片体积较小并且该图片因为各种原因不适合制作雪碧图可以使用数据链接
2. 图片由其他代码动态生成并且图片较小可以使用数据链接。
3. 也可以使用在背景图url中
base64
一般在图片中使用css一般不使用但也可使用只要将数据转化为base64编码即可
data:image/png;base64,····
一种编码方式
通常用于将一些二进制数据用一个可书写的字符串来表示
