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. 庐山真面目之十四微服务架构的Docker虚拟技术深入探究

    庐山真面目之十四微服务架构的Docker虚拟技术深入探究 一.我的开场白 曾几何时,分布式的发展也影响了后来的微服务架构的实现方式.到了现在,只要涉及到互联网技术领域,就会设计一个概念,那就是微服务. ...

  2. Android Studio 如何运行单个activity

    •写在前面 调试界面运行单个 Activity 可节省编译整个项目的时间提高效率: 本着提高效率的角度,特地上网百度相关知识: •解决方法 首先,在 AndroidManifest.xml 文件中,找 ...

  3. 前端学习 node 快速入门 系列 —— 报名系统 - [express]

    其他章节请看: 前端学习 node 快速入门 系列 报名系统 - [express] 最简单的报名系统: 只有两个页面 人员信息列表页:展示已报名的人员信息列表.里面有一个报名按钮,点击按钮则会跳转到 ...

  4. CodeForces571A. Lengthening Sticks(组合数学-容斥）

    题目大意: a,b,c三根木棍可以增加三个不同的数字,aa,bb,cc,且aa+bb+cc<=L,问能构成三角形的木棒有多少种方案 题目思路: 如果我们直接考虑把L分配给aa,bb,cc好像不好 ...

  5. python基础（十二）：if分支表达式

    有时候,我们需要依照某种条件,再决定要不要做某个操作.在Python中,if语句能够帮助我们检查程序的当前状态,告诉计算机接下来该做什么. 条件表达式 每个if后面都跟着一个True或False的表达 ...

  6. oo第四单元暨课程总结

    第四单元架构设计总结 第一次作业 单独写了MyUmlClass.MyUmlInterface.MyUmlOperation三个类对应UML中相应元素,在UML图中这几个元素包含一些下级元素,如Clas ...

  7. 铁人三项(第五赛区)_2018_seven

    铁人三项(第五赛区)_2018_seven 先来看看保护 保护全开,IDA分析 首先申请了mmap两个随机地址的空间,一个为rwx,一个为rw 读入的都shellcode长度小于等于7,且这7个字符不 ...

  8. kubernets-java 动态修改deployment 的replicas

    /** * Scale up/down the number of pod in Deployment * * @param deploymentName * @param numberOfRepli ...

  9. 在Linux CentOS上搭建Jmeter压测环境

    本文的主要内容是介绍如何在Linux CentOS 服务器上面搭建Jmeter的压测环境整个详细的流程,来满足我们日常工作中对于压力测试环境搭建.压力测试执行过程的需求. 一.首先我们要准备四个东西, ...

  10. mysql架构与存储引擎 (Myisam与Innodb)

    mysql抽象架构:可以分为SQL Layer和Storage Engine Layer mysql的engine层是基于表的,不是基于库的,创建表的语句可以指定engine Mysql的架构 Mys ...