块级元素width:100%引发的思考

发表于 2016-12-28
更新于 2024-05-23
分类于 技术专栏
阅读量 9728
字数统计 1955

前言

最近在一个项目中遇到一个CSS的问题,今天终于得空分享给大家。

问题场景还原

demo如下:

可以看到第一条信息“短一点的”可以正常的显示,但是第二条信息比较长(但是绝对没有超过div的最大宽度568px),就出现了省略符号。那么我们将这个问题简单地描述为:

display:block的块级标签的宽度为什么在width:100%的时候没有随着其内容的增加发生自适应地改变呢?

分析这个问题,我们得清楚几个预置条件,没有这些条件也就不会出现这种问题的:

  1. p标签(其实是任何块级元素都有这个问题)有一个父容器div
  2. p标签保持默认的display属性(即display:block)
  3. 父容器div的宽度自适应(也就是没有明确配置宽度)
  4. 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%的。

解决办法

那么针对这种问题我们有两种解决办法,优先推荐第一种:

  1. 去掉width:100%,使用默认的width:auto,也就是不需要配置width
  2. 添加display: inline-block

解释一下为什么第二种方法也是可以生效的,那就是因为块状内联元素的宽度是会随着其内容变化而变化的,因此引入了一个变数,这个时候的width=100%的属性没有用的了。

从这次的分析以及查找材料中发现几个以前都不知道的概念,这些会在下一篇文章HTML中Content Model和CSS中的Replaced element中同样使用demo的方式来分析分析。

参考

  1. https://www.w3.org/TR/CSS21/visudet.html#blockwidth
  2. http://www.456bereastreet.com/archive/201112/the_difference_between_widthauto_and_width100/
  3. https://www.impressivewebs.com/width-100-percent-css/

公众号关注一波~

微信公众号

关于评论和留言

如果对本文 块级元素width:100%引发的思考 的内容有疑问,请在下面的评论系统中留言,谢谢。

网站源码:linxiaowu66 · 豆米的博客

Follow:linxiaowu66 · Github