position: absolute 和 borde-sizing: border-box 的相互影响

最新推荐文章于 2022-10-20 19:14:49 发布
最新推荐文章于 2022-10-20 19:14:49 发布
阅读量972 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： css crmeb H5页面的实现
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_43844975/article/details/103686250
探讨在使用CSS的绝对定位时，box-sizing:border-box属性为何会失效。文章通过实例说明，当元素脱离正常文档流，原本的宽度限制将不再适用。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

个人理解： box-sizing: border-box虽然是怪异盒子模式，但是是基于 正常文档流 前提的，如果设置了 position： absolute ，即 脱离了 正常的文档流，那么box-sizing: border-box就会 失效

栗子如下：
设置position: absolute后 ，原本的宽度限制box-sizing： border-box失效
在这里插入图片描述

CSS3动画 -- 充电效果
南乡人的博客
12-26 1383
1.0 基础实现版 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-...
利用CSS实现一边固定一边自适应的盒子H5写法
M51921的博客
05-16 4687
使用五种方法来实现DIV的一边固定一边自适应写法，并分析各自特点。第一种（CSS3）：.wrapper1, .wrapper2, .wrapper3, .wrapper4, .wrapper5{ width: 100%; height: 100%; min-height: 300px; line-height: 200px; overflow: h...
position:absolute绝对定位与border-box父元素内边框关系
Hello_MrShu的博客
10-20 1312
absolute定位相对于已定位父级内边框，不管父级的 box-sizing 是 border-box 还是 content-box。虽然子级 position:absolute 脱离了正常的文档流，但是因为父级是 position:relative，所以子级和父级之间的关系还在。而父级盒模型的特点，使子级在定位的时候是以边框内为标准的。至于父级是不是border-box，那与子级定位无关，因为那是父级在整个文档布局时的宽高属性。
box-sizing: border-box；失效问题
前端一线搬运工的博客
07-26 5124
当前标签用了position:relative;且子标签用了position:absolute; 导致盒子失效了
总结一下css中的盒子模型和position定位
weixin_33737134的博客
11-20 374
CSS盒子模型 属性box-sizing可取值 border-box content-box 标准盒子模型（content-box） <!DOCTYPE html> <html> <head> <style type="text/css"> .hello { width: 200px; ...
border-sizing之border-box、content-box
lovelyqianqian的博客
03-22 900
border-sizing是CSS3的属性之一，其属性值为border-box、content-box我们正常理解的盒模型其实是border-sizing的属性值是content-box，即正常盒模型，属性值为border-box的盒模型成为怪异盒模型。她们的区别是什么呢，我们看个正常的例子就一目了然了：&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lan...
CSS高级操作 -盒子模型-浮动-position定位
weixin_57614141的博客
02-24 808
盒子模型 margin 外边距 border 边框 padding 内边距
CSS基础知识
ailsa_csdn的博客
03-23 681
css选择器、盒模型、浮动、定位等基础知识
淘宝小程序实现翻牌器
weixin_44387746的博客
07-02 322
acss .single-demo { margin: 50rpx auto; padding: 30rpx; text-align: center; border: solid 1px #999; } .flip { display: inline-block; position: relative; width: 60rpx; height: 100rpx; line-height: 100rpx; borde
【css】求解！border与position:absolute产生冲突。求解原理及直接解决方法。
rIce_Paul的博客
02-24 808
直接上代码 <html lang="en"> <head> <meta charset="UTF-8"> <title>专项测试</title> <style> #position_test1 {border:1px black solid; width:300px; height:400px; positio...
CSS中display/float/position属性值的相互影响
这个昵称没有被占用吧的博客
02-26 635
CSS中有三个属性与页面布局和box的创建有关：display，position和float，但是如何同时设置了三个属性，则三者之间有优先级关系：
position属性对其他元素位置的影响
tomorrow_shoe的博客
03-19 1570
position对文档流和自己原始位置的影响 默认的static和设定的relative都不会脱离文档流。 static占有文档的位置就是显示的位置，它是默认的属性，即原来位置与现在位置相同。 而relative占有的位置是原来的位置，**现在的位置脱离与文档的关系。**这一点非常关键，即它相对于relative计算之后的位置是脱离文档的，跟visibility设置为hiddn类似，只占原来的位置...
-webkit-box-sizing属性冲突如何解决
qToHoTp的博客
11-03 2632
-webkit-box-sizing属性冲突如何解决 页面用到了框架，而框架里面的样式又影响到了我本来的页面 *, :after, :before { -webkit-box-sizing: border-box; box-sizing: border-box; } 如何能不继承这个父级样式 受到影响的地方： { -webkit-box-sizing: content-box; box-sizing: content-box; } 不过那个 border-box 真的很
csss中box-sizing的问题 元素在另一个元素中框框包含的问题
kbx8916的博客
07-19 348
1.第一种是用calc来解决。 .container { border:10px solid red; width:300px; height:300px; padding:0px; } .box { border:10px solid blue; width:calc(100%-40px); height:calc(300px-40px); margin
position
baneju9157的博客
09-21 393
absolute: 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 fixed: 生成固定定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 re...
关于button按钮设置padding失效的原因
她夏了夏天
12-15 3662
因为button浏览器已经自己设置了box-sizing：border-box，所以无效。另外还有 input[type="submit"], input[type="reset"], input[type="file"] 参考资料：点击打开链接
box-sizing与position绝对定位的相互作用
wang845252276的专栏
11-02 1881
起初没用box-sizing:border-box;时没遇到过此问题,如图: 模拟的下拉列表框居然和文本框不一致,没有滚动条时是相同的. 此情况的触发条件有: IE 浏览器 支持 box-sizing 属性 div 为绝对定位(absolute)
box-sizing:border-box;的一些坑
热门推荐
zhuhaomingoo的博客
01-25 1万+
近日在使用新属性box-sizing:border-box;的时候遇到了一些问题很致命，很费时间，情况就如下面的例子。给全局加了box-sizing:border-box;属性。文字里需要带入彩色的标签，高度是16px,左右padding各5px，line-height自然而然就是16了。但这时就会出现图一的情况文字上下并不是剧中的。从正常逻辑思维出发，我找不到一丝纰漏怎么改也不对怎么给都是剧中不...
如何在*{box-sizing:border-box;}下使需要的div失去这个属性
Callback的博客
07-18 3405
今天根据需求的时候需要将原本在CSS中写了全局属性的*{box-sizing:border-box;}之下的两个div两行显示，而不是并排显示。 简单的描述一下*{box-sizing:border-box;}的作用就是可以使两个div并排显示。 这里再拓展一下 我们熟悉的默认盒模型是content-box，也是标准的w3c标准的盒子，在形成的时候是先做content，然后在外面从里到外添加...
.menu-preview .el-scrollbar[data-v-58274818]{height:100%}.menu-preview .el-scrollbar[data-v-58274818] .scrollbar-wrapper{overflow-x:hidden}.menu-preview .el-menu-horizontal-demo .el-menu-item[data-v-58274818]{cursor:pointer;padding:0;margin:0;color:#fff;white-space:nowrap;display:flex;font-size:16px;border-color:#ffc800 #ffc800 #ffc800 #ffc800;line-height:56px;border-radius:0;background:none;width:120px;justify-content:center;border-width:0;position:relative;border-style:solid;list-style:none;text-align:center;height:56px}.menu-preview .el-menu-horizontal-demo .el-menu-item.is-active[data-v-58274818],.menu-preview .el-menu-horizontal-demo .el-menu-item[data-v-58274818]:hover{cursor:pointer;padding:0;margin:0;color:#fff;white-space:nowrap;font-size:14px;border-color:#ffa100 #ffa100 #ffa100 #ffa100;line-height:56px;border-radius:0;background:#0b4887;width:120px;border-width:0;position:relative;border-style:solid;list-style:none;height:56px}.banner-preview .el-carousel[data-v-58274818] .el-carousel__indicator button{width:0;height:0;display:none}.banner-preview .el-carousel[data-v-58274818] .el-carousel__container .el-carousel__arrow--left{width:36px;font-size:12px;height:36px}.banner-preview .el-carousel[data-v-58274818] .el-carousel__container .el-carousel__arrow--left:hover{background:#2087c3}.banner-preview .el-carousel[data-v-58274818] .el-carousel__container .el-carousel__arrow--right{width:36px;font-size:12px;height:36px}.banner-preview .el-carousel[data-v-58274818] .el-carousel__container .el-carousel__arrow--right:hover{background:#2087c3}.banner-preview .el-carousel[data-v-58274818] .el-carousel__indicators{padding:0;margin:0 0 12px 0;z-index:2;position:absolute;list-style:none}.banner-preview .el-carousel[data-v-58274818] .el-carousel__indicators li{border-radius:50%;padding:0;margin:0 4px;background:#fff;display:inline-block;width:12px;opacity:.4;transition:.3s;height:12px}.banner-preview .el-carousel[data-v-58274818] .el-carousel__indicators li:hover{borde
最新发布
03-13
<think>好的，我现在需要帮助用户解决如何自定义Element UI的菜单和轮播图组件的CSS样式。首先，我需要回顾用户提供的引用内容，看看有没有相关的信息。引用[1]提到在main.js中注释掉导入style.css的代码，以免影响Menu组件的样式。这可能意味着用户之前有全局样式冲突的问题，需要避免全局样式覆盖组件样式。引用[2]展示了如何在Vue项目中引入Element UI的CSS文件，并配置locale，这可能涉及到样式的全局配置。引用[3]推荐了Element Angular的解决方案，但用户的问题是关于Vue的Element UI，所以可能需要忽略这部分。 接下来，用户的问题是如何自定义菜单和轮播图组件的样式。Element UI的组件通常通过作用域化的CSS类名来定义样式，因此用户需要覆盖这些类名。但要注意样式优先级的问题，可能需要使用更具体的选择器或!important。 首先，处理菜单组件。菜单的类名包括.el-menu、.el-menu-item等。用户可以通过在组件的<style scoped>中添加自定义样式，但scoped可能会导致样式无法应用，所以可能需要使用深度选择器/deep/或>>>。例如： <style scoped> /* 使用深度选择器覆盖菜单项样式 */ /deep/ .el-menu-item { background-color: #f0f0f0 !important; } </style> 不过，引用[1]提到注释掉全局的style.css导入，说明用户可能之前有全局样式影响了组件，所以需要确保自定义样式不被全局样式覆盖。可能需要建议用户使用局部作用域或更具体的选择器。 然后是轮播图组件，即Carousel。Element UI的轮播图组件类名包括.el-carousel、.el-carousel__item等。用户可能想修改指示器样式、箭头颜色或项目背景。例如，修改指示器颜色： .el-carousel__indicator.is-active button { background-color: #ff0000 !important; } 同样需要注意样式优先级，可能需要使用!important或更具体的选择器。 另外，用户可能需要了解如何局部覆盖样式，而不是全局修改。例如，在某个组件的<style>中编写样式，而不是在全局CSS文件中。同时，如果使用scoped属性，需要正确使用深度选择器来穿透作用域。 总结步骤应该是：1. 确定需要修改的组件类名；2. 使用深度选择器在局部组件中覆盖样式；3. 处理样式优先级问题；4. 避免全局样式冲突（如引用[1]的做法）。 此外，引用[2]中的配置可能涉及到主题定制，但用户的问题更偏向于直接修改CSS，而不是通过主题变量。不过可以提一下Element UI的主题定制功能作为备选方案，比如使用SCSS变量来全局更改主题色，但用户可能只需要局部调整，所以主要介绍CSS覆盖方法。 最后，生成相关问题时要考虑用户可能的后续疑问，比如如何提升优先级、使用SCSS变量、处理scoped样式的问题，以及如何定位组件的类名。</think>### 如何自定义Element UI菜单和轮播图组件的CSS样式？ #### 一、菜单组件样式修改 1. **定位菜单组件的类名** Element UI的菜单组件（`el-menu`）使用以下关键类名： - `.el-menu`: 菜单容器 - `.el-menu-item`: 菜单项 - `.el-submenu`: 子菜单容器 - `.is-active`: 激活状态的菜单项 2. **覆盖默认样式** 在Vue组件的`<style>`标签中，通过**深度选择器**修改样式（注意兼容性）： ```css /* 修改菜单项背景色和悬停效果 */ /deep/ .el-menu-item { background-color: #f0f8ff !important; transition: all 0.3s; } /deep/ .el-menu-item:hover { background-color: #e1f5fe !important; } ``` 若全局生效，可在项目入口CSS文件中直接定义（需避免与其他全局样式冲突）[^1]。 #### 二、轮播图组件样式修改 1. **轮播图关键类名** - `.el-carousel`: 轮播容器 - `.el-carousel__item`: 轮播项 - `.el-carousel__arrow`: 导航箭头 - `.el-carousel__indicator`: 指示器容器 2. **自定义指示器和箭头** ```css /* 修改指示器激活状态颜色 */ /deep/ .el-carousel__indicator.is-active button { background-color: #ff4757 !important; } /* 隐藏默认箭头并添加自定义图标 */ /deep/ .el-carousel__arrow { display: none; } .custom-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; } ``` #### 三、通用注意事项 1. **样式优先级控制** - 使用`!important`强制覆盖组件库默认样式 - 通过添加父级选择器提高优先级（如`.page-container .el-menu`） 2. **主题定制扩展方案** 如需全局修改，建议通过Element UI的**SCSS变量**配置： ```scss /* 在项目样式文件中定义 */ $--color-primary: #42b983; // 修改主题色 @import "~element-ui/packages/theme-chalk/src/index"; ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值