当前位置: 首页 > news >正文

css知识:盒模型盒子塌陷BFC

1. css盒模型

标准盒子模型,content-box

设置宽度即content的宽度
width = content
总宽度=content(width设定值) + padding + border

IE/怪异盒子模型,border-box
width = content + border + padding

总宽度 = width设定值

2. 如何解决盒子塌陷

自元素设置float时,父元素高度会塌陷
在这里插入图片描述

解决办法:

  1. 父元素添加清除浮动:
.clear-1::after {content: '';display: block;clear: both;
}

在这里插入图片描述

  1. 父元素添加overflow属性:
    设置overflow: hidden;或overflow: auto;
    在这里插入图片描述

  2. 添加边框或外边距----不推荐

  3. 使用flex布局—不存在浮动的问题

3. BFC理解

BFC即(Block Formatting Context)块级格式上下文。它是一个独立的渲染区域或者说是一个隔离的独立容器,在这个容器中的元素不会影响到外部的元素,反之亦然。

**作用:**主要是处理盒子编剧重叠问题,并形成一个相对外界完全独立的空间。

触发BFC的条件:

  1. 跟元素—html元素
  2. 浮动元素:float值为left或right
  3. overflow值不为visible,即是auto,scroll,hidden
  4. display: inline-block、inline-table、table、inline-table、flex、inline-flex、grid、inline-grid。
  5. position: absolute,fixed

相关文章:

css知识:盒模型盒子塌陷BFC

1. css盒模型 标准盒子模型,content-box 设置宽度即content的宽度 width content 总宽度content(width设定值) padding border IE/怪异盒子模型,border-box width content border padding 总宽度 width设定值 2. 如何…...

Nginx的反向代理:实现灵活的请求转发和内容缓存

一、引言:代理服务器的简介 本节介绍代理服务器的基本配置。学习如何通过不同协议将 NGINX 请求传递给代理的服务器,修改发送到代理服务器的客户端请求标头,以及配置来自代理服务器的响应缓冲。 代理通常用于在多个服务器之间分配负载&…...

免费享受企业级安全:雷池社区版WAF,高效专业的Web安全的方案

网站安全成为了每个企业及个人不可忽视的重要议题。 随着网络攻击手段日益狡猾和复杂,选择一个强大的安全防护平台变得尤为关键。 推荐的雷池社区版——一个为网站提供全面安全防护解决方案的平台,它不仅具备高效的安全防护能力,还让网站安…...

基于SpringBoot的航班进出港管理系统

文章目录 项目介绍主要功能截图:部分代码展示设计总结项目获取方式 🍅 作者主页:超级无敌暴龙战士塔塔开 🍅 简介:Java领域优质创作者🏆、 简历模板、学习资料、面试题库【关注我,都给你】 &…...

Odoo系统安装部署并结合内网穿透实现固定域名访问本地ERP系统

文章目录 前言1. 下载安装Odoo:2. 实现公网访问Odoo本地系统:3. 固定域名访问Odoo本地系统 前言 Odoo是全球流行的开源企业管理套件,是一个一站式全功能ERP及电商平台。 开源性质:Odoo是一个开源的ERP软件,这意味着企…...

幻兽帕鲁(Palworld 1.4.1)私有服务器搭建(docker版)

文章目录 说明客户端安装服务器部署1Panel安装和配置docker服务初始化设置设置开机自启动设置镜像加速 游戏服务端部署游戏服务端参数可视化配置 Palworld连接服务器问题总结 说明 服务器硬件要求:Linux系统/Window系统(x86架构,armbian架构…...

好书推荐丨细说Python编程:从入门到科学计算

文章目录 写在前面Python简介推荐图书内容简介编辑推荐作者简介 推荐理由粉丝福利写在最后 写在前面 本期博主给大家推荐一本Python基础入门的全新正版书籍,对Python、机器学习、人工智能感兴趣的小伙伴们快来看看吧~ Python简介 Python 是一种广泛使用的高级、解…...

智慧城市与数字孪生:共创未来城市新篇章

一、引言 随着科技的飞速发展,智慧城市与数字孪生已成为现代城市建设的核心议题。智慧城市注重利用先进的信息通信技术,提升城市治理水平,改善市民生活品质。而数字孪生则通过建立物理城市与数字模型之间的连接,为城市管理、规划…...

Java数据结构---初识集合框架

目录 一、什么是集合框架 二、集合框架的重要性 三、背后涉及的数据结构及算法 1.什么是数据结构 2.容器背后对应的数据结构 3.相关的Java知识 4.什么是算法 一、什么是集合框架 Java 集合框架 Java Collection Framework ,又被称为容器 container &#xff0…...

Spring Cloud学习

1、什么是SpringCloud Spring cloud 流应用程序启动器是基于 Spring Boot 的 Spring 集成应用程序,提供与外部系统的集成。Spring cloud Task,一个生命周期短暂的微服务框架,用于快速构建执行有限数据处理的应用程序。Spring cloud 流应用程…...

【计算机网络】1.4 接入网和物理媒体

1.4 接入网和物理媒体 问题:怎样将端系统和边缘路由器连接? 答:有线方式(住宅接入网络、单位接入网络等)或无线方式(无线接入网络)。 有线接入方式 光纤同轴混合网是基于已有的有线电视网开发的…...

关于螺栓的基本拧紧技术了解多少——SunTorque智能扭矩系统

螺栓是机械中常见的紧固件之一,用于将两个或多个部件连接在一起,并保持它们之间的紧密配合。拧紧螺栓是一项基本的技术,但在实际操作中,许多工人并不了解正确的拧紧方法,从而导致螺栓松动、连接失效等问题的出现。因此…...

C# .Net 发布后,把dll全部放在一个文件夹中,让软件目录更整洁

PublishFolderCleaner – Github 测试环境: .Net 8 Program.cs 代码 // https://github.com/dotnet-campus/dotnetcampus.DotNETBuildSDK/tree/master/PublishFolderCleanerusing System.Diagnostics; using System.Text;// 名称, 不用写 .exe var exeName "AbpDemo&…...

[更新]ARCGIS之土地耕地占补平衡、进出平衡系统报备坐标txt格式批量导出工具(定制开发版)

序言 之前开发的耕地占补平衡报备格式,现在之前的基础上集成了耕地进出平衡报备格式导出。 之前版本软件详见:软件介绍 一、软件简介 本软件是基于arcgis二次开发的工具(插件),需要授权后才能使用; 本软件…...

todolist

一开始想自己写个todolist的网页,一直没时间,直接拿这个博客记录了,因为仅我可见比较麻烦,就放在全部可见记录了 目录 2024年3月todoes了解一下深入学习k8s,比如pod运行多个容器 ,编写自己的镜像 2024年2月…...

【Java程序设计】【C00307】基于Springboot的基Hadoop的物品租赁管理系统(有论文)

基于Springboot的基Hadoop的物品租赁管理系统(有论文) 项目简介项目获取开发环境项目技术运行截图 项目简介 这是一个基于Springboot的基于 Hadoop的物品租赁系统的设计与实现,本系统有管理员、用户二种角色权限; 前台首页&#…...

GIT中对子仓库的使用方法介绍

git 子仓库 主仓库中添加子仓库 git submodule add <url> <path>更新子代码代码 git submodule update --init克隆含有子仓库的仓库 git clone --recurse-submodules <url>主仓库中删除子仓库 1、进入包含子仓库的父仓库的根目录 2、使用以下命令将子仓…...

ClickHouse 指南(三)最佳实践 -- 跳数索引

Data Skipping Indexes Data Skipping Indexes 2 1、简介 影响ClickHouse查询性能的因素很多。在大多数情况下&#xff0c;关键因素是ClickHouse在计算查询WHERE子句条件时是否可以使用主键。因此&#xff0c;选择适用于最常见查询模式的主键对于有效的表设计至关重要。 然…...

Mybatis总结--传参二

#叫做占位符 Mybatis是封装的JDBC 增强版 内部还是用的jdbc 每遇到一个#号 这里就会变为&#xff1f;占位符 一个#{}就是对应一个问号 一个占位符 用这个对象执行sql语句没有sql注入的风险 八、多个参数-使用Param 当 Dao 接口方法有多个参数&#xff0c;需要通过名称使…...

2024年数字化转型风口趋势大赏

人工智能和自动化确实为提高效率和数据驱动的见解提供了巨大的潜力&#xff0c;但这些技术无法完全取代人类技能和情境决策。在混合模型中将人工智能功能与人类专业知识相结合的企业将实现最大的效益。 随着人工智能和自动化的不断发展&#xff0c;企业必须调整其战略、流程和人…...

ssc377d修改flash分区大小

1、flash的分区默认分配16M、 / # df -h Filesystem Size Used Available Use% Mounted on /dev/root 1.9M 1.9M 0 100% / /dev/mtdblock4 3.0M...

Go 语言接口详解

Go 语言接口详解 核心概念 接口定义 在 Go 语言中&#xff0c;接口是一种抽象类型&#xff0c;它定义了一组方法的集合&#xff1a; // 定义接口 type Shape interface {Area() float64Perimeter() float64 } 接口实现 Go 接口的实现是隐式的&#xff1a; // 矩形结构体…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序

一、开发准备 ​​环境搭建​​&#xff1a; 安装DevEco Studio 3.0或更高版本配置HarmonyOS SDK申请开发者账号 ​​项目创建​​&#xff1a; File > New > Create Project > Application (选择"Empty Ability") 二、核心功能实现 1. 医院科室展示 /…...

Nuxt.js 中的路由配置详解

Nuxt.js 通过其内置的路由系统简化了应用的路由配置&#xff0c;使得开发者可以轻松地管理页面导航和 URL 结构。路由配置主要涉及页面组件的组织、动态路由的设置以及路由元信息的配置。 自动路由生成 Nuxt.js 会根据 pages 目录下的文件结构自动生成路由配置。每个文件都会对…...

视频字幕质量评估的大规模细粒度基准

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 摘要 视频字幕在文本到视频生成任务中起着至关重要的作用&#xff0c;因为它们的质量直接影响所生成视频的语义连贯性和视觉保真度。尽管大型视觉-语言模型&#xff08;VLMs&#xff09;在字幕生成方面…...

ETLCloud可能遇到的问题有哪些?常见坑位解析

数据集成平台ETLCloud&#xff0c;主要用于支持数据的抽取&#xff08;Extract&#xff09;、转换&#xff08;Transform&#xff09;和加载&#xff08;Load&#xff09;过程。提供了一个简洁直观的界面&#xff0c;以便用户可以在不同的数据源之间轻松地进行数据迁移和转换。…...

浅谈不同二分算法的查找情况

二分算法原理比较简单&#xff0c;但是实际的算法模板却有很多&#xff0c;这一切都源于二分查找问题中的复杂情况和二分算法的边界处理&#xff0c;以下是博主对一些二分算法查找的情况分析。 需要说明的是&#xff0c;以下二分算法都是基于有序序列为升序有序的情况&#xf…...

稳定币的深度剖析与展望

一、引言 在当今数字化浪潮席卷全球的时代&#xff0c;加密货币作为一种新兴的金融现象&#xff0c;正以前所未有的速度改变着我们对传统货币和金融体系的认知。然而&#xff0c;加密货币市场的高度波动性却成为了其广泛应用和普及的一大障碍。在这样的背景下&#xff0c;稳定…...

基于 TAPD 进行项目管理

起因 自己写了个小工具&#xff0c;仓库用的Github。之前在用markdown进行需求管理&#xff0c;现在随着功能的增加&#xff0c;感觉有点难以管理了&#xff0c;所以用TAPD这个工具进行需求、Bug管理。 操作流程 注册 TAPD&#xff0c;需要提供一个企业名新建一个项目&#…...

【无标题】路径问题的革命性重构:基于二维拓扑收缩色动力学模型的零点隧穿理论

路径问题的革命性重构&#xff1a;基于二维拓扑收缩色动力学模型的零点隧穿理论 一、传统路径模型的根本缺陷 在经典正方形路径问题中&#xff08;图1&#xff09;&#xff1a; mermaid graph LR A((A)) --- B((B)) B --- C((C)) C --- D((D)) D --- A A -.- C[无直接路径] B -…...