关于前端的学习思考-父子盒子溢出问题

先摆图片

很明显,大盒子高度设置400px,小盒子都是高度设置成300px,明显400px<600px,这时候子盒子就会溢出。如何解决溢出问题?

这个时候我把子盒子换成50%,50%。发现并不会溢出,因为相当于两个子盒子高度相加=父盒子高度。

再次发散思维,三个盒子如果至少有一个浮动,至少有一个绝对定位。。。情况又会如何?

上一篇文章我们得到如下结论:

1、浮动元素为父盒子,块级元素为子盒子。

2、块级元素为父盒子,浮动元素为子盒子。

父盒子都会带着子盒子移动。

摆结论:三个盒子如果至少有一个浮动,也会遵循子盒子高度相加溢出盒子这个规律。

如图我们看到box1变得很大,是基于body的宽度变化,box2由于是标准流,所以box1覆盖了box2,使得看不到box2。

此时我们任意在box中加入position:absolute;或者position:relative;就能解决这个问题。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/189781.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

springboot缓存技术-Ehcache-Redis-memcached

springboot缓存技术-Ehcache-Redis-memcached 文章目录 springboot缓存技术-Ehcache-Redis-memcachedspring缓存使用方式手机验证码案例缓存供应商变更Ehcache变更缓存供应商Redis缓存供应商变更memcached下载安装memcachedSpringBoot整合memcached spring缓存使用方式 导缓存…

异常处理啊

异常处理 异常 程序运行过程中&#xff0c;发生错误导致异常退出&#xff08;不是程序的语法问题&#xff0c;而是代码的逻辑问题&#xff0c;编译不出错&#xff09;。 e.g. string 字符串&#xff0c;使用 at 函数访问其中的字符元素时&#xff0c;如果越界&#xff0c;程…

2022年高校大数据挑战赛B题图像信息隐藏求解全过程论文及程序

2022年高校大数据挑战赛 B题 图像信息隐藏 原题再现&#xff1a; 互联网的快速发展&#xff0c;给图像、视频的传播方式带来巨大变化。图像作为媒体的重要载体&#xff0c;每天有大量的原创图像公开在互联网上&#xff0c;如何保护图像版权的同时不破坏原始的图像一直是图像处…

代码随想录刷题题Day3

刷题的第三天&#xff0c;希望自己能够不断坚持下去&#xff0c;迎来蜕变。&#x1f600;&#x1f600;&#x1f600; 刷题语言&#xff1a;C / Python Day3 任务 ● 链表理论基础 ● 203.移除链表元素 ● 707.设计链表 ● 206.反转链表 1 链表理论基础 链表&#xff1a;通过…

卷积神经网络(VGG-16)猫狗识别

文章目录 一、前言二、前期工作1. 设置GPU&#xff08;如果使用的是CPU可以忽略这步&#xff09;2. 导入数据3. 查看数据 二、数据预处理1. 加载数据2. 再次检查数据3. 配置数据集4. 可视化数据 三、构建VG-16网络四、编译五、训练模型六、模型评估七、保存and加载模型八、预测…

笔记----单纯剖分----1

笔记----单纯剖分 定义 线性组合仿射组合&#xff1a; 线性组合的系数为1凸组合&#xff1a; 仿射组合所有的系数都是正数 凸集 R^m 的 任意有限个点的凸组合仍在其中的子集仿射子空间 R^m 的 任意有限个点的仿射组合仍在其中的子集凸包 conv(A) A是R^m的一个子集 A的所有有限凸…

Rust语言项目实战(二) - 准备键盘和终端屏幕

上一章节中&#xff0c;我们实现了游戏开始音频的播放&#xff0c;本章我们开始编写游戏界面。我们的游戏是在命令行终端中运行的&#xff0c;因此编写的界面也是终端中展示的界面&#xff0c;上一章中&#xff0c;我们已经把相关的依赖包crossterm添加到了依赖列表中。本章首先…

Valentina Studio Pro:引领数据库管理软件新潮流

你是否正在寻找一款强大且易用的数据库管理软件&#xff1f;Valentina Studio Pro可能就是你的不二之选。这款软件是由Valentina Team开发的一款综合性数据库管理和编辑工具&#xff0c;它支持多种数据库系统&#xff0c;包括MySQL、PostgreSQL、SQLite等。 Valentina Studio …

java调用mysql存储过程

一、背景 在mysql上定义了存储过程&#xff0c;然后我想每1分钟调用一次存储过程。于是我设置了一个event&#xff0c;但是这个事件默认的运行周期为天&#xff0c;我尝试修改成minute却不生效。所以我决定通过java代码来调用存储过程。 二、mysql存储过程 CREATE DEFINERroot…

