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. java例题_46 两个字符串拼接问题！

    1 /*46 [程序 46 字符串连接] 2 题目:两个字符串连接程序,将两个字符串拼接在一起 3 */ 4 5 /*分析 6 * 两个字符串的拼接方法 7 * concat方式 8 * 当两个量都为 ...

  2. 运维干货｜交换机不同VLAN之间及相同VLAN之内进行隔离

    文中所展示的内容为VLAN与VLAN之间分隔关系,如相同VLAN用户之间进行分隔,相同VLAN一组用户之间允许通信并与其它一组用户之间进行分隔,属于VLAN的高级应用范畴.本文来源于智象运维某大神的日 ...

  3. Python | random 模块：Python 中如何生成随机数和随机抽样？

    random 是平时开发过程中常用的一个模块,该模块实现了各种分布的伪随机数生成器,以及和随机数相关的各种实用函数.基本函数 random() 在区间 [0.0, 1.0) 内均匀生成随机浮点数,是模 ...

  4. " "( 双引号) 与 ' '( 单引号) 差在哪？-- Shell十三问<第四问>

    " "( 双引号) 与 ' '( 单引号) 差在哪?-- Shell十三问<第四问> 经过前面两章的学习,应该很清楚当你在 shell prompt 后面敲打键盘.直到 ...

  5. [GDKOI2021] 普及组 Day3 总结 && 题解

    [ G D K O I 2021 ] 普 及 组 D a y 3 总 结 时间安排和昨天的GDKOI2021 Day2一样. 早上四个小时的快乐码题时间,然鹅我打了半小时的表 然后就是下午的题目讲解和 ...

  6. cordova app打包apk签名

    首先执行:ionic cordova build android --prod --release,执行完会在以下目录生成apk文件( --prod 用以压缩) 然后使用keytool生成keysto ...

  7. 如何在IDEA中进行时序图分析

    方法一: 使用插件 SequenceDiagram (系统自动生成) 使用方法: 下载插件,我们可以在 Plugins 中找到 选中线程方法名,然后右键就可以创建此方法的时序图了 参数设置 生成效果以 ...

  8. 目标检测性能评价——关于mAP计算的思考

    1. 基本要求 从直观理解,一个目标检测网络性能好,主要有以下表现: 把画面中的目标都检测到--漏检少 背景不被检测为目标--误检少 目标类别符合实际--分类准 目标框与物体的边缘贴合度高-- 定位准 ...

  9. Hadoop完整搭建过程（二）：伪分布模式

    1 伪分布模式 伪分布模式是运行在单个节点以及多个Java进程上的模式.相比起本地模式,需要进行更多配置文件的设置以及ssh.YARN相关设置. 2 Hadoop配置文件 修改Hadoop安装目录下的 ...

  10. vim与系统剪贴版的交互

    1 概述 vim中的复制,删除,替换(d,r,s,x,y等)的内容都会被保存到默认的未命名的寄存器中,之后可以通过p进行粘贴,但是,这个寄存器不是系统的剪贴版,很多时候需要vim与系统剪贴版的交互,那 ...