css 父子盒子的width 问题

最新推荐文章于 2023-04-13 17:03:14 发布
最新推荐文章于 2023-04-13 17:03:14 发布
阅读量2.8k 收藏 6
点赞数 3
分类专栏： css 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44812835/article/details/108330534
版权
本文探讨了CSS中影响子元素宽度的几种情况，包括：未设置宽度时默认撑满父盒子，设置`display: inline`或`inline-block`导致不占宽，`float`属性和`position`属性（如`absolute`、`fixed`）使元素脱离文档流不占宽，以及`flex`布局下`flex-direction: row`对子元素宽度的影响。总结指出，判断元素是否占宽关键看其是否被视为块级元素。
摘要由CSDN通过智能技术生成
1.前言

平时在写css的时候，并没有刻意关注盒子的width属性，有时候要加，有时候不加，有时候默认占满父盒子，有时候却又没有宽度。今来看看到底有哪些情况

2.介绍
  • 首先width它不是一个可以继承的属性，之所以可以和父盒子宽度一样，应该还是因为块级元素默认独占一行的缘故会撑满父盒子的宽度
  • 知道它是因为块级元素的特性撑满父元素，很多现象就可以解释了
  • 下面我们通过代码来一探究竟
//dom结构
<body>
  <div class="box">
   <div class="son"><
