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

简介: 问题是这样的,需要将 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
分享
相关文章
"面试通关秘籍:深度解析浏览器面试必考问题,从重绘回流到事件委托,让你一举拿下前端 Offer!"
【10月更文挑战第23天】在前端开发面试中,浏览器相关知识是必考内容。本文总结了四个常见问题:浏览器渲染机制、重绘与回流、性能优化及事件委托。通过具体示例和对比分析,帮助求职者更好地理解和准备面试。掌握这些知识点,有助于提升面试表现和实际工作能力。
78 1
【绝技揭秘】从零到英雄:解锁UniApp H5项目中的二维码生成与扫描秘籍,让你的应用瞬间变身扫码达人!
【8月更文挑战第20天】二维码在移动应用中无处不在。本文详述了在UniApp H5项目中实现二维码生成与扫描的方法。通过对比插件`uni-app-qrcode`和JavaScript库`qrcode-generator`生成二维码的方式,以及使用插件`@juggle/resize-observer`和HTML5的MediaDevices API进行扫描的技术方案,帮助开发者挑选最佳实践。无论是插件的便捷性还是原生JavaScript的灵活性,都能满足不同项目需求。
219 0
程序员教你用代码制作3d爱心跳动特效,正好拿去送给女神给她个惊喜
使用HTML、CSS和JavaScript实现了一个三维网格采样器`MeshSurfaceSampler`,适用于任意浏览器,推荐谷歌。代码创建了一个类,从缓冲几何体的三角形网格中进行随机采样。提供了设置权重属性、构建分布和自定义随机数生成器的功能。用户只需将代码复制到文本文档并保存为HTML文件,即可运行。适合编程爱好者尝试,也可分享给他人。
262 1
无聊猿大逃杀游戏卷轴模式系统开发逻辑步骤
区块链的去中心化,数据的防篡改,决定了智能合约更加适合于在区块链上来实现
第五节 关于浮动和清除浮动的解说,以及两个大坑不要踩
第五节 关于浮动和清除浮动的解说,以及两个大坑不要踩
128 0
【原生JS】做一个打字消除小游戏,学习摸鱼两不误
【原生JS】做一个打字消除小游戏,学习摸鱼两不误
137 0
【原生JS】做一个打字消除小游戏,学习摸鱼两不误
无敌!我用【C语言】手搓出了一个体系完整的【员工管理系统】还能玩游戏听音乐?(超详细,附完整源码)
前言:员工管理系统是一款面向公司管理员的管理工具,旨在提供员工信息管理、薪资管理、员工绩效评估、员工福利管理和智能推荐等功能,帮助公司管理员更好地管理员工信息和提高员工工作效率。 这是总体设计大概模型图:
157 0
【C++系列P7】模板搞不懂?脑阔抖三抖!!精讲一篇过!
【C++系列P7】模板搞不懂?脑阔抖三抖!!精讲一篇过!
手把手一步一步教你使用Java开发一个大型街机动作闯关类游戏13之英雄不要走出屏幕
手把手一步一步教你使用Java开发一个大型街机动作闯关类游戏13之英雄不要走出屏幕
159 0
AI助理

你好,我是AI助理

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