margin负值实现细边框

我们先准备五个div盒子，并设置好浮动和2px的实线黑色边框，看看效果

中间的边框线挨在了一起致使边框变粗成了4px，这时使用margin负值就可以解决这个问题

 <style>

        * {

            margin: 0;

            padding: 0;

        }

        div {

            float: left;

            width: 150px;

            height: 300px;

            border: #000 solid 2px;

        }

        .fu {

            margin-left: -2px;

        }

    </style>

</head>

<body>

    <div>1</div>

    <div class="fu">2</div>

    <div class="fu">3</div>

    <div class="fu">4</div>

    <div class="fu">5</div>

</body>

我们给后面四个盒子指定左边框为-2px，这时后面的盒子对的左边框就会覆盖到前一个盒子的右边框上，从而实现边框只有2px，效果图如下：

你学会了吗？我是正在学习前端的小白@Ben-studying,欢迎大家评论区留言交流呦！

CSS中margin负值巧布局的更多相关文章

  1. CSS中margin边界叠加问题及解决方案(转)

    边界叠加简介 边界叠加是一个相当简单的概念.但是,在实践中对网页进行布局时,它会造成许多混淆.简单地说,当两个垂直边界相遇时,它们将形成一个边界.这个边界的高度等于两个发生叠加的边界的高度中的较大者. ...

  2. CSS中margin和padding的区别

    在CSS中margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离.在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离. 下面讲解 padding和ma ...

  3. CSS中margin属性

    css中margin块级元素的垂直相邻外边距会合并,比如 方框的上下外边距并不是2px,而是合并为1px了. 设置float属性就可以避免这种同级元素边距合并

  4. 使用CSS中margin和padding的基础和注意事项

    在CSS中,margin和padding是页面布局的主要属性,如何灵活有效使用对于基于DIV+CSS设计网页方法是非常重要的,笔者经常使用且经常误使用,所以根据经验和网上资料整理出切合自己的内容,以备 ...

  5. CSS中margin边界叠加问题及解决方案

    你对CSS的margin边界叠加的概念是否了解,这里和大家分享一下,当一个元素出现在另一个元素上面时,第一个元素的底边界与第二个元素的顶边界发生叠加. CSS的margin边界叠加深度剖析 边界叠加简 ...

  6. css中margin:0 auto没作用

    很多初学制作网页的朋友,可能会遇到的一个常见问题,就是在CSS中加了margin:0 auto;却没有效果,不能居中的问题!margin:0 auto;的意思就是:上下边界为0,左右根据宽度自适应!其 ...

  7. CSS中margin与padding的区别

    CSS边距属性定义元素周围的空间.通过使用单独的属性,可以对上.右.下.左的外边距进行设置.也可以使用简写的外边距属性同时改变所有的外边距.——W3School 边界(margin):元素周围生成额外 ...

  8. css中margin重叠和一些相关概念（包含块containing block、块级格式化上下文BFC、不可替换元素 non-replaced element、匿名盒Anonymous boxes ）

    平时在工作中,总是有一些元素之间的边距与设定的边距好像不一致的情况,一直没明白为什么,最近仔细研究了一下,发现里面有学问:垂直元素之间的margin有有互相重叠的情况:新建一个BFC后,会阻止元素与外 ...

  9. css中margin为负数的深入研究

    注:以下实验的元素均为块级元素,inline-block和inline本身对margin某些方向上都是无效的,所以这里不予讨论. margin-left或者margin-right为负数 当块元素wi ...

随机推荐

  1. Python3实现短信轰炸机

    短信轰炸机的基本原理:利用某些限制不严格的网站短信注册接口,用Python模拟请求,传入被炸人手机号码,实现轰炸 实现方式:利用requests模块.time模块.完成请求模拟 模块安装: 在终端窗口 ...

  2. 001-Java学习前基础

    目录 前言 一.Java语言特性(简单概述) 二.JDK.JRE.JVM三者关系 三.java文件的加载与执行 前言 初次在博客园写博客,想通过这种方式把自己学过的东西梳理一遍,加深自己的记忆,笔记中 ...

  3. 清明节特辑 |记忆存储、声音还原、性格模仿……AI可以让人类永生吗？

    摘要:如果能用AI "复活"逝去的亲人 你愿意吗? 清明节,很少有人会去特地想这样一个问题:我们为什么要给过世的人修墓,然后每年固定的时间去扫墓?当农耕文化的色彩褪去,清明节的祭祀 ...

  4. [树形DP]战略游戏

    战 略 游 戏 战略游戏 战略游戏 题目描述 Bob喜欢玩电脑游戏,特别是战略游戏.但是他经常无法找到快速玩过游戏的办法.现在他有个问题.他要建立一个古城堡,城堡中的路形成一棵树.他要在这棵树的结点上 ...

  5. day-05-字典

    字典的初识 why: 列表可以存储大量的数据,但数据之间的关联性不强 列表的查询速度比较慢.数量越大查询越慢 what:容器型数据类型:dict how: 数据类型的分类(可变与不可变) 可变(不可哈 ...

  6. 封装一个处理 react 异常的最简 ErrorBoundary 组件 🎅

    前言 从 React 16 开始,引入了 Error Boundaries 概念,它可以捕获它的子组件中产生的错误,记录错误日志,并展示降级内容,具体 官网地址. 错误边界避免一个组件错误导致整个页面 ...

  7. Spring 学习笔记（三）：Spring Bean

    1 Bean配置 Spring可以看做是一个管理Bean的工厂,开发者需要将Bean配置在XML或者Properties配置文件中.实际开发中常使用XML的格式,其中<bean>中的属性或 ...

  8. 《C标准库》学习笔记整理

    简介 <C标准库>书中对 C 标准库中的 15 个头文件的内容进行了详细的介绍,包括各头文件设计的背景知识.头文件中的内容.头文件中定义的函数和变量的使用.实现.测试等. 我学习此书的目的 ...

  9. centos7 中静态IP地址的配置

    虚拟机中也可以像Windows系统那样从浏览器上下载文件,但在这之前,要必须保证虚拟机网络服务通畅.而配置网络服务其实就是在编辑网卡配置文件,具体步骤如下: 网卡配置文件位置:/etc/sysconf ...

  10. ASP.Net 管道模型 VS Asp.Net Core 管道 总结

    1 管道模型  1 Asp.Net Web Form管道 请求进入Asp.Net工作进程后,由进程创建HttpWorkRequest对象,封装此次请求有关的所有信息,然后进入HttpRuntime类进 ...