说说你对 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 主要是指文本在其父级块元素中的布局规则。
Flex 和 Grid 布局:现代前端布局中, Flex和 Grid 布局也在逐渐替代部分传统布局技巧。了解和掌握它们也非常重要。
HTML4 与 HTML5 有什么区别
HTML5 和 HTML4 的区别涵盖了多个方面,涉及结构、语义、功能性、以及多媒体支持等。以下是详细的比较:
1.Doctype 声明****
。HTML4: Doctype 声明非常冗长,分为三种类型(严格、过渡、框架集),例如: html 复制代码
HTML5: Doctype 简化,统一为一行,书写简洁: html 复制代码
2.语义标签
HTML4: 使用大量非语义化的
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是屏幕(一个小知识)