cpu版本的torch可以用清华镜像源安装

一、来到pytroch官网找到如下代码 官方提供的默认的安装cpu版本的torch的命令 pip3 install torch torchvision torchaudio二、使用清华镜像安装 pip3 install torch torchvision torchaudio -i https://pypi.tuna.tsinghua.edu.cn/simple

自然语言处理 (NLP) 中的组合语义分析

埃弗顿戈梅德&#xff08;Everton Gomede&#xff09; 一、介绍 自然语言处理 &#xff08;NLP&#xff09; 中的组合语义分析是一个引人入胜且复杂的话题。为了充分理解它&#xff0c;将这个概念分解成它的基本组成部分是至关重要的&#xff1a;组合语义及其在NLP中的应用。组…

零售数字化“逆熵”的6项原则和8种能力建设|ShopeX徐礼昭

作者&#xff1a;徐礼昭 来源&#xff1a;《三体零售逆熵法则》节选 旧的规则与秩序被打破&#xff0c;无序成为常态 新时代洪流裹挟冲击着传统零售 无序带来的“熵增”侵蚀企业生命 所有人都在不确定性中寻找确定 数字化如何助力企业铸就「反熵增」神器&#xff1f; 如何…

uniapp设置手机通知权限以及uniapp-push2.0推送

unipush2.0代码 export default function () {// 调用获取用户通知权限setPermissions()// 获取客户端唯一的推送标识&#xff0c;可用于测试uni.getPushClientId({success: (res) > {console.log(res.cid)},fail(err) {console.log(err)}})// 监听推送uni.onPushMessage(r…

设计模式之美学习笔记-单例模式-为什么说支持懒加载的双重检测不比饿汉式更优?

单例设计模式&#xff1a;一个类只允许创建一个对象&#xff08;或者实例&#xff09;&#xff0c;那这个类就是一个单例类&#xff0c;这种设计模式就叫作单例设计模式&#xff0c;简称单例模式。 实战案例一&#xff1a;处理资源访问冲突 我们先来看第一个例子。在这个例子…

第十节HarmonyOS 常用基础组件-Image

一、组件介绍 组件&#xff08;Component&#xff09;是界面搭建与显示的最小单位&#xff0c;HarmonyOS ArkUI声名式为开发者提供了丰富多样的UI组件&#xff0c;我们可以使用这些组件轻松的编写出更加丰富、漂亮的界面。 组件根据功能可以分为以下五大类&#xff1a;基础组件…

xss漏洞后端进行html消毒

import org.jsoup.Jsoup;public static String sanitizeHtml(String input) {// 使用 Jsoup 消毒 HTMLreturn Jsoup.clean(input, Safelist.relaxed());}public static void main(String[] args) {String userInput "<p><script>alert(1)</script>Safe…

海外IP罗拉rola正版去哪里找?

免费海外IP代理能用吗&#xff1f;和收费的有哪些差异&#xff1f; 如今在这个大数据时代&#xff0c;无论你从事哪个行业&#xff0c;都离不开数据&#xff0c;尤其是做跨境电商的&#xff0c;更一步都离不开海外IP代理&#xff0c;无论是网站引擎优化还是营销推广、数据抓取…

LeetCode105.从前序和中序遍历序列构造二叉树

这道题看完题想了几分钟就想到大概的思路了&#xff0c;但是在写的时候有很多细节没注意出了很多问题&#xff0c;然后写了1个多小时&#xff0c;其实这道题挺简单的。 首先&#xff0c;最基本的知识&#xff0c;先序遍历是根左右&#xff0c;中序遍历是左根右&#xff0c;那么…

集简云语聚AI新增模型测试,支持多模型同时进行交互,快速评估不同模型性能

语聚AI模型测试 在ChatGPT爆火的推动下&#xff0c;由生成式 AI 掀起的全球人工智能新浪潮就此拉开了序幕&#xff0c;人工智能也成为越来越多企业提升业务效率、优化业务流程的首选方案。 然而&#xff0c;面对层出不穷的AI模型&#xff0c;每个模型在完善度、功能性、易用性…

uni-app 微信小程序 电子签名及签名图片翻转显示功能

文章目录 1. 需求背景2. 开始撸2.1 点击 重写 进入签名页面&#xff08;上图一&#xff09;2.2 书写签名&#xff0c;点击确认返回&#xff0c;及图片翻转显示&#xff08;上图二&#xff0c;三&#xff09; 3. 图片进行翻转&#xff0c;返回翻转后的图片 1. 需求背景 接的一个…