margin负值的巧妙应用解决边框叠加变粗的问题？（55）

最新推荐文章于 2022-08-10 21:16:50 发布
最新推荐文章于 2022-08-10 21:16:50 发布
阅读量402 收藏
点赞数 1
分类专栏： css3基础100问 文章标签： html5 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45147894/article/details/106852468
版权

 先看一下下面这个例子：

 都加上边框，两个盒子之间有两个边框就会造成加粗的问题。

 加入margin-left :-1;

加入鼠标经过边框变色的效果： 

可是前几个效果不是的 

加入定位就可以了。 

如果本来有定位，那就加入层级就可以了呀！ 

㼛思雨
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
margin外边距负值解决border边框重叠加粗问题
王国任的博客
05-31 1477
当我们使用边框的时候，如果盒子相邻在一起，就会造成边框重叠加粗的问题，原本的1px的边框，重叠就会变成2px，造成加粗的效果。 边框重叠实例 下面是多个盒子边框重叠的实例。 可以看到右边框与左边框重叠，下边框与上边框重叠，造成加粗。 margin负值实例代码 <style> div { width: 200px; height: 300px; border: 1px solid #ccc; } </style> &lt
1、margin为负数会发生什么
abuanden的博客
02-21 315
width为auto，或不存在width属性。left和right使宽度增加，top向上位移，bottom减少css可读取高度 对文档流：使用负margin上移一个元素，所有跟随的元素都会被上移。不破坏文档流 对浮动元素：负margin会改变浮动元素的显示位置，即使我的元素写在DOM的后面，我也能让它显示在最前面。圣杯布局、双飞翼布局啊什么的，都是利用这个原理实现的。 对绝对定位的影响（absolute):负margin会基于其绝对定位坐标再偏移 常见布局应用 左右固定，中间自适应（..
布局技巧-margin负值的巧妙运用【解决ul中多个li边框重叠问题】
weixin_43837268的博客
10-10 509
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>m.
css布局技巧-margin负值巧妙运用
阿牛的博客
02-16 1028
css布局技巧-margin负值巧妙运用
CSS：margin负值，解决边框线重合后变粗的问题
weixin_46682277的博客
12-20 1410
当在页面中创建多个盒子后，然后给每个盒子加上边框border，就会出现边框线重合后线变粗的问题，和表格table的边框线问题一样，但不能用解决table表格边框线的方法来解决盒子边框线的问题。 这时候其实只要一句代码就可以解决这个问题，给盒子加一个：margin-left：-1px；这样可以压住盒子相邻的边框，就不会出现重合变粗的问题了。 .nav li { float: left; width: 150px; height: 100px; margin-left: -1px;
display：table，布局自动分宽度
li3196672779的博客
06-25 2517
Document * { list-style: none; } ul { width: 300px; display: table; } ul li { display: ta
CSS中margin边界叠加问题及解决方案
01-19
CSS的margin边界叠加深度剖析 边界叠加简介 边界叠加是一个相当简单的概念。但是，在实践中对网页进行布局时，它会造成许多混淆。简单地说，当两个垂直边界相遇时，它们将形成一个边界。这个边界的高度等于两个发生...
margin 负值引起的层级（z-index）问题
09-27
主要为大家介绍margin 负值引起的层级（z-index）问题的解决方法，需要的朋友可以参考下
如何解决外边距margin叠加的问题探讨
09-22
两个或多个毗邻的普通流中的块元素垂直方向上的 margin 会折叠，那么如何使元素上下margin不折叠呢？下面的方法或许对大家有所帮助
简单谈谈margin负值的作用
10-20
在CSS布局中，margin负值是一个非常有用的技巧，它能够帮助开发者解决许多复杂的设计问题，尤其是在需要精细调整元素位置或创建特殊布局时。虽然初学者可能会对负值margin感到困惑，但理解其工作原理和应用场合后，...
2、margin重叠的情况和解决
abuanden的博客
02-25 3754
什么是margin重叠： 两个或多个盒子可能（相邻）也可能（嵌套)的相邻边界(其间没有任何非空内容、补白、边框)重合在一起而形成一个单一边界。 有可能发生在父子元素，也有可能发生在兄弟元素之间 兄弟之间之间：兄弟元素之间是真正的margin重叠。 父子之间：父子之间实质为，当子元素的margin大于父元素时，会超过父元素的范围，显示出来就是那个大显哪个 所以： 实际上当子元素margin大于父元素margin的时候，其实是挤开了父元素的位置，导致看起来是重叠了。 发生在（垂直
margin-left是什么意思
热门推荐
lin123_00的博客
04-27 2万+
margin属性是用于设置元素的外边距，所以margin-left 属性就是用于设置元素的左外边距。下面我们就来看看margin-left的详细内容。 margin-left属性和margin属性一样所有的主流浏览器都支持这个属性 margin-left属性的属性值可以使用负值，下面我们来看margin-left有哪些可用的值 auto：浏览器设置的左外边距。 length：定义固定的左外...
CSS3基础：布局技巧margin=-1 & 非等腰直角三角形
qq_54517101的博客
08-10 367
这是因为，由于margin对于-1的原因，每个方框的右边界都被右边的盒子盖住了，解决方法有两种：如果盒子没有增加定位：增加相对定位可以盖住下面的元素如果盒子增加的定位：增加定位的层级。...
margin纵向重叠和负值问题
aliven1的博客
09-23 421
<head> <style> p{ font-size: 16px; line-height: 1; margin-top: 10px; margin-bottom:15px; } </style> </head> <body> <p>A</P> <p></p> <p></p> <p></p> &l.
css之margin使用技巧：元素水平居中，边框合并，top塌陷
weixin_49855251的博客
01-28 874
盒模型使用技巧及相关问题 margin相关技巧 1、设置元素水平居中： margin:x auto; 2、margin负值让元素位移及边框合并 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .box{ width:200px;
div边框重叠，像素变粗，解决方法
weixin_33859844的博客
10-12 2297
2019独角兽企业重金招聘Python工程师标准>>> ...
html 边框变粗 margin -1px
pan_haufei的博客
11-07 6692
最近刚开始学习web前端，html和css,对于遇到的边框变粗的问题，用margin为负值解决问题发表一些自己的理解 首先我们来看看下面一张图片 list-style: none;                 border:1px solid black;                 width: 200px;                 line-height:
css父子元素边框合并变粗
最新发布
06-07
当父元素和子元素都设置了边框时，可能会出现父子元素边框合并的情况，导致边框变粗。这是由于CSS盒模型的特性所致。 解决这个问题的方法有以下几种： 1. 给父元素添加 `padding` 或 `border`，这样父元素的边框就...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值