浮动流这操作秀了小白我一脸

简介: 问题是这样的,需要将 box 宽度为 580px 的盒子中放 5 个小的 item,item的宽度为 100px

image.png


问题是这样的,需要将 box 宽度为 580px 的盒子中放 5 个小的 item,item的宽度为 100px,要求使用浮动流使得排布出如下效果:


image.png


看到后心想,这有啥难,css不就是调来调去嘛,我直接开始搞:


<style>    .container {      width: 580px;      height: 300px;      background-color: deeppink;    }    .item {      float: left;      width: 100px;      height: 200px;      background-color: skyblue;      margin-right: 20px;    }  </style></head><body>  <div class="container">    <div class="item">item1</div>      <div class="item">item2</div>      <div class="item">item3</div>      <div class="item">item4</div>      <div class="item">item5</div>  </div></body>


image.png


操作完后发现如上的效果,突然回想起:**如果元素是向左(右)浮动,**浮动元素的左(右)边界不能超出包含块的左(右)边界。如果水平方向剩余的空间不够显示浮动元素,浮动元素将向下移动,直到有充足的空间为止。


奥,既然这样的话,原因清除是清楚了,那到底该怎么解决呢?这宽度少了 20px 我也不能自己加上去呀,再者就算自己加上去,貌似也效果就不一样了,右边就会多出一块红色的部分了,会影响美观的呀,那该怎么做呢?


image.png


还好最后收到点拨终于明白了,原来可以这么干,


image.png


当时看到这个就在想,我去,还能这么搞吗,至今才知道:margin可以设置为负值 (有可能以前也知道过,但是没注意也没用过给忘了)。


那么为什么可以这样呢?让我们打开浏览器看看,发现 box 的宽度竟然是 600px


image.png


这是为什么呢?明明 container 的 width 为 580px,box被包含在里面反而更大?


image.png


回过头又看了看盒子模型,终于找到了问题的答案:因为里面盒子没有padding 和 border,并且盒子的宽度没有设置,那就是auto,所以就会有: 宽度 + mr + ml 要等于外面盒子的宽度 580px,那么将 mr 设为 -20px 后,box 宽度自然就变为了 600px,这样加起来才会等于 container 的宽度。box 的 content 的 width其实是超出了 container 的。让我们给 box 加个高度和背景色看看。


image.png


发现确实如此,但是在实际开发中我们并不会给 box 设置高度,所以用户是看不到也不知道的,所以这样操作是没有问题的。

目录
打赏
0
0
0
0
1
分享
相关文章
如何在IDEA中借助深度思考模型 QwQ 提高编码效率?
通义灵码目前已经支持 QwQ-plus 模型,欢迎大家在【智能问答】里,选择切换模型,即可体验更小尺寸、更强性能的新模型!
134 10
SQL Server存储过程的优缺点
【10月更文挑战第18天】SQL Server 存储过程具有提高性能、增强安全性、代码复用和易于维护等优点。它可以减少编译时间和网络传输开销,通过权限控制和参数验证提升安全性,支持代码共享和复用,并且便于维护和版本管理。然而,存储过程也存在可移植性差、开发和调试复杂、版本管理问题、性能调优困难和依赖数据库服务器等缺点。使用时需根据具体需求权衡利弊。
200 1
云端智控:重塑风险防控新纪元
云上智能风控正在重塑风险管理的方式,为各行各业带来了前所未有的机遇。通过集成先进的技术和算法,这些系统不仅能够有效降低风险,还能提高整体业务的效率和质量。面对不断演进的威胁和技术挑战,企业应当积极探索和采用最新的风控技术,以确保在数字经济时代立于不败之地。
SLS 数据加工全面升级,集成 SPL 语法
在系统开发、运维过程中,日志是最重要的信息之一,其最大的优点是简单直接。SLS 数据加工功能旨在解决非结构化的日志数据处理,当前全面升级,集成 SPL 语言、更强的数据处理性能、更优的使用成本。
18372 208
深入浅出分布式事务:理论与实践
在数字化时代的浪潮中,分布式系统如同星辰大海般浩瀚而深邃。本文将带你航行于这片星辰大海,探索分布式事务的奥秘。我们将从事务的基本概念出发,逐步深入到分布式事务的核心机制,最后通过一个实战案例,让你亲自体验分布式事务的魅力。让我们一起揭开分布式事务的神秘面纱,领略其背后的科学与艺术。
139 1
探索量子计算的未来:原理、应用与挑战
本文深入探讨了量子计算的基本原理、当前实际应用以及面临的技术和理论挑战,旨在为读者提供全面的技术性视角。
306 29
在Vue中,如何保证事件监听器的注册和清除操作在正确的生命周期执行?
在Vue中,如何保证事件监听器的注册和清除操作在正确的生命周期执行?
230 2
【热门技术】一文了解什么是云原生
【热门技术】一文了解什么是云原生
567 0
【热门技术】一文了解什么是云原生

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问