iframe框架标签（内嵌页面）的基本介绍

除了早早都是猪

已于 2022-07-27 22:06:48 修改

阅读量1w

点赞数 1

分类专栏： iframe 文章标签： javascript chrome html5

于 2022-07-27 22:05:11 首次发布

本文链接：https://blog.csdn.net/weixin_70424030/article/details/126023641

版权

iframe 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

目录：

1.iframe的作用以及使用

2.iframe拥有的属性编辑

3.iframe如何处理宽高和主页面不完美融合问题（calc（）方法）

1.iframe的作用以及使用

在这里首先介绍的是HTML中iframe标签的用法：

怎么在一个网页中嵌入另一个网页呢，我们可以用html中的iframe标签搞定。

iframe支持所有浏览器。

下面我们来看一下iframe的语法：

<!-- src 是嵌套页面的网址  -->
    <!-- frameborder是嵌套页面的一个边距 一般设置为0 -->
    <iframe src="./fuyemian.html" frameborder="0" class="ifr"></iframe>

2.iframe拥有的属性

3.iframe如何处理宽高和主页面不完美融合问题（calc（）方法）

这里我们再引入一个知识点：

内嵌页面的时候，很容易发现内嵌页面很难和主页面完美融合，那么我们在宽高方面如何处理呢？

需要用到calc方法：

从字面看我们可以把它理解为一个function函数。其实calc就是英文单词calculate(计算)的缩写；它是一个css3新增的功能，可以用来指定元素的长度，动态计算长度值。

 <style>
        nav{
            background-color: antiquewhite;
            height: 30px;
        }
        body,html{
            height: 100%;
        }
        .ifr{
            width: 100%;
            height: calc(100% - 30px);
        }
    </style>
<body>
    <nav>
        <a href="">我是导航栏1</a>
        <a href="">我是导航栏2</a>
        <a href="">我是导航栏3</a>
    </nav>
    <!-- src 是嵌套页面的网址  -->
    <!-- frameborder是嵌套页面的一个边距 一般设置为0 -->
    <iframe src="./fuyemian.html" frameborder="0" class="ifr"></iframe>
</body>

页面嵌套的效果如下：