CSS中margin负值巧布局
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负值巧布局的更多相关文章
- CSS中margin边界叠加问题及解决方案(转)
边界叠加简介 边界叠加是一个相当简单的概念.但是,在实践中对网页进行布局时,它会造成许多混淆.简单地说,当两个垂直边界相遇时,它们将形成一个边界.这个边界的高度等于两个发生叠加的边界的高度中的较大者. ...
- CSS中margin和padding的区别
在CSS中margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离.在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离. 下面讲解 padding和ma ...
- CSS中margin属性
css中margin块级元素的垂直相邻外边距会合并,比如 方框的上下外边距并不是2px,而是合并为1px了. 设置float属性就可以避免这种同级元素边距合并
- 使用CSS中margin和padding的基础和注意事项
在CSS中,margin和padding是页面布局的主要属性,如何灵活有效使用对于基于DIV+CSS设计网页方法是非常重要的,笔者经常使用且经常误使用,所以根据经验和网上资料整理出切合自己的内容,以备 ...
- CSS中margin边界叠加问题及解决方案
你对CSS的margin边界叠加的概念是否了解,这里和大家分享一下,当一个元素出现在另一个元素上面时,第一个元素的底边界与第二个元素的顶边界发生叠加. CSS的margin边界叠加深度剖析 边界叠加简 ...
- css中margin:0 auto没作用
很多初学制作网页的朋友,可能会遇到的一个常见问题,就是在CSS中加了margin:0 auto;却没有效果,不能居中的问题!margin:0 auto;的意思就是:上下边界为0,左右根据宽度自适应!其 ...
- CSS中margin与padding的区别
CSS边距属性定义元素周围的空间.通过使用单独的属性,可以对上.右.下.左的外边距进行设置.也可以使用简写的外边距属性同时改变所有的外边距.——W3School 边界(margin):元素周围生成额外 ...
- css中margin重叠和一些相关概念（包含块containing block、块级格式化上下文BFC、不可替换元素 non-replaced element、匿名盒Anonymous boxes ）
平时在工作中,总是有一些元素之间的边距与设定的边距好像不一致的情况,一直没明白为什么,最近仔细研究了一下,发现里面有学问:垂直元素之间的margin有有互相重叠的情况:新建一个BFC后,会阻止元素与外 ...
- css中margin为负数的深入研究
注:以下实验的元素均为块级元素,inline-block和inline本身对margin某些方向上都是无效的,所以这里不予讨论. margin-left或者margin-right为负数 当块元素wi ...
随机推荐
- 4、Spring教程之Spring配置
别名 alias 设置别名 , 为bean设置别名 , 可以设置多个别名 <!--设置别名:在获取Bean的时候可以使用别名获取--> <alias name="userT ...
- mybatis-plus的Could not set property 'updateDate' of 'class com.example.pojo.User' with value 'Fri Jul 24 10:29:39 CST 2020' Cause: java.lang.IllegalArgumentException: argument type mismatch解决方案
按照官网在写mybatis-plus的自动填充功能一直报错,发现官网的解说不全,数据库是datetime类型,java程序又是date,类型不匹配 org.mybatis.spring.MyBatis ...
- ls:未找到命令
解决,别问为什么. 执行 export PATH=/bin:/usr/bin:$PATH
- Elasticsearch中最重要的文档CRUD要牢记
Elasticsearch文档CRUD要牢记 转载参考:https://juejin.im/post/5ddbf298e51d4523053c42e7 在Elasticsearch中,文档(docum ...
- 学一手，知乎大V(轮子哥)当年靠它进微软亚洲研究院
前言 vczh本名陈梓瀚,不过大家更愿意叫他「轮子哥」,毕业于华南理工大学软件学院.vczh大学时代就在微软实习,毕业后即加入微软.开始时是在微软上海,后来进入北京的微软亚洲研究院.现已移居美国西雅图 ...
- Linux（六）：系统运维常用命令
实际的生产环境下,不论是研发还是运维,或多或少的得面对在linux上定位问题这个关卡,这里介绍一下linux环境下一些状态查看常用的命令. 系统资源监控 总体资源占用情况查看 命令:top 像wind ...
- Dynamics CRM产生公共签名，避免每次插件换环境重新输入签名密钥账号密码
在Dynamcs CRM项目维护交接过程中,我们经常会使用其他合作者的插件代码.但是每次拿到别人代码编译的时候插件密钥都要重新输入密钥的账号密码.而且如果密钥都是的话比较麻烦.所以这里就针对这个问题做 ...
- RedHat 7.6 安装 Mysql 8.0.17
# 查看是否安装mysql rpm -qa | grep -i mysql # 如果有,需要卸载旧版本Mysql及相关依赖包 rpm -e MySQL-client-*** # 查看开机启动服务列表状 ...
- Day14_83_反射机制获取某个特定属性的各部分
反射机制获取某个特定属性的各部分 * 通过属性名(变量名)来获取一个属性整体 例如: Field userNoField=c.getDeclaredField("userNo"); ...
- Flowable中的Service
前言 在学习博客[(https://blog.csdn.net/puhaiyang/article/details/79845248)]时,注意到Flowable中的各种Service(如下),进而在 ...