最低0.47元/天 解锁文章
木木林_
关注
专栏目录
CSS-父盒子跟子盒子之间的缝隙问题
Fky_mie的博客
03-23 5672
父盒子跟子盒子之间的缝隙问题 Remove single pixel gap between child and parent div 即使给父子盒子设置相同大小, 给子盒子填色后会发现随着浏览器窗口缩放, 父子盒子之间有个小缝隙. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> &
CSS盒子模型
m0_60754682的博客
07-23 338
当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下边距margin-bottom，下面的元素有上外边距margin-top，则它们之间的垂直间距不是margin-bottom与margin-top之和。对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括边框、外边距、内边距和实际内容。所谓盒子模型就是把HTML页面中的布局元素看作是一个举行的盒子，也就是一个成装内容的容器。...
在HTML中width:100%了，在设置border,这时盒子的总宽度会大于父盒子，会溢出，这时该怎么办？
小董同学西北民族
10-16 1299
题目 width:100%了，在设置border,这时盒子的总宽度会大于父盒子，会溢出，这时该怎么办？ 分析 因为传统的代码： .box3{ width: 50%; height: 50%; background-color: aqua; border: 1px solid black; float: left; } 会导致溢出，所以这时我们加上代码：box-sizing: border-box; 原本代码变为： .box2{ width: 50%; height: 50%; background-colo
子容器widht为100%时,可得到的实际宽度比父级容器的长度要长
miracle
03-18 799
如下例子:&lt;div  style="width:100px;height:100px"&gt;    &lt;p style="width:100%;padding-left:10px;border-left:20px"&gt;子容器会为130px&lt;/p&gt;&lt;/div&gt;出现如上情况是 因为p标签的box-sizing属性默认为content-box(元素的宽度和高度为内...
css不设置子元素宽度，就会设置填充为父亲的宽度嘛？
m0_62641005的博客
02-19 1725
先给出结论：当父级盒子中只有一个子级盒子并且设置了高度时，子盒子的宽度为父亲的宽度。但是当子级盒子为多个存在在父级盒子当中，那么子级盒子会根据盒子中如字数这种元素来扩充盒子。 下面演示一下意思，方便理解。其中为了让块级元素一行显示，运用到了浮动的相关知识。 <body> <div class="father"> <div class="son"></div> </div> </body> 先给出父
当子div用到float特性时，父div宽度为0的解决办法
weixin_43697050的博客
01-09 784
原因： 当一个元素只包含浮动元素的时候，它会出现高度折叠,即元素的上下底边重合，和高度为0效果一样 解决办法 （1）给包含元素设置高度 直接给元素设置固定高度。但是这样的高度无法自适应。 （2）利用overflow:hidden属性 参考 https://blog.csdn.net/qq_36470686/article/details/82846924 （3）在和子div同级中插入一个空的di...
CSS 关于子盒子设置margin，溢出父盒子的问题
Tiny2017的博客
11-07 6368
CSS 关于子盒子设置margin，溢出父盒子的问题 问题分析： 通常情况下，一个盒子的width=border+margin+padding+width，然后当我的子盒子width设置100%自父盒子时，再设置margin-left或margin-right，就会发生盒子溢出现象。 解决方法： 方法一：给父盒子设置box-sizing: border-box，设置这个之后，padding mar...
CSS之盒子模型的布局
qq_53977993的博客
10-18 545
本章主要介绍盒子模型的布局、隐藏元素的方式、阴影和圆角......希望对你有所帮助。
input输入框超出父盒子问题解决
qq_39111074的博客
09-10 1641
问题： 进行网页编辑时，一个盒子里面装了一个input输入框，input输入框给的是父盒子宽度的100%，但是页面中显示超出了父盒子的宽度，如下图，绿色的是给父盒子的背景色： 解决方法： 检查发现是input类型问题，默认input类型是 “text” , 修改为 “search” 后，宽度就正常和父盒子一样宽了： 修改后： ...
css弹性盒子 子元素不压缩超出父盒子
MrHao_的博客
10-30 6809
我想实现一个横向滚动，但是父盒子是弹性盒子,display:flax;子元素给多宽都默认不超出父盒子的宽度；。 flex-shrink:0; 子盒子加上这个属性就可以实现了，就不会再压缩你的子元素了。横向滚动也可以了 ...
html不能超出div的宽度,DIV设置width后超出父元素应该如何解决
weixin_33848693的博客
06-10 3898
这次给大家带来DIV设置width后超出父元素应该如何解决，解决DIV设置width后超出父元素的注意事项有哪些，下面就是实战案例，一起来看一下。前言本文介绍的是利用CSS3的新属性box-sizing，解决div宽度设置width:100%后再设置padding或margin超出父元素的问题，有需要的朋友们可以参考借鉴。语法box-sizing: content-box|border-box|i...
css 父级元素宽度根据后代元素最大固定宽度自适应
qq_34870529的博客
05-15 2091
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>css 实用技巧</title> <style> div{ .
2015-10-12
ac601458466的博客
10-15 420
IE6的父盒子永远会包裹住子盒子，子盒子永远不会超出父盒子。 无法完成内盒子的边框和外盒子的边框的重叠IE6/7盒子的overflow：hidden问题， IE6 当子盒子的尺寸超过父盒子时，IE6的父盒子会被子盒子撑开，子盒子的尺寸保持不变，而当设置了overflow属性之后，父盒子无法被子盒子撑开。IE6/7 的隐藏模式overflow：hidden均通过层级隐藏，即将子盒子放在父盒子的层下
防止DIV被撑开的CSS
hyb1234hi的专栏
05-21 891
div {  table-layout: fixed;  word-wrap: break-word;  width: 加上宽度;  overflow: hidden; (让多出来的不显示。)  }  重点是  table-layout: fixed;  word-wrap: break-word;  这两句。
css父子盒子的width问题
qq_44718039的博客
06-22 4270
css父子盒子的宽度问题
【CSS】解决flex布局下，子元素宽度超出父容器宽度后被压缩
weixin_42678675的博客
10-25 7827
1）实现子元素不压缩，超出宽度且在不显示滚动条的情况下能左右滚动 给每个子元素添加 flex-shrink: 0 父元素 overflow: auto 父元素伪类 father::-webkit-scrollbar { display : none } 2）代码 <div class="father"> <div class="son"></div> </div> <style> .father { width: 100%;
HTML标签子元素绝对定位被父元素遮挡问题
qq_34248133的博客
07-19 1万+
请看如下示例代码： <li class="box"> <img src="...." class="hot" /> <a href="..."></a> </li> <style> .box { position:relative; } .hot { position:absolu...
【CSS】使用绝对定位 / 浮动解决外边距塌陷问题 ( 为父容器 / 子元素设置内边距 / 边框 | 为子元素设置浮动 | 为子元素设置绝对定位 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
04-13 1350
一、外边距塌陷描述 1、没有塌陷的情况 2、外边距塌陷情况 二、传统方法解决外边距塌陷 - 为父容器 / 子元素设置内边距 / 边框 三、使用浮动解决外边距塌陷 - 为子元素设置浮动 四、使用绝对定位解决外边距塌陷 - 为子元素设置绝对定位
纯CSS让子元素突破父元素的宽度限制
热门推荐
王为仁的博客
06-01 2万+
纯CSS让子元素突破父元素的宽度限制 在写样式中，我们可以经常看到这样的情况 代码如下 &lt;div style="width: 300px;border: 4px solid #000;margin: 20px;padding: 2px;"&gt; 父元素 &lt;div style="border: 1px solid blue;height: 100px;w...
css width 减去同级盒子 宽度
最新发布
06-03
如果你想让一个 CSS 盒子的宽度（width）减去同级盒子的宽度，你可以使用 CSS 中的 calc() 函数。例如，如果你想让一个盒子的宽度减去另一个同级盒子的宽度并保持一个固定的边框宽度，可以使用以下代码： ```css .box1 { width: calc(50% - 20px); border: 1px solid black; } .box2 { width: 30%; border: 1px solid black; } ``` 在这个例子中，box1 的宽度为屏幕宽度的 50%，减去 20px 的边框宽度和同级盒子 box2 的宽度。box2 的宽度为屏幕宽度的 30%。这样你就可以动态地计算盒子的宽度而不需要手动计算。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

木木林_

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

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

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

打赏作者

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

抵扣说明：

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

余额充值