子元素宽度100%，但是父元素加了Padding，子元素宽度超出问题

已于 2023-12-04 20:54:28 修改
阅读量2.4k 收藏 1
点赞数 2
分类专栏： CSS 文章标签： css3 前端 css
于 2022-03-09 20:03:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_59962790/article/details/123385545
版权

问题：

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbTBfNTk5NjI3OTA=,size_20,color_FFFFFF,t_70,g_se,x_16

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbTBfNTk5NjI3OTA=,size_20,color_FFFFFF,t_70,g_se,x_16

父元素宽度为500px，给了padding，但是子元素的宽度100%会导致宽度超长

分析问题：

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbTBfNTk5NjI3OTA=,size_20,color_FFFFFF,t_70,g_se,x_16

其实input框的真实宽度，元素本身宽度+元素本身padding+边框，即500+20+4 = 524，超出了父元素的长度

解决办法：

使用盒子模型box-sizing:border-box，把包括边框内边距以及子元素本身的长度作为整体为100%

效果如下：

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbTBfNTk5NjI3OTA=,size_20,color_FFFFFF,t_70,g_se,x_16

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbTBfNTk5NjI3OTA=,size_20,color_FFFFFF,t_70,g_se,x_16

Goat恶霸詹姆斯
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
2021-04-29
v_shenghuojia的博客
04-29 603
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 定位后元素超出屏幕宽度问题一、当父级容器内的子元素width设为100%，而子元素又有绝对定位时，子元素伸展超出父级容器，像下面二、解决办法1.原因:出现这种情况的原因，width：100%，这个百分之百是相对其定位父级而言的，其定位父级有多宽，这个子元素就有多宽，所以子元素跑到了父级容器外三. 解决: 将子元素的宽度设置为auto 即可 一、当父级容器内的子元素width设为100%，而子元素又有绝对定位时，子元素伸展超出父级容器，像下面
父元素使用flex子元素宽度100%失效问题
shi19970609的博客
09-28 1175
父元素在设置flex:1来固定宽度撑满时，子元素设置width100%无效。经过尝试发现给父元素及设置flex:1的元素加上width:0可解决。
【css问题】flex布局中，子标签宽度超出父标签宽度，导致布局出现问题
smart_dream
08-04 2559
flex布局中，子标签宽度超出父标签宽度，导致布局出现问题
子元素宽度超出父元素
热门推荐
github_38186390的博客
11-19 1万+
1.主要是给父元素设置white-space: nowrap;强制元素不换行。如果需要使父元素不换行则需要设置display： inline-block;等 2. 给子元素设置dispaly: flex / inline-flex / inline-block 使子元素里面的元素一行显示。   总结： .parent { white-space: nowrap;display: in...
flex布局子元素的宽度与父元素的宽度一致了，怎么办？子元素是行内元素，想要子元素的实际长度为其宽度
最新发布
u010234868的专栏
05-17 150
flex布局子元素的宽度与父元素的宽度一致了，怎么办？子元素是行内元素，想要子元素的实际长度为其宽度。给flex元素设置align-items: flex-start;
让子盒子在父盒子中垂直居中的五个方法
01-08
一、用padding实现 1.padding-top = (父盒子的高度 – 子盒子的高度) / 2 2.padding-left = (父盒子的宽度 – 子盒子的宽度) / 2 3.由于padding会撑大盒子，所以父盒子的宽高要减去对应的padding值 盒子居中联系 /* 大盒子300*300，小盒子150*100，怎么使小盒子在大盒子里面居中 */ .dad { /* 300-75=225 */ width: 225px; /* 300-100=200 */
flex布局子元素超出父元素
qq_43101834的博客
01-26 7769
遇到的问题： 父元素是body，宽度给100%。子元素想要距离屏幕两侧各10px，但我给子元素也设置了100%且是flex布局，这时宽度超出屏幕，页面开始横向滑动！ 最终想要的效果是不横向滑动页面完整展示。 现在记录一下这个问题，警告自己，当时写的时候脑子估计废掉了。 类似上图中，子元素 ...
子元素宽高设置为100%后，宽高都超出父级
weixin_40563746的博客
11-22 1540
而使用绝对定位时，子集元素的宽高是根据父级元素的padding盒子计算的，也就是说子集的宽度 = 父级左padding + content + 父级右padding，子集的高度 = 父级上padding + content + 父级下padding。当元素没有进行定位时，子集元素设置的宽度和高度的百分比，是根据content区计算的，也就是说，没有把padding、border计算进去。最近写样式遇到了如下现象：子集设置宽高为100%，但是溢出了父级，如下图所示。通过查阅资料，获知了原因。
关于 flex 布局时，子元素宽度超出父元素问题及解决方案（问题）
weixin_60547084的博客
03-20 9713
这个是我在项目中遇到的一个bug，使用的 flex 布局，由于我动态的修改绿色盒子的显示与隐藏，导致两边盒子的挤压。先看效果图，大家可以看一下下面的样式，很明显左边和右边的盒子我是给的定宽，但是被挤压了。很明显，红色的盒子没有300px。
纯CSS让子元素突破父元素的宽度限制
11-19
在CSS布局中，我们经常遇到子元素无法突破父元素的宽度限制的问题，这是因为在默认情况下，子元素的宽度是受限于父元素的宽度的。但是，有时候我们需要子元素突破父元素的宽度限制，以实现某些特殊的布局效果。 在...
详解css使既有浮动又有左右margin的多个元素两端对其
12-14
Bootstrap的`.row`类设置了左右内边距为负值(-15px)，这样`.col-xx-xx`类的子元素就可以在`.row`容器内实现两端对齐，并且元素之间保留了间距。 以下是一个简单的代码示例，展示了如何使用浮动和负边距来实现两端...
自适应宽度的标签导航
05-15
自适应宽度是指元素的宽度会根据其父元素或容器的宽度变化而变化，而不是固定不变。在标签导航中，这意味着每个标签的宽度会根据可用空间自动调整，保持整体布局的平衡和美观。 二、HTML基础结构 创建自适应宽度的...
float元素浮动后高度不一致导致错位的解决办方法
09-25
通过设置`display: flex`在父元素上，可以自动调整子元素的排列方式，无需考虑浮动。例如： ```css ul { display: flex; flex-wrap: wrap; } ul li { width: 160px; } ``` 5. **使用CSS Grid布局** CSS ...
css3 box-sizing属性使用参考指南
12-01
在这个例子中，`.box_sizing`的子元素`.in`应用了`border-box`，因此元素的宽度100%包含了边框和内边距，不会导致父元素`.box_sizing`的溢出。在不同的浏览器中，由于历史兼容性问题，可能需要使用各种前缀 `-webkit...
因为padding和border宽度导致子元素超过父元素的解决方法
meteoite的博客
06-23 2793
因为padding和border宽度导致子元素超过父元素的解决方法  在 CSS 盒子模型的默认定义里，对一个元素所设置的 width 与 height 只会应用到这个元素的内容区。如果这个元素有任何的 border 或 padding ，绘制到屏幕上时的盒子宽度和高度会加上设置的边框和内边距值。  如对child container赋予如下的css，最终的样式将会变成这样。 .child{ width: 100%; border: solid #5B6DCD 10px; padding: 5px;
为什么子容器设置了width:100%但还是超出了父容器的宽度
wwwwj的博客
02-07 765
设置一个父元素和一个子元素，给子元素加上width:100%，继承父元素的宽度。加上外边距之后，就会出现子元素宽度超出父元素宽度，并且页面出现横向的滚动条。 width:100%表示子元素继承父元素的宽度，box-sizing默认是content-box，所以width只表示内容区域的宽度，子元素加了外边距之后整个宽度就比父元素的大了。 如果想要不超出父元素宽度，可以指定子元素的宽度，或者不设置宽度（子元素宽度会自动调整为父元素的剩余可用宽度）。
【CSS】解决flex布局下，子元素宽度超出父容器宽度后被压缩
weixin_42678675的博客
10-25 7303
1）实现子元素不压缩，超出宽度且在不显示滚动条的情况下能左右滚动 给每个子元素添加 flex-shrink: 0 父元素 overflow: auto 父元素伪类 father::-webkit-scrollbar { display : none } 2）代码 <div class="father"> <div class="son"></div> </div> <style> .father { width: 100%;
css列表示例&flex布局子元素超出父容器宽度问题
pscool的博客
02-28 2097
* white-space属性为nowrap时，不会因为超出容器宽度而发生换行 */
div宽度设置width:100%后再设置padding超出父元素( flex设置width: 100%后超过屏幕)|css:box-sizing
秋叶原的黑猫的博客
07-12 3417
在全局css样式中设置该属性，可以使得在整个项目中设置的width和height方式都相同，设置的width即为所看到的宽度，不会出现容器“越界”的情况。如下图所示，子元素宽度大于父元素，这样可能会导致屏幕溢出，出现滑动条。最终将该样式文件引用到整个项目即可，具体引用方法这里不再赘述。我们可以在父元素中设置。...
vue怎么实现子元素高度等于父元素宽度
06-10
要实现 Vue 中子元素的高度等于父元素的宽度，可以使用 Vue 的内置指令 v-bind 和 v-on，以及 CSS 中的 padding 或者 margin 属性，通过动态绑定样式来实现。具体实现方法如下： 1. 使用 padding ```html <template> <div class="parent" :style="{ width: parentWidth + 'px' }"> <div class="child" :style="{ paddingTop: parentWidth + 'px' }"></div> </div> </template> <script> export default { data() { return { parentWidth: 200 // 父元素宽度 }; } }; </script> <style> .parent { position: relative; } .child { position: absolute; top: 0; left: 0; width: 100%; height: 0; background-color: #f00; } </style> ``` 在上面的代码中，首先使用 v-bind 指令将父元素的宽度绑定到一个 data 属性 parentWidth 上。然后通过 :style 绑定样式，将父元素的宽度设置为 parentWidth，并将子元素的 paddingTop 设置为 parentWidth，以实现子元素的高度等于父元素的宽度。 2. 使用 margin ```html <template> <div class="parent" :style="{ width: parentWidth + 'px' }"> <div class="child" :style="{ height: parentWidth + 'px' }"></div> </div> </template> <script> export default { data() { return { parentWidth: 200 // 父元素宽度 }; } }; </script> <style> .parent { position: relative; } .child { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin-top: 100%; background-color: #f00; } </style> ``` 在上面的代码中，同样使用 v-bind 指令将父元素的宽度绑定到一个 data 属性 parentWidth 上。然后通过 :style 绑定样式，将父元素的宽度设置为 parentWidth，并将子元素的高度设置为 parentWidth，以实现子元素的高度等于父元素的宽度。同时通过 margin-top: 100%，将子元素的顶部向上移动，让其与父元素的底部重合。 需要注意的是，在 Vue 中使用动态绑定样式时，需要将样式绑定到一个对象上，并且样式的值需要使用字符串拼接的方式来进行动态绑定。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

Goat恶霸詹姆斯

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

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

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

打赏作者

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

抵扣说明：

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

余额充值