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

前言

最近在一个项目中遇到一个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/