1.html标签
1.1img标签
显示图片的标签，两个重要属性 src （图片的路径，可以写相对路径和绝对路径）
alt 但图片显示不出来之后，显示的提示信息
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>1.初体验行内块状元素</title> </head> <body> <a href="https://www.baidu.com"> 你是哪个 </a> <span>测试图片</span> <!-- 相对路径--> <img src="../image/icon13.png" alt="点我看看怎么个事"> <!--绝对路径--> <img src="/image/icon13.png" alt="点我看看怎么个事"> </body> <style> img { width: 500px; height: 500px; } </style> </html>显示效果如下：
注意有个重要属性object-fit 默认值是fill 拉伸填满
object-fit: contain;：完整显示。保持图片原有的宽高比，将图片完整塞进容器里。如果比例不一致，容器的四周可能会出现留白。object-fit: cover;：填满容器。保持图片宽高比并填满整个容器，但超出容器的部分会被裁切掉（即显示不完全）。object-fit: fill;：拉伸填满。强行把图片拉伸到容器的尺寸，图片会显示完全，但会发生严重变形
如果是项目里@指向src目录，也可以引入使用
import teacherTotalLogo from "@/assets/schoolPortrait/teacher-logo.png";
1.2.iframe标签
内嵌网页的标签，重要属性如下：
src:内嵌网页的地址
title:描述
loading="lazy"：开启懒加载。如果这个 iframe 不在首屏可视范围内，浏览器会延迟加载它，从而提升你整个页面的打开速度。
sandbox：安全沙箱。如果你嵌入的是不完全信任的第三方页面，可以加上这个属性来限制它的权限（比如禁止执行脚本、禁止弹窗等），保障主站的安全。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>1.初体验行内块状元素</title> </head> <body> <div>我是测试文件</div> <iframe src="https://www.baidu.com" class="iframe" style="border: none;" title="就读轨迹" loading="lazy"></iframe> </body> <style> iframe { width: 800px; height: 800px; } </style> </html>样式如下：
2.css样式
2.1 box-sizing
box-sizing是 CSS 中一个非常关键的属性，它决定了浏览器如何计算一个元素的总宽度和总高度。
简单来说，它定义了当你给一个盒子设置width（宽度）和height（高度）时，这个尺寸到底包含了哪些部分。
在 CSS 的盒模型中，一个元素主要由内容（content）、内边距（padding）、边框（border）和外边距（margin）组成。box-sizing主要就是用来控制前三个部分的计算方式。
content-box（默认值 / 标准盒模型）
这是浏览器的默认行为。当你设置box-sizing: content-box;时：
- 你设置的
width和height只包含内容区（content）的大小。 - 元素的实际占用大小 =
width/height+padding+border。
border-box
- 你设置的
width和height已经包含了内容区、内边距和边框。 - 无论你加多少 padding 和 border，元素的实际占用大小永远等于你设定的
width和height。浏览器会自动从内容区里扣除 padding 和 border 占用的空间。
2.文字换行与省略
2.1white-space
文本是否换行
默认换行normal 不换行nowrap
2.2overflow
内容溢出之后的处理方式
visible默认值 会显示元素框之外
hidden 超出部分裁剪隐藏
auto:自动，内容溢出会显示滚动条
scroll:会始终显示滚动条
2.3text-overflow
文本溢出是怎么处理
注意：该属性必须配合overflow: hidden和white-space: nowrap才能生效。
clip：默认值。直接将溢出的文本截断（裁切掉），没有任何额外的视觉提示。
ellipsis：显示一个省略号（…）来代表被裁切的文本，这也是最常用的值。
string：使用开发者自定义的字符串（例如"---"或"***"）来代替被裁切的文本（该值的浏览器兼容性相对有限）。
