CSS笔记——css阿里图标、iframe内联框架
一、css阿里图标
阿里矢量图标库：https://www.iconfont.cn/
要在网页中使用阿里图标，需要先在阿里图标库中选择所需的图标，然后引入相应的 CSS 文件。
以下是具体的引入方式：
在阿里图标库中选择所需的图标，点击右侧的“下载代码”按钮，选择“CSS”格式，下载生成的 zip 文件。
将下载的 zip 文件解压，找到其中的iconfont.css文件，复制该文件到项目的 CSS 文件夹下。
在 HTML 文件中通过 link 标签引入该 CSS 文件。
在 HTML 中使用相应的图标。
icon-xxx 表示图标的名称，可以在 iconfont.css 文件中查看。
注意，有些图标可能需要引入其他的 CSS 文件，比如 iconfont.js 等。在使用时需要根据具体情况进行引入。
另外，阿里图标库提供了 Webfont、Symbol、SVG、PNG、Sketch 等多种格式的图标下载。根据需要选择对应的格式即可。
二、iframe内联框架
iframe 是 HTML 中的内联框架，可以在网页中嵌入另一个页面。
以下是 iframe 的一些常见知识点：
1、src 属性
src 属性用于指定内嵌页面的 URL 地址，也可以是相对地址或者外部链接。当 src 属性改变时，iframe 会重新加载对应的页面。
<iframe src="http://example.com"></iframe>
2、width 和 height 属性
width 和 height 属性用于设置 iframe 的宽度和高度。可以使用绝对单位（如像素）或相对单位（如百分比）。
<iframe src="http://example.com" width="600" height="400"></iframe>
3、name 属性
name 属性用于指定 iframe 的名称，可以在链接中使用该名称来指定链接的目标页面。
<iframe src="http://example.com" name="myframe"></iframe>
<a href="http://example.com" target="myframe">点击打开链接</a>
4、scrolling 属性
scrolling 属性用于指定是否显示滚动条。可以设置为 “yes”、“no” 或 “auto”。
<iframe src="http://example.com" scrolling="no"></iframe>
5、frameborder 属性
frameborder 属性用于指定是否显示边框。可以设置为 “0” 或 “1”。
<iframe src="http://example.com" frameborder="0"></iframe>
6、sandbox 属性
sandbox 属性用于设置 iframe 的沙箱属性，可以限制内嵌页面的行为，提高安全性。
<iframe src="http://example.com" sandbox></iframe>
7、allowfullscreen 属性
allowfullscreen 属性用于指定是否允许全屏显示内嵌页面。
<iframe src="http://example.com" allowfullscreen></iframe>
JavaScript 操作
可以使用 JavaScript 操作 iframe，比如通过 contentWindow 属性获取内嵌页面的 window 对象，通过 contentDocument 属性获取内嵌页面的 document 对象。
const iframe = document.querySelector('iframe');
const iframeWindow = iframe.contentWindow;
const iframeDocument = iframe.contentDocument;
也可以通过 postMessage 方法来跨域通信，从而实现更多功能。
Const iframeWindow = iframe.contentWindow;
iframeWindow.postMessage('message', 'http://example.com');
8、allow 属性
allow 属性用于指定哪些功能可以在内嵌页面中启用。可以设置多个功能，以逗号分隔。
<iframe src="http://example.com" allow="camera;microphone"></iframe>
9、loading 属性
loading 属性用于指定内嵌页面加载时的行为。可以设置为 “eager”（立即加载）或 “lazy”（延迟加载）。
<iframe src="http://example.com" loading="lazy"></iframe>
内容安全策略
内容安全策略（Content Security Policy，CSP）是一种增强网页安全性的技术。可以使用 CSP 来限制内嵌页面的行为，比如限制其执行 JavaScript。
<iframe src="http://example.com" sandbox="allow-scripts"></iframe>
跨域问题
iframe 可以嵌入其他域的页面，但是由于同源策略的限制，内嵌页面无法直接操作父级页面，也无法获取父级页面的信息。需要使用一些技术来解决跨域问题，比如 postMessage、JSONP、CORS 等。
以上是 iframe 的一些常见知识点，可以通过这些知识点来实现各种功能，比如嵌入地图、视频等。需要注意的是，使用 iframe 时需要考虑安全问题，避免出现恶意代码和 XSS 攻击等问题。