今日学习题日期：25.07.22 1.iframe有哪些优缺点以及使用场景（1）优点：实现跨域：可将第三方页面的内容

日期：25.07.22

1.iframe有哪些优缺点以及使用场景

（1）优点：

实现跨域：可将第三方页面的内容，嵌套到自己的页面中；

安全性：将第三方的内容放入一个独立的沙盒中，可防止对主页面的攻击；

无需刷新：可在不刷新整个页面的情况下加载新页面；

（2）缺点：

性能问题：每个ifrmae都会加载一个新的页面；

举例：A页面用iframe打开B页面，B页面又用iframe打开C页面；C页面才是自己实际开发的页面，这时就可能会出现性能问题；

原因：

1.iframe的核心特性：每个iframe都是独立的浏览上下文（拥有自己的DOM、CSSOM、JavaScript执行环境、资源加载队列），其性能开销会逐层叠加；

1.1 每个iframe的资源（HTML、CSS、JS、图片等）需独立加载，且父iframe的资源加载完成后，才会开始加载子iframe的资源（串行加载）。若多层嵌套，总加载时间会是各层资源加载时间的总和；

1.2 每个iframe有独立的window对象（全局上下文），脚本无法直接访问父/子iframe的变量或函数。需通过postMessage API进行跨iframe通信，多层嵌套会导致通信层级复杂，延迟增加。`

兼容性问题：有些浏览器可能不正确支持使用iframe

（3）使用场景：

嵌入第三方页面

跨域通信

2.position每一种值的含义

1> static--静态定位

2> relative--绝对定位

使用 position:absolute;将元素的位置相对于其最近的具有相对定位或绝对定位的父元素进行调整

绝对布局会使元素脱离正常文档流，不保留原有的空间，因此不会影响其他元素的位置。

3> absolute--相对定位

使用 position:relative;将元素的位置相对于其自身在正常文档流中的位置进行调整。

相对布局会保留元素原有的空间，但可以通过top、right、bottom 和 left 属性来调整元素的位置,使其相对于原始位置上下左右偏移，

4> fixed--固定定位

5> sticky--粘性定位

static使用 top、right、bottom、left 不起作用，其他都起作用；

子绝父相(子元素绝对定位父元素相对定位)

在绝对定位中，通常需要指定元素相对于哪个父元素进行定位，这可以通过为父元素添加 position:relative; 来实现。如果没有明确的相对走位的父元素，绝对定位将相对于文档的根元素进行定位。

举例1：子绝父相示例：中心定位（文字居中）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>子绝父相示例：中心定位（文字居中）</title>
  <style>
    .parent {
      position: relative;
      width: 400px;
      height: 300px;
      background-color: #f0f0f0;
      margin: 50px auto;
      border: 1px solid #ccc;
    }

    .child {
      position: absolute;
      top: 50%;/* 距离父元素包含块顶部50%（即父元素高度的一半） */
      left: 50%;/* 距离父元素包含块左侧50%（即父元素宽度的一半） */
      transform: translate(-50%, -50%);/* 向左、向上平移自身的50%，实现完美居中 */
      width: 250px; 
      height: 80px; 
      background-color: #34a853;
      color: white;
      text-align: center; /* 水平居中 */
      line-height: 80px; /* 垂直居中（关键修改） */
      border-radius: 8px;
    }
  </style>
</head>
<body>
  <div class="parent">
    父元素（position: relative）
    <div class="child">子元素（居中）</div>
  </div>
</body>
</html>

举例2：子绝父相示例：右上角定位

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>子绝父相示例：右上角定位</title>
  <style>
    /* 父元素：相对定位（作为子元素的定位容器） */
    .parent {
      position: relative;
      width: 350px;
      height: 250px;
      background-color: #f0f0f0; /* 浅灰色背景 */
      padding: 30px; /* 内边距（影响子元素的定位基准） */
      margin: 50px auto; /* 水平居中 */
      border: 1px solid #ccc; /* 边框（方便观察父元素范围） */
    }

    /* 子元素：绝对定位（相对于父元素） */
    .child {
      position: absolute;
      top: 15px; /* 距离父元素包含块顶部15px（父元素padding-top=30px，所以实际是父元素顶部往里30px+15px=45px） */
      right: 15px; /* 距离父元素包含块右侧15px（父元素padding-right=30px，所以实际是父元素右侧往里30px+15px=45px） */
      width: 120px;
      height: 60px;
      background-color: #4285f4; /* 蓝色背景 */
      color: white; /* 白色文字 */
      text-align: center; /* 文字居中 */
      line-height: 60px; /* 行高等于高度，垂直居中 */
      border-radius: 5px; /* 圆角 */
    }
  </style>
</head>
<body>
  <div class="parent">
    父元素（position: relative）<br>
    （内边距30px，边框1px，宽350px，高250px）
	  
	  
	  
	  啧啧啧
	   啧啧啧 啧啧啧 啧啧啧 啧啧啧 啧啧啧 啧啧啧
    <div class="child">子元素（position: absolute）</div>
  </div>
</body>
</html>

3.css盒子模型

外边距 margin：外边与盒子的距离

内边距 padding：内容与边框的距离

边框 border：位于内边距的外部

内容 content：最中心的

4.overflow不同值的区别

1> visable

2> hiddle 超出部分不可见

3> scroll 超出部分可见，会显示滚动条（内容没有溢出也会显示）

4> auto 超出部分可见，会显示滚动条（内容溢出才会显示）

5> inherit 继承父元素的overflow元素

5.变量提升

var let function var 在编译的过程中会进行提升；函数提升> 变量提升

举例1：

console.log(ss)
A();
var ss = 2;
function A(){
    console.log("我是函数")
}

输出：
2
我是函数

举例2：

console.log(s);
var s = 4;
function s(){
    console.log("我是函数s")
}

输出：
ƒ s(){
    console.log("我是函数s")
}

6.prototype和proto的区别与联系

只有函数有函数对象（prototype）和原型对象（proto）；

所有对象都有__proto__；

函数对象为显性；原型对象为隐性；

prototype 和 proto 是不一样的，构造函数的prototype对象会被赋予给实例对象的__proto__ 属性,从而建立了原型链；

prototype

每一个函数对象都有一个prototype属性，它是一个对象; 存在于 Object、function、class、Function，定义这些对象的时候，会自动生成一个实例对象来表示 prototype，如下

// 下面两句都会分别自动生成一个 A.prototype = new Object();
function A () {} // 自动生成一个 A.prototype = new Object();
class B {} // 自动生成一个 B.prototype = new Object();

// 这里创建实例对象，没有 a.prototype
var a = new A()

proto//两个下划线proto两个下划线

每一个对象都具有函数对象和普通对象的属性，它指向对象的原型

指向其构造函数的 prototype，所有对象都有，包括实例对象，(除了Object.prototype), 即谁生产的这个对象，那么此对象的 proto 就指向谁的 prototype。

// 下面两句都会分别自动生成一个 A.prototype = new Object();
function A () {}  // A.__proto__ === Function.prototype
class B {} // B.__proto__ === Function.prototype

// 这里创建实例对象，没有 a.prototype，但有 a.__proto__
var a = new A()  // a.__proto__ === A.prototype

由于 prototype 也是一个实例对象，因此它也有 proto

function A () {}
var a = new A()

// a.__proto__ === A.prototype
// A.prototype.__proto__ === Object.prototype
// Object.prototype.__proto__ === null

总结：

prototype 一般存在于 Object、function、class、Function 这些对象，定义这些对象的时候，会自动为我们创建一个实例对象用作原型 prototype，prototype 上面可以定义一些属性和方法。

通过 new 创建的一些常见对象通过 proto 来关联上其构造函数的 prototype 引用，从而方便在继承时能得到 prototype 引用并且拿到其绑定的属性和方法。

获取对象的属性或者方法时，先在实例本身寻找，若没有，则去proto上寻找，这时 proto 就起到了桥梁作用指向其构造函数的 prototype，然后依次继续寻找 prototype.proto, 直到 Object.prototype.proto为止。

今日学习题