说说你对 BFC 的理解,如何创建 BFC?

179 阅读7分钟

说说你对 BFC 的理解,如何创建 BFC?

回答重点

BFC (块级格式化上下文,Block Fomating Context)是CSS中一种非常重要的布局概念,是一个独立的染区域,使其内部的布局不受外部元素影响。了解 BFC有助于解决浮动、清除浮动、边距重叠等常见布局问题。 创建 BFC 非常简单,常见的方法有:

1.设置元素的 float 属性为 left 或 right 。

2.设置元素的 position 属性为 absolute或 fixed。

3.设置元素的 display 属性为inline-block或table-ce11等

4.设置元素的 overflow 属性为 hidden、auto或 scro11。

扩展知识

简单总结之后,我再详细说说BFC的几个常见使用场暴和影响规则吧,

1、浮动元素的清除: 当在设计页面布局时,需要清除浮动影响来保证父元素正确的高度,这时可以利用创建BFC来实现。这种方法比给父元素添加一个空的 iv 进行清除浮动更优雅。

2、防止外边距(Margin)重叠: 如果两个相邻的普通流定位的块元素相遇,它们的垂直外边距会发生重叠(取较大值)。通过创建 BFC,可以将两个元素的外边距分离,避免重叠现象。

3、自适应容器: BFC 可以包含浮动元素。例如,在一个浮动子元素里,如果父元素也是 BFC,则父元素就会包含子元素的高度。

4、隔离 float 元素: 上面提到,foat 元素被包含在BFC里会被包含其高度,如果我们不想其他元毒被 foat 元毒影响布局,那么我们可以给该元毒创造一个 BFC当深入了解BFC及其使用场景后,

还有一些相关的概念你也得知晓:

IFC(lnline Formating Context):内联格式化上下文,它和 BFC 一样是 CSS 布局中的一种概念。IFC 主要是指文本在其父级块元素中的布局规则。

FlexGrid 布局:现代前端布局中, Flex和 Grid 布局也在逐渐替代部分传统布局技巧。了解和掌握它们也非常重要。

HTML4 与 HTML5 有什么区别

HTML5 和 HTML4 的区别涵盖了多个方面,涉及结构、语义、功能性、以及多媒体支持等。以下是详细的比较:

1.Doctype 声明****

。HTML4: Doctype 声明非常冗长,分为三种类型(严格、过渡、框架集),例如: html 复制代码

HTML5: Doctype 简化,统一为一行,书写简洁: html 复制代码

2.语义标签

HTML4: 使用大量非语义化的

来构建页面结构,缺乏语义化标签HTML5:引入了新的语义化标签,帮助开发者和搜索引擎更好地理解页面结构和内容:

:定义页头 :定义页脚 :独立的内容块. :内容部分 :导航栏 .:侧边栏或补充内容

3.多媒体支持

HTML4: 不支持原生多媒体,音频和视频通常通过 Flash 或插件实现。 HTML5: 增加了原生多媒体支持,不需要依赖第三方插件: :嵌入音频文件 .:嵌入视频文件 :用于指定音频/视频资源的多种格式,以支持不同的浏览器 示例: html 复制代码 Your browser does not support the video tag.

4.图像绘制和动画

HTML4: 没有提供原生的图形绘制和动画功能,通常使用 Flash、JavaScript 或外部库。 HTML5:引入了<canvas》元素,用于绘制图形和制作动画,允许开发者通过JavaScript 动态绘制图像和图形内容。 。示例: html 复制代码

5.表单控件的增强

HTML4: 表单元素较为有限,不能处理复杂的表单验证,通常依赖JavaScript 实现 HTML5:引入了许多新的表单输入类型和属性,增强了表单的功能性和可用性。和 新的输入类型: :用于输入电子邮件地址 :用于输入 URL :用于选择日期 :滑动条 :用于输入数字 还添加了诸如 placeholder、autofocus、required 等属性,简化了表单验证和交互设计:

6.本地存储

HTML4:没有本地存储机制, 依赖于 Cookies 来存储少量数据, 但 CooKies 有大小限制目每次请求都 会被发送到服务器,效率较低HTML5: 提 供了更强大的本地存储 API: LocalStorage:可存储较大的数据目不会随 HTT P 请求发送到服务器,数据没有过期时 间,除非手动删除。SessionStorage:只 在当前会话有效,浏览器关闭后数据会被清除。示例: javascript 复制代码 localStorage.setItem("key","value"); var data=localstorage.getItem("key");

ws和wss是什么?

一、ws(WebSocket)(心态检测,我是A,我是B,我是小满!)

  • 定义:WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议,允许客户端和服务器之间进行实时、双向的数据传输。

  • 工作原理

    • 它通过 HTTP 协议进行初始握手,客户端发送一个特殊的 HTTP 请求,其中包含 WebSocket 协议的相关头部信息,服务器收到后如果支持 WebSocket 协议,则返回一个特定的响应,完成握手过程,之后连接就会升级为 WebSocket 连接。
    • 一旦连接建立,客户端和服务器可以随时向对方发送消息,而不需要像传统的 HTTP 请求那样,客户端发送请求,服务器响应后连接就关闭。这种实时通信能力使得 WebSocket 非常适合用于需要实时更新数据的应用场景,如聊天应用、实时数据监控、在线游戏等。
  • 应用场景示例

    • 在一个多人在线聊天系统中,当一个用户发送消息时,服务器可以通过 WebSocket 立即将消息推送给其他所有在线用户,而不需要用户不断地刷新页面或发送 HTTP 请求来获取新消息,从而提供了更加流畅和实时的用户体验。

二、wss(WebSocket Secure)

  • 定义:wss 是 WebSocket 的安全版本,它是基于 TLS/SSL 加密的 WebSocket 协议。

  • 与 ws 的区别

    • 主要区别在于安全性,wss 使用加密通道来传输数据,确保数据在传输过程中不被窃取或篡改。这对于处理敏感信息的应用非常重要,如金融交易、用户认证等场景。
    • 在连接建立时,wss 的握手过程与 ws 类似,但会使用 HTTPS 协议进行初始握手,并且在后续的数据传输中使用加密算法对数据进行加密和解密。
  • 应用场景示例

    • 在一个网上银行系统中,用户与服务器之间的实时通信(如账户余额更新、交易通知等)需要使用 wss 来确保数据的安全性和隐私性,防止用户的账户信息和交易数据被黑客截获和篡改。

总之,ws 提供了一种高效的实时通信方式,而 wss 在其基础上增加了安全性,开发者可以根据应用的具体需求选择使用 ws 或 wss。

java局部变量与成员变量

public class Example {
    private int num = 10; // 成员变量

    public void method() {
        int num = 20; // 局部变量,与成员变量同名
        System.out.println(num); // 输出 20,这里访问的是局部变量
    }
}
        
        
        
        java

public class Example { private int value;

public void setValue(int value) {
    this.value = value; // 通过this关键字来访问成员变量,这里的value是方法参数
}

}

在 Java 中,this关键字主要有以下几种重要作用:

(有很多作用,这里就学了一个,后面再补充)

1. 引用当前对象的实例变量

当类的成员变量与方法中的局部变量同名时,使用this关键字可以明确地引用当前对象的成员变量,以区分局部变量

%是父级元素, vw是屏幕(一个小知识)