附录6-消除临近盒子的边框

最新推荐文章于 2023-03-16 15:09:48 发布
最新推荐文章于 2023-03-16 15:09:48 发布
阅读量1k 收藏
点赞数
分类专栏： CSS3笔记 文章标签： css3 css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/potato123232/article/details/123573958
版权

我们现在有三个盒子，每个盒子都有1像素的边框

我们发现两个相邻的盒子边框挤在一起了

我们现在不想让他挤在一起，那么我们现在将margin-left设置为-1px

发现挤在一起的效果就消失了

这个就相当于右侧的盒子压住了左边的盒子，左边盒子的右边框被压在了底下

动作顺序是先浮动，浮动就靠上了第一个盒子，之后再移动-1像素，就压上了

这样就会出现一个问题，我现在想让鼠标经过的盒子边框变成蓝色

发现最右侧的盒子没有问题，但左边的两个就不能正常显示了

这个时候我们要在hover中设置相对定位，因为相对定位的层级要高于普通的盒子，高于普通盒子的时候它自然会全部显现出来

那么如果你的盒子必须要设置为定位模式，那么你可以通过设置z-index把该盒子提到最上方

发现同样可以达到上面的效果

Suyuoa
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
html如何隐藏盒子的边框线,HTML盒子模型+边框
weixin_29670781的博客
06-04 2678
盒子模型(框模型)一个盒子分为四部分1.内容区(content)2.内边距(padding)3.边框(border)4.外边距 (margin)盒子的大小是由(内容区、内边距、边框)决定.box{width:100px;height:100px;background-color:#bfa;border-width:10px;border-color:red;border-style:solid;}...
2021-10-07
Mars936的博客
10-07 2694
关于VMD绘制盒子边框并更改颜色和粗细的问题 命令： pbc box -color -width 说明： 2.1 vmd默认，即输入pbc box后： 2.2 自定义，如边框为黄色，边框为5：pbc box -color yellow -width 5 Make a Little Progress Every Day！ ...
【CSS】盒子边框 ② ( 盒子边框单独指定语法 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
03-16 1797
一、边框单独指定语法 二、代码示例 1、边框单独指定代码示例 2、设置表单边框代码示例
鼠标悬停 边框会撑大盒子
X-77
07-30 669
鼠标悬停添加border会撑大盒子
多个相邻的盒子外边框合并的问题
Blooming_x的博客
06-15 1082
1.通过设置margin-left的值来实现
CSS浮动遇到盒子被挤开问题
weixin_43779803的博客
07-17 2525
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .c{width: 500px;height: 500px;border: 1px solid;} .a{width: 200px;height: 200px;background-color: #f00;} .b{width: 300px.
UML语义附录M2-UML元元模型
03-05
UML语义附录M2-UML元元模型　1.0版1997年1月13日　2800SanTomasExpresswaySantaClara,CA95051-0951http://www.rational.com　　　版权所有1997瑞理软件（RationalSoftware）公司、MCIsystemhouse公司以及Unisys公司...
莱茵认证-IEC-60730附录H-软件功能评估-文档输出模板
09-20
莱茵认证-IEC-60730附录H-软件功能评估-文档输出模板，软件在功能安全设计的注意事项，认证测试要求的相关文档输出要求。
附录Q-6 采购竞标邀请书.doc
最新发布
10-24
IT项目管理文档模板
盒子边框
qq_41646730的博客
07-08 612
&lt;body&gt; &lt;div class="q1"&gt;&lt;/div&gt; &lt;div class="q2"&gt;&lt;/div&gt;&lt;body&gt;&lt;style&gt; .q1{ width: 100px; height: 100px; border-co
CSS的margin负值运用：压住盒子的相邻框，实现淘宝商品页面的边框操作
qq_44156869的博客
02-21 354
margin负值之美 负边距+定位：水平垂直居中。 一个绝对定位的盒子，利用父级盒子的 50%，然后往左（上）走自己宽度的一半，可以实现盒子水平垂直居中。 压住盒子的相邻框 如淘宝的商品页面： 案例： <style> div { /*浮动的盒子是紧贴在一起的*/ float: left; width: 200px; height: 300px; bor
css如何去掉重叠部分的边框？
weixin_43294092的博客
07-02 1672
css如何去掉重叠部分的边框？ 在前端开发中，边框border属性是经常会用到的一个属性，它可以给元素添加边框；但两个相邻的元素在一起同时添加了边框，就会出现一个问题，边框会重叠在一起（如下图），那么如何去掉重叠部分的边框？ 本篇文章就给大家介绍css解决边框重叠，即css去掉重叠边框的方法，让相邻的边框之间可以是单线的方式显示。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。 边框重叠可以分为两种情况，分别为： 1、div，ul等元素盒子设置边框后的重叠问题 2、table表格设置边框后
css textbox 边框去掉_前端面试系列 -- CSS
weixin_39790504的博客
11-20 274
前端基础面试 CSS 部分，不定期更新 Catagory盒模型flex: 1css 单位BFC相邻的两个 inline-block 节点为什么会出现间隔，该如何解决写一个 meta 标签，宽度等于设备宽度，不允许用户缩放CSS 实现宽度自适应 100%，宽高 16:9 的比例的矩形移动端布局画三角形1px 像素问题1-盒模型W3C 标准盒模型：属性width，height只包含内容content...
后端返回来数据，如何让最后一个盒子没有下边框？
ni15534789894的博客
05-11 421
v-for="(item,index) in newmyTask :class="index===newmyTask.length-1&&'noline'" .noline{ border-bottom:none; } newmyTask是后端返回来的数据数组，noline表示样式问题。
display: contents——可以去掉盒子的边框
QUX轻博客
06-16 888
display: contents元素本身不产生任何边界框，而元素的子元素与伪元素仍然生成边界框，元素文字照常显示(W3C解释)。 理解：当前div 不产生...
零基础学习CSS(13)——边框设置
qq_43650934的博客
10-18 394
官方资料 鱼C课程案例库：https://ilovefishc.com/html5/ html5速查手册：https://man.ilovefishc.com/html5/ css速查手册：https://man.ilovefishc.com/css3/ 学习正文 设置边框样式： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>边框的各种样式</title
4.表单文本控件案例（去掉边框和去掉轮廓线）
neilro的博客
01-16 7598
去掉边框： border: 0 none;       /*去掉边框*/ 去掉轮廓线： outline-style: none;  /*去掉轮廓线*/ 什么是轮廓线？ 没有去掉轮廓线的文本控件：即使去掉了边框，选择输入框以后还是会出现方框（即轮廓线） 去掉边框和轮廓线后的文本框： 去掉边框和轮廓线还有下边框虚化的文本框： 代码： .uemai
去掉右边边框和下面边框
Angle41的专栏
04-21 3332
css中背景图片和盒子之间有一条缝隙
05-31
在CSS中，如果背景图片与盒子之间出现了一条缝隙，这通常是由于盒子的边框(border)或内边距(padding)导致的。这时可以尝试以下方法解决： 1. 去除盒子的边框(border)或内边距(padding)，确保盒子没有任何间隙。 ```css .box { border: none; padding: 0; } ``` 2. 如果必须保留盒子的边框(border)或内边距(padding)，可以尝试为盒子添加负的边框(border)或内边距(padding)，以抵消原有的边框(border)或内边距(padding)。 ```css .box { border: 10px solid white; padding: 20px; margin: -10px -20px; } ``` 3. 为背景图片添加一些额外的空间，使其超出盒子的边界，以填充可能存在的间隙。 ```css .box { background-image: url("image.jpg"); background-size: cover; padding: 20px; background-clip: content-box; } ``` 以上方法可以根据具体情况进行选择和调整，以解决背景图片和盒子之间的间隙问题。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Suyuoa

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值