css相邻元素边框重合问题,解决方案

这篇具有很好参考价值的文章主要介绍了css相邻元素边框重合问题,解决方案。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1、如下图所示,在给元素设置边框后,相邻元素会出现重合的问题

css相邻元素边框重合问题,解决方案,css,前端

2、解决方案

给每个元素设置margin-top以及margin-left为负的边框

 <div style="width: 300px;display: flex;flex-wrap: wrap;margin-top: 50px;">
   <div style="border: 1px solid red;height: 100px;width: 300px;box-sizing: border-box;margin-top: -1px;margin-left: -1px;"></div>
   <div style="border: 1px solid red;height: 100px;width: 100px;box-sizing: border-box;margin-top: -1px;margin-left: -1px;"></div>
   <div style="border: 1px solid red;height: 100px;width: 100px;box-sizing: border-box;margin-top: -1px;margin-left: -1px;"></div>
   <div style="border: 1px solid red;height: 100px;width: 100px;box-sizing: border-box;margin-top: -1px;margin-left: -1px;"></div>
   <div style="border: 1px solid red;height: 100px;width: 100px;box-sizing: border-box;margin-top: -1px;margin-left: -1px;"></div>
   <div style="border: 1px solid red;height: 100px;width: 100px;box-sizing: border-box;margin-top: -1px;margin-left: -1px;"></div>
 </div>

css相邻元素边框重合问题,解决方案,css,前端

3、但是如上图所示,又会导致出现每个模块合起来后实际并未占满整个空间

我的解决方案是在宽度上下手,根据观察,发现一行三列,实际导致缺失的是两个边框的大小,那么将这两个边框的大小平分到每行三列模块的开宽度内即可解决,其他情况下,由此推导

<div style="width: 300px;display: flex;flex-wrap: wrap;margin-top: 50px;">
	<div style="border: 1px solid red;height: 100px;width: 300px;box-sizing: border-box;margin-top: -1px;margin-left: -1px;"></div>
	<div style="border: 1px solid red;height: 100px;width: calc(100px + 1px * 2 / 3);box-sizing: border-box;margin-top: -1px;margin-left: -1px;"></div>
	<div style="border: 1px solid red;height: 100px;width: calc(100px + 1px * 2 / 3);box-sizing: border-box;margin-top: -1px;margin-left: -1px;"></div>
	<div style="border: 1px solid red;height: 100px;width: calc(100px + 1px * 2 / 3);box-sizing: border-box;margin-top: -1px;margin-left: -1px;"></div>
	<div style="border: 1px solid red;height: 100px;width: calc(100px + 1px * 2 / 3);box-sizing: border-box;margin-top: -1px;margin-left: -1px;"></div>
	<div style="border: 1px solid red;height: 100px;width: calc(100px + 1px * 2 / 3);box-sizing: border-box;margin-top: -1px;margin-left: -1px;"></div>
</div>

css相邻元素边框重合问题,解决方案,css,前端文章来源地址https://www.toymoban.com/news/detail-837290.html

