块级元素width:100%引发的思考
前言
最近在一个项目中遇到一个CSS的问题,今天终于得空分享给大家。
问题场景还原
demo如下:
可以看到第一条信息“短一点的”可以正常的显示,但是第二条信息比较长(但是绝对没有超过div的最大宽度568px),就出现了省略符号。那么我们将这个问题简单地描述为:
display:block的块级标签的宽度为什么在width:100%的时候没有随着其内容的增加发生自适应地改变呢?
分析这个问题,我们得清楚几个预置条件,没有这些条件也就不会出现这种问题的:
- p标签(其实是任何块级元素都有这个问题)有一个父容器div
- p标签保持默认的display属性(即display:block)
- 父容器div的宽度自适应(也就是没有明确配置宽度)
- p标签的宽度明确指定100%(也就是width: 100%)
那么出现这种问题的原因究竟是什么呢?
原因分析
我们知道块状元素的宽度如果不设置的时候默认属性应该是width:auto
,那么它会默认扩展并占用其包含块的所有可用的水平空间,并且保证该块状元素的width+border+margin+padding不会超过其包含块(除非boder+margin+padding已经大于其包含块的宽度)。其宽度的变化是综合多种因素来决定的。
Note:如果需要更加详细的细节你应该参考CSS的规范:block-level, non-replaced elements in normal flow
如果你将块状元素的宽度设置了width:100%
的时候,这个时候相当于你明确指出“我的这个元素宽度应该和其包含块的宽度一模一样,只要包含块的宽度不改变,我的也就不改变了,这种设置等价于强强绑定,其宽度的改变只取决于其包含块的宽度改变”,这种设置除了导致上面的结果之外还有另外一个问题,那就是如果该元素还有margin&padding&border的话,很有可能会让该块状元素溢出其包含块。
知道了这两种配置的区别之后我们应该可以看出问题出在哪里了:
如果我配置了child
的width为100%,那么浏览器在开始渲染的时候,其宽度就会根据其包含块的宽度来决定,这个时候其宽度为120px
,之后如我们介绍的,只要其包含块的宽度没有变化,child
元素的宽度是不会变化,而包含块的宽度却是内部元素决定的,这样就出现一种“蛋生鸡鸡生蛋”的矛盾结果,因此即使里面的内容变长了,都无法影响到其包含块的宽度,所以就会导致我们看到省略号。
在这篇文章中What Does “width: 100%” Do in CSS?是极其不建议在块状元素中配置width:100%
的。
解决办法
那么针对这种问题我们有两种解决办法,优先推荐第一种:
- 去掉
width:100%
,使用默认的width:auto
,也就是不需要配置width - 添加
display: inline-block
解释一下为什么第二种方法也是可以生效的,那就是因为块状内联元素的宽度是会随着其内容变化而变化的,因此引入了一个变数,这个时候的width=100%的属性没有用的了。
从这次的分析以及查找材料中发现几个以前都不知道的概念,这些会在下一篇文章HTML中Content Model
和CSS中的Replaced element
中同样使用demo的方式来分析分析。
参考
公众号关注一波~
![微信公众号](https://blogimage.5udou.cn/homePage/%E5%85%AC%E4%BC%97%E5%8F%B7-%E7%99%BD%E8%89%B2%E7%89%88.png?x-oss-process=style/addWaterMarkBottom)
网站源码:linxiaowu66 · 豆米的博客
Follow:linxiaowu66 · Github
关于评论和留言
如果对本文 块级元素width:100%引发的思考 的内容有疑问,请在下面的评论系统中留言,谢谢。