首页 > 其他分享 >iframe、BFC

iframe、BFC

时间:2024-07-22 09:00:51浏览次数:9  
标签:BFC bfc 元素 iframe 页面 属性

iframe

iframe标签用来制作后台管理系统,不需要新开浏览器窗口就可以在本页面规定区域切换页面。

iframe 标签src属性是首次展示的页面 添加name属性用来绑定跳转连接

a连接负责跳转页面,属性targate就是iframe的name属性

浏览器回默认给iframe一点多余的尺寸需要自己调

BFC

什么是BFC?

bfc从字面意思来讲就是block formatting context(块级格式化上下文),bfc其实是页面中一个单独渲染区域,并且有自己的渲染规则

bfc区域里的元素无论如何布局都不会影响外层的元素排列

BFC的触发条件

1.根元素html

2.定位属性position:absolute/fixed

3.溢出属性overflow:除了visible其他都可以比如hidden

4.元素类型display:inline-block/table-cell/table-caption,/flex

5、浮动float的值不为none

BFC触发后的现象

1.垂直方向一个接一个排列

2.上下两个容器直接的外间距取较大值

3.每个margin-box的左边与包含块border-box的左边相接触

4.浮动元素的高度会参与计算

5.浮动与触发BFC区域不会重叠

标签:BFC,bfc,元素,iframe,页面,属性
From: https://blog.csdn.net/m0_72498273/article/details/140599697

相关文章

  • 前端——BFC
    一、什么是BFC?1.BFC是BlockFormattingContext(块级格式上下文),可以理解成元素的一个“特异功能”。2.该"特异功能",在默认的情况下处于关闭状态;当元素满足了某些条件后,该“特异功能”被激活。3.所谓激活“特异功能”,专业点说就是:该元素创建了BFC(又称:开启了BFC)。......
  • odoo 嵌入iframe
    js添加js代码,书写一个widget,进行使用/**@odoo-module**/import{registry}from"@web/core/registry";import{useService}from"@web/core/utils/hooks";import{standardFieldProps}from"@web/views/fields/standard_field_props";......
  • iframe 使用以及互相传值
    <divclass="aiWrite"><iframev-if="aiWriteShow"ref="iframeRef"style="width:100%;min-height:calc(100vh-216px)"name="iframePage":s......
  • 【软件工程造价师必修课:概念篇】4.ILF/EIF/EI/EO/EQ/BFC五大功能点说的明明白白!附案例
       软件成本评估工作,本身有一定的专业性,也是有一定的门槛,最主要的难点在功能点识别方面。  下面我们就针对评估过程中需要掌握的功能点知识,分享给大家,大家先了解概念,继而通过我们的案例来让概念更具体化,从而达到初步了解并掌握。BFC 基本功能组件BasicFunction......
  • 关于iframe标签用法
    iframe是啥?概念:  iframe是HTML的一个标签,用于在网页中嵌入另一个HTML文档。通俗来讲就是你自己的html页面里面可以随便拿一块空间嵌套别的网页。你们看到这个页面两侧的广告(google广告)。下面是我自己在自己页面嵌套的youtube视频~ 代码:效果 iframe的属性:sr......
  • selenium04_iframe切换
    1.用iframe的id属性切换到iframe:driver.switch_to.frame("id的值")2.用iframe的name属性切换到iframe:driver.switch_to.frame("name的值")3.iframe没有id和name属性,把iframe当作一个对象,用标签去定位全部iframe,然后用下标取某个iframe,再去切换frame=driver.find_elements_by_t......
  • 不实用iframe,CSS媒体查询依旧生效
    这段SCSS代码定义了用于处理响应式设计和媒体查询的功能和混合器。以下是对这段代码的逐行解释:```scss$mediaMinWidth:1024px;```定义了一个变量`$mediaMinWidth`,其值为1024像素。```scss@functiontranslate-media-condition($c){$condMap:("screen":"......
  • 在React项目中使用iframe嵌入一个网站
    在React项目中使用iframe嵌入一个网站非常简单。以下是如何在页面中嵌入百度网站的步骤:1.创建一个新的组件用于嵌入iframe首先,在src/components文件夹中创建一个新的文件Baidu.js。在Baidu.js文件中,编写如下代码://src/components/Baidu.jsimportReactfrom'react'......
  • springboot项目中使用iframe引入页面
    很多朋友想在spring-boot项目(包含:Security)中引用iframe,但是都不能正常运行,会报错localhost已拒绝连接:这是因为这个框架的安全性考虑:默认情况下,现代的Web浏览器会应用一些安全策略,例如同源策略,限制从一个源加载的内容如何与来自另一个源的内容进行交互。如果你尝试从一个不......
  • python爬虫之iframe处理+动作链
    python爬虫之iframe处理+动作链selenium处理iframe1、如果定位的标签存在于iframe标签之中,则必须使用switch_to.frame(id)2、动作链(拖动):fromselenium.webdriverimportActionChains(1)实例化一个动作链对象:action=ActionChains(bro)(2)click_and_hold(div):长按且点击操......