到了这里,关于css相邻元素边框重合问题,解决方案的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 关于使用鼠标时间mouseMove拖拽元素及元素抖动的解决方案

    最近在做一个画布相关的项目时有一个场景是移动画布,最先开始想到的是拖拽事件,但是用户希望元素是实时的变化,所以决定使用mouseMove事件来做。 通过 mouseDown 事件确定鼠标按下的位置 根据 mouseMove 事件来计算出鼠标相对初始状态的横向位移距离和纵向的位移距离 获取

    2024年02月10日
    浏览(39)
  • Selenium无法定位元素的几种解决方案

    🍅 视频学习: 文末有免费的配套视频可观看 🍅  关注公众号【互联网杂货铺】,回复 1  ,免费获取软件测试全套资料,资料在手,涨薪更快 1、frame/iframe表单嵌套 WebDriver只能在一个页面上对元素识别与定位,对于frame/iframe表单内嵌的页面元素无法直接定位。 解决方法:

    2024年02月22日
    浏览(43)
  • 抓紧收藏,Selenium无法定位元素的几种解决方案

    01、frame/iframe表单嵌套 WebDriver只能在一个页面上对元素识别与定位,对于frame/iframe表单内嵌的页面元素无法直接定位。 解决方法 : driver.switch_to.frame ( id/name/obj ) switch_to.frame()默认可以直接取表单的id或name属性。如果没有可用的id和name属性,可以先定位到frame/iframe,再将定位

    2024年02月20日
    浏览(39)
  • Selenium无法定位元素的几种解决方案(超详细整理)

    🍅 视频学习: 文末有免费的配套视频可观看 🍅  关注公众号【互联网杂货铺】,回复 1  ,免费获取软件测试全套资料,资料在手,涨薪更快 WebDriver只能在一个页面上对元素识别与定位,对于frame/iframe表单内嵌的页面元素无法直接定位。 解决方法: driver.switch_to.frame(id/

    2024年02月20日
    浏览(47)
  • 现代 CSS 解决方案:CSS 原生支持的三角函数

    在 CSS 中,存在许多数学函数,这些函数能够通过简单的计算操作来生成某些属性值,例如 : calc():用于计算任意长度、百分比或数值型数据,并将其作为 CSS 属性值。 min() 和 max():用于比较一组数值中的最大值或最小值,也可以与任意长度、百分比或数值型数据一同使用。

    2024年02月06日
    浏览(45)
  • 现代 CSS 解决方案:原生嵌套(Nesting)

    很早之前,就写过一篇与原生嵌套相关的文章 -- CSS 即将支持嵌套,SASS/LESS 等预处理器已无用武之地?,彼时 CSS 原生嵌套还处于工作草案 Working Draft (WD) 阶段,而今天(2023-09-02),CSS 原生嵌套 Nesting 终于成为了既定的规范! 在之前,只有在 LESS、SASS 等预处理器中,我们才

    2024年02月09日
    浏览(49)
  • 现代 CSS 解决方案:数学函数 Round

    在 CSS 中,存在许多数学函数,这些函数能够通过简单的计算操作来生成某些属性值,例如在现代 CSS 解决方案:CSS 数学函数一文中,我们详细介绍了 calc():用于计算任意长度、百分比或数值型数据,并将其作为 CSS 属性值。 min() 和 max():用于比较一组数值中的最大值或最小

    2024年02月10日
    浏览(44)
  • 现代 CSS 解决方案:文字颜色自动适配背景色!

    在 23 年的 CSS 新特性中,有一个非常重要的功能更新 -- 相对颜色 。 简单而言,相对颜色的功能,让我们在 CSS 中,对颜色有了更为强大的掌控能力。 其核心功能就是,让我们 能够基于一个现有颜色 A,通过一定的转换规则,快速生成我们想要的颜色 B 。 其功能能够涵盖:

    2024年02月03日
    浏览(53)
  • 现代 CSS 解决方案:accent-color 强调色

    accent-color 是从 Chrome 93 开始被得到支持的一个不算太新属性。之前一直没有好好介绍一下这个属性。直到最近在给一些系统整体切换主题色的时候,更深入的了解了一下这个属性。 简单而言,CSS accent-color 支持使用几行简单的 CSS 为 表单元素 着色,是的,只需几行代码就可以

    2024年03月09日
    浏览(38)
  • Unity中关于ScrollRect组件完整解决方案(ScrollRect中元素自动排版+ScrollRect中元素自动定位到Viewport可见范围内)

    1、首先要往我们的unity项目中导入两个脚本文件,脚本文件名称分别是UIScrollEventListener和CZScrollRect,这两个脚本文件代码如下所示。 1-1、介绍UIScrollEventListener脚本写法。 1-2、介绍CZScrollRect脚本写法。

    2024年02月20日
    浏览(45)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包