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

最新推荐文章于 2022-10-20 19:14:49 发布
原创 最新推荐文章于 2022-10-20 19:14:49 发布 · 1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

探讨在使用CSS的绝对定位时，box-sizing:border-box属性为何会失效。文章通过实例说明，当元素脱离正常文档流，原本的宽度限制将不再适用。
个人理解： box-sizing: border-box虽然是怪异盒子模式，但是是基于 正常文档流 前提的，如果设置了 position： absolute ，即 脱离了 正常的文档流，那么box-sizing: border-box就会 失效

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

CSS：为什么看起来content-box更合理，但还是经常使用border-box？
TianXuab的博客
11-11 744
当我们在进行网页布局时，经常会遇到content-box和border-box这两种盒子模型。虽然content-box看起来更合理，但我们却经常使用border-box。本文将解释为什么会出现这种情况，并详细介绍如何将一个盒子模型变成border-box。
CSS之box-sizing属性以及box-shadow属性的灵活运用
dwjdj的博客
01-23 787
box-sizing属性 作用：用于定义盒子的宽度值和高度值是否包含内边距和边框 box-sizing:content-box | border-box; content-box:该容器的实际大小=内容+边框+内边距。即当定义width和height时，它的参数值不包括border和padding。 border-box:该容器的实际大小就是我们设置的width和height的实际大小。borde...
position:absolute绝对定位与border-box父元素内边框关系
Hello_MrShu的博客
10-20 1426
absolute定位相对于已定位父级内边框，不管父级的 box-sizing 是 border-box 还是 content-box。虽然子级 position:absolute 脱离了正常的文档流，但是因为父级是 position:relative，所以子级和父级之间的关系还在。而父级盒模型的特点，使子级在定位的时候是以边框内为标准的。至于父级是不是border-box，那与子级定位无关，因为那是父级在整个文档布局时的宽高属性。
同时使用position和padding(或者margin)时出现的问题和解决方法
Rome_z的博客
05-04 2019
因为position: absolute;会使元素脱标，脱标之后父盒子的padding或者子盒子的margin会失效，这时会出现一些问题： <style> * { box-sizing: border-box; } .fa { width: 400px; height: 300px; background-color: skyblue; margin: 200px auto;
position
baneju9157的博客
09-21 419
absolute: 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 fixed: 生成固定定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 re...
box-sizing: border-box；失效问题
前端一线搬运工的博客
07-26 5301
当前标签用了position:relative;且子标签用了position:absolute; 导致盒子失效了
总结一下css中的盒子模型和position定位
weixin_33737134的博客
11-20 394
CSS盒子模型 属性box-sizing可取值 border-box content-box 标准盒子模型（content-box） <!DOCTYPE html> <html> <head> <style type="text/css"> .hello { width: 200px; ...
关于box-sizing的全面理解
12-13
例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。 语法box-sizing: content-box|border-box|inherit; ...
.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
position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; } ``` #### 三、通用注意事项 1. **样式优先级控制** - 使用`!important`强制覆盖组件库默认样式 - 通过添加父级选择器提高...
精选资源
详解css如何利用 :before :after 写小三角形
01-19
border-left:20px solid transparent;border-right: 20px solid transparent;border-bottom: 20px solid red; } .tri-left{width: 0;height:0;border-top:20px solid transparent;border-bottom: 20px solid ...
border-sizing之border-box、content-box
lovelyqianqian的博客
03-22 941
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 849
盒子模型 margin 外边距 border 边框 padding 内边距
【css】求解！border与position:absolute产生冲突。求解原理及直接解决方法。
rIce_Paul的博客
02-24 830
直接上代码 <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 653
CSS中有三个属性与页面布局和box的创建有关：display，position和float，但是如何同时设置了三个属性，则三者之间有优先级关系：
position属性对其他元素位置的影响
tomorrow_shoe的博客
03-19 1587
position对文档流和自己原始位置的影响 默认的static和设定的relative都不会脱离文档流。 static占有文档的位置就是显示的位置，它是默认的属性，即原来位置与现在位置相同。 而relative占有的位置是原来的位置，**现在的位置脱离与文档的关系。**这一点非常关键，即它相对于relative计算之后的位置是脱离文档的，跟visibility设置为hiddn类似，只占原来的位置...
-webkit-box-sizing属性冲突如何解决
qToHoTp的博客
11-03 2667
-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 360
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
引入bootstrap文件后，box-sizing部分模块的布局错乱
u013197034的博客
04-15 375
在模板中引入bootstrap的css文件后，模板中的部分模块错乱，代码调试发现是因为 box-sizing:border-box问题， 所有的元素应用该样式，我有个div的元素块不想应用它的这个样式， 结果发现无论是内联还是内部都无法覆盖bootstrap定义的这个样式 后来查到有一句话说 “*”不但通配所有元素，也包括继承关系 可能问题就出现在虽然我显示覆盖div块父元素的样式，但是其子并没有被覆盖 .name *{ box-sizing:content-box } <div c..
6-2、选择器
鸵鸟
09-06 1062
选择器
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值