css实现不占大小的边框

最新推荐文章于 2024-05-29 10:53:24 发布
最新推荐文章于 2024-05-29 10:53:24 发布
阅读量5.1k 收藏 1
点赞数 1
分类专栏： css 文章标签： css 边框 不占大小
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SunShinessx/article/details/90269684
版权

问题场景：点击item加边框，加打钩。

出现的问题：点击之前在同一行，点击后变成两行。

这里如果用border来实现边框，最后还是会出现挤下来的情况，因为border会占大小，而且这里不能用box-sizing，因为item的宽度

不固定。所以用box-shadow: 0 0 0 4rpx #03A9F4 来实现。不占大小的边框。

SunShinessx
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS 边框样式
天空之外
09-24 2761
本节我们来学习边框样式，主要包括如何设置边框的宽度、边框的颜色、边框的样式等。当我们给某个元素设置边框时，可以分为上下左右四个边框，既可以同时设置四个边框的样式，也可以分开设置四个边框的样式。 关于边框样式的四个属性： 属性 描述 border-width 设置边框的宽度 border-style 设置边框的样式 border-color 设置边框的颜色 border 在一个声明中设置所有的边框属性 border-width border-width 属性用于设置边框的宽度，
css实现4个角有边框
Y_G_G的博客
10-14 3045
// html react JSX <div className={styles.intro} style={{background: 'rgba(255,255,255,'+ opacity+')'}}> <span className={styles.lpArrow}></span> <span cl...
CSS 设置 border 边框不占元素宽高
热门推荐
zzzzls 的博客
03-16 2万+
box-sizing 用于设置 html 标签的宽度和高度是否包含 padding 和 border 的属性
【css】border边框影响布局解决方案
富朝阳的博客
05-16 1301
最近在写项目的时候遇到这样一个问题，我给元素添加动态border的时候，随着border的生效，会影响border之外的布局，border边框影响布局之问题的发生，到底需要如何解决？下面我提供2种方案供大家参考：
css让padding、border不占据宽度
最新发布
于忠会的博客
05-29 618
有时我们不希望 padding 影响到 div 的实际宽度。以前只能手动计算 width，从 CSS3 开始可以通过 box-sizing 来做到这一点。则包含 padding，div 的实际宽度为 120px。CSS3 新增了 box-sizing 属性。则 div 的实际宽度为 120px。以前，如果指定 div 的宽度为。
CSS外边距重叠和高度坍塌完美解决
CamphorBlossom的博客
02-17 297
使用下面的clearfix类，问题迎刃而解了。 .clearfix::before, .clearfix::after{ content: ''; display: table; clear: both; } 这是两种问题的综合解决方案： 1. 高度坍塌（引入.box类即可） .box::after{ content: '';
使用css解决：什么情况下设置border不会增加盒子的宽高
m0_61973028的博客
02-16 2242
如果给高10px，宽10px的盒子 盒子设置border-sizing：border-box；后 再添加一个borer：1px solid black；盒子整体宽高仍旧是10px，不会变成12px（因为盒子有上下两条边，左右两条边，所以如果没有设置border-sizing：border-box；盒子加一个borer：1px solid black；边会变成宽高12px。 ...
使用html和css实现康奈尔笔记(5R笔记)模板
09-24
接下来，我们需要在A4纸大小的容器内创建两个主要部分：左侧的"提示"区域（约占29%）和右侧的"笔记"区域（约占68%）。这两个部分可以通过浮动的`<div>`实现，同时使用`border-right`来区分它们。这里我们为左侧的`le...
CSS3笔记1
08-03
CSS3中，我们可以用`width`和`height`属性来定义元素的尺寸，但这些通常不包括内边距(`padding`)和边框(`border`)。若想包含这些部分，可以使用`box-sizing`属性： ```css element { box-sizing: border-box; }...
css3 input文本框动画特效
07-24
综上所述，"css3 input文本框动画特效"是一个综合运用了CSS3新特性的实践案例，它包括但不限于边框动画、背景变化、伪类应用、验证反馈等多个方面。通过巧妙地组合这些技术，设计师可以打造出既美观又实用的输入框...
css盒模型.docx
02-24
margin 是控制同辈元素之间的位置关系的，margin 是实现在元素边框外围，不会撑大元素的大小。margin 的使用方法有： * 用于控制同辈元素之间的位置关系。 * 实现元素水平居中的方法：margin: 0 auto;margin-left:...
CSS+HTML5手册
09-07
**CSS（层叠样式表）**是网页设计中用于描述网页外观和布局的语言，它允许开发者控制网页元素的样式，包括字体、颜色、大小、布局和响应式设计等。CSS与HTML结合使用，能实现丰富的视觉效果和动态交互。本手册涵盖了...
border 不占位_如何让div的border不占宽度
weixin_39625258的博客
12-20 1856
展开全部让div的border不占宽度按以下步骤进行：1，创建一个新的html文件。2，介绍jquery.min.js文件。3，创建HTML内容。4，预62616964757a686964616fe4b893e5b19e31333431366366览效果如图所示。5，使用jquery创建一个click事件。6，单击时弹出div的宽度。7，单击弹出效果所示的预览效果允许div的边框不占据宽度。扩展资...
图片添加border 不占用图片的大小
weixin_30696427的博客
12-13 297
因为设计稿中的分割线大多分为两种情况：1、在图片右侧；2、在图片右侧+下方。 那么使用伪类before和after以及绝对定位很容易在不改变原布局的情况使图片按照设计稿输出和保留分割线。 例div.img-wrap > img的结构，如下:1、可以先给包裹图片的wrap设好高度和宽度，positon设为relative；2、图片的大小不需要改变，为以防万一也可以把宽高设为100%，当调整...
元素边框不占高度
weixin_45924425的博客
02-10 188
当我们鼠标悬停的时候，选中的元素宽高就根据 border 的宽度进行增大，造成自适应的元素进行相对应的调整，就会发现元素在跳动，影响使用。
让padding、border等不占据宽度
dingchunyi2321的博客
05-25 493
box-sizing:border-box; -moz-box-sizing:border-box; /* Firefox */ -webkit-box-sizing:border-box; /* Safari */ 转载于:https://www.cnblogs.com/terminator404/p/5527820.html
css border边框不占外边的边距
小武的博客
04-11 1670
box-sizing:border-box;
CSS 盒子模型详解 IE盒子模型实际应用——把Border设置成不改变宽度高度的内边框
JIZQAQ学习&踩坑笔记本
05-24 900
一.实际应用 项目里面遇到一个问题，就是选中某个颜色之后，需要显示一圈颜色更深的边框表示选中状态。但是加上之后，明显框框变大了，一点也不美观。于是想找找能不能把border改成内边框的方法。 在css中加了一行 box-sizing: border-box; 完美解决问题 这里涉及到了一个我以前一直没有深入了解过的知识，就是CSS的盒模型。 二.盒模型 先来简单说一下，什么是盒模型。 1.盒模型基本元素 盒模型从外到里由以下几个元素组成： 外边框（margin） 边框（b..
css 布局是如何实现的
09-23
5. 网格布局（Grid）：CSS Grid是CSS3中提供的一种二维网格布局系统，通过将容器划分为行和列，可以实现灵活的网格布局，并控制项目在网格中的位置和大小。 6. 响应式布局（Responsive Layout）：通过使用CSS媒体...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值