深⼊理解CSS之如何使⼦元素撑宽设置了block的⽗元素
深⼊理解CSS之如何使⼦元素撑宽设置了display: block; 的⽗元素
先写⼀个模板，晚点再吐槽
HTML
<div class="wrap">
<div class="grandpa">
<div class="father">
<span class="child">我是⼀个⼦元素，我要写很多字把宽度撑开，我要写很多字把宽度撑开，我要写很多字把宽度撑开，我要写很多字把宽度撑开</span> </div>
</div>
</div>
CSS
.wrap{
width: 300px;
box-shadow: 0 0 3px 1px #000000;
padding: 5px;
}
.grandpa{
box-shadow: 0 0 3px 1px peru;
padding: 5px;
}
.father{
box-shadow: 0 0 3px 1px royalblue;
padding: 5px;
}
.child{
white-space: nowrap;
}
效果图
吐槽
可能看到这个标题的并且懂⼀点 css 的⼩伙伴就要笑了，⼦元素称宽⽗元素不是很简单吗。
只需要设置⽗元素 display 为 inline-block, 或者 设置 float: left 并清除⼀下浮动影响就⾏，就像下⾯这样。
.father{
display: inline-block;
}
.father{
float: left;/* 未清除浮动 */
}
或者对 css 理解更深⼊的⼩伙伴也会想
也可以设置 爷爷（⽗元素的⽗元素） 元素 display 为 flex 或者 grid，就像下⾯这样。
.grandpa{
display: flex;
}
.grandpa{
display: grid;
}
实现原理与更多⽀持的属性
上⾯的属性不管是.father 设置 display: inline-block 或 float: left; ，
还是 .grandpa 设置 display: flex; 或 display: grid;
都是使 .father 这个DOM 最⼤宽度不受 .grandpa 限制，
唯⼀的区别是每个属性还带有其他个性的样式，
⽐如 设置了 float 默认就⽆法撑开⾼度
设置了 display: grid 即使⽂本过少，.father 的宽度默认与.grandpa 相同
只要满⾜ .father ⾃动宽度 不受 .grandpa 最⼤宽度限制就能实现这个效果的话，display 的很多属性都能实现。
⽐如： inline-flex, inline-table, inline-grid, table, table-captioin, table-cell …，看下⾯的例⼦。
不想使⽗级的块属性消失怎么办
有时候我们看⽂档的时候，只从描述中⽆法深⼊的了解属性。⽐如这⾥的⼦元素撑开⽗元素，我们第⼀反应就是更改⽗元素的块属性。
隐藏属性就是，⽗元素是块，但是未设置过 width 和 max-width , ⼦元素能撑开的最⼤宽度就是最近⼀个设置过宽度的祖先元素，⽽不是只是⽗元素。还⽤上⾯的模板举个例⼦
.grandpa{
display: inline-block;
}
这个例⼦中就可以看到，爷爷元素设置了 display: inline-block ，⽗亲元素 还是 块 元素。但是⼦元素会连带⽗元素和爷爷元素⼀起撑宽。
如果是在 .wrap 这个DOM 上设置 display: inline-block ，⽗元素和爷爷元素还是不过超过 .wrap 的宽度。
这就是上⾯说到的 ⼦元素能撑开的最⼤宽度就是最近⼀个设置过宽度（最⼤宽度）的祖先元素。box shadow怎么设置
这种属性规则有什么作⽤呢
如果是写⼀个树，⼦元素都需要块占据⼀⾏，但是⼦要撑开⽗元素，只需要中间的块元素不设置宽度。
最上层元素设置上⾯提到的任意不受⽗最⼤宽度限制的属性，都可以撑宽树整体宽度。从⽽出现横向滚动条。
有兴趣的⼩伙伴可以看看 就是设置顶层元素 display: inline-block，使横向滚动条出现的，使⽤这个插件顶层元素 默认并不是display: inline-block ，不要忘了⼿动设置。
css 隐藏规则有很多，⼤家伙多⽤⽤就知道了，⽐如前⼏天 张鑫旭 发的⼀篇博客 使⽤ columns 属性，不单能直接分割⽂本，还能分割标签（虽然有较多限制）。
以上分享如果疏漏或错误欢迎指正。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。