在做页面时，想把搜索按钮放在页面底部（在正常流中，搜索按钮紧挨着上部分），即图一变为图二。

在给元素设置position:absolute;样式后，发现搜索框变小了；如图3；

在给元素设置定位position:absolute后，元素脱离正常流，不再继承父元素宽度。

写如下代码：

浏览器显示：

由以上我们可以看出，块级子元素可以继承父元素宽度。

我们把child的设为行内

结果如下：

其实行内元素设置宽度无效

把子元素设置为inline-block;

代码：把子元素设置为浮动；

结果： 注意：浮动元素会脱离正常文档流

代码：

结果： 如果把position的值改为relative，可以发现是继承的。

注意：absolute的元素脱离文档流，而position的元素实际还在文档流中，fixed效果和absolutey一样脱离文档正常流。

width的值可以设为百分比，如果不能继承父元素宽度属性，那么百分比的参考值是谁呢？

参考： 《css权威指南》第三版 https://www.cnblogs.com/gaogch/p/10652694.html