当前位置: 首页 > 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;企业必须调整其战略、流程和人…...

label-studio的使用教程(导入本地路径)

文章目录 1. 准备环境2. 脚本启动2.1 Windows2.2 Linux 3. 安装label-studio机器学习后端3.1 pip安装(推荐)3.2 GitHub仓库安装 4. 后端配置4.1 yolo环境4.2 引入后端模型4.3 修改脚本4.4 启动后端 5. 标注工程5.1 创建工程5.2 配置图片路径5.3 配置工程类型标签5.4 配置模型5.…...

【SpringBoot】100、SpringBoot中使用自定义注解+AOP实现参数自动解密

在实际项目中,用户注册、登录、修改密码等操作,都涉及到参数传输安全问题。所以我们需要在前端对账户、密码等敏感信息加密传输,在后端接收到数据后能自动解密。 1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId...

macOS多出来了:Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用

文章目录 问题现象问题原因解决办法 问题现象 macOS启动台&#xff08;Launchpad&#xff09;多出来了&#xff1a;Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用。 问题原因 很明显&#xff0c;都是Google家的办公全家桶。这些应用并不是通过独立安装的…...

04-初识css

一、css样式引入 1.1.内部样式 <div style"width: 100px;"></div>1.2.外部样式 1.2.1.外部样式1 <style>.aa {width: 100px;} </style> <div class"aa"></div>1.2.2.外部样式2 <!-- rel内表面引入的是style样…...

HTML前端开发:JavaScript 常用事件详解

作为前端开发的核心&#xff0c;JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例&#xff1a; 1. onclick - 点击事件 当元素被单击时触发&#xff08;左键点击&#xff09; button.onclick function() {alert("按钮被点击了&#xff01;&…...

Go 并发编程基础:通道(Channel)的使用

在 Go 中&#xff0c;Channel 是 Goroutine 之间通信的核心机制。它提供了一个线程安全的通信方式&#xff0c;用于在多个 Goroutine 之间传递数据&#xff0c;从而实现高效的并发编程。 本章将介绍 Channel 的基本概念、用法、缓冲、关闭机制以及 select 的使用。 一、Channel…...

纯 Java 项目(非 SpringBoot)集成 Mybatis-Plus 和 Mybatis-Plus-Join

纯 Java 项目&#xff08;非 SpringBoot&#xff09;集成 Mybatis-Plus 和 Mybatis-Plus-Join 1、依赖1.1、依赖版本1.2、pom.xml 2、代码2.1、SqlSession 构造器2.2、MybatisPlus代码生成器2.3、获取 config.yml 配置2.3.1、config.yml2.3.2、项目配置类 2.4、ftl 模板2.4.1、…...

力扣热题100 k个一组反转链表题解

题目: 代码: func reverseKGroup(head *ListNode, k int) *ListNode {cur : headfor i : 0; i < k; i {if cur nil {return head}cur cur.Next}newHead : reverse(head, cur)head.Next reverseKGroup(cur, k)return newHead }func reverse(start, end *ListNode) *ListN…...

git: early EOF

macOS报错&#xff1a; Initialized empty Git repository in /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core/.git/ remote: Enumerating objects: 2691797, done. remote: Counting objects: 100% (1760/1760), done. remote: Compressing objects: 100% (636/636…...

数据结构:递归的种类(Types of Recursion)

目录 尾递归&#xff08;Tail Recursion&#xff09; 什么是 Loop&#xff08;循环&#xff09;&#xff1f; 复杂度分析 头递归&#xff08;Head Recursion&#xff09; 树形递归&#xff08;Tree Recursion&#xff09; 线性递归&#xff08;Linear Recursion&#xff09